JavaScript基础（DOM）-Document对象、Element 对象、Attribute 对象 -JavaScript的内置对象（Array 对象、Date 对象、String 对象）

原文地址：http://blog.csdn.net/muzidigbig/article/details/78629540

JavaScript HTML DOM（文档对象模型）

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。

要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。

通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。

要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

• 通过 id 找到 HTML 元素
• 通过标签名找到 HTML 元素
• 通过类名找到 HTML 元素

Document文档结构图

Document：整个html文件都称为一个document文档

Element：所有的html标签都是element元素

Attribute：html标签里面的属性

Text：html标签中间夹着的内容为text文本

Node：document、element、attribute、text统称为节点node

HTML DOM Document 对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML页面中的所有元素进行访问。

提示：Document对象是Window 对象的一部分，可通过window.document属性对其进行访问。

Document 对象方法

方法	描述
close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById()	返回对拥有指定 id 的第一个对象的引用。
getElementsByName()	返回带有指定名称的对象集合。
getElementsByTagName()	返回带有指定标签名的对象集合。
open()	打开一个流，以收集来自任何 document.write()或document.writeln()方法的输出。
write()	向文档写 HTML 表达式 或JavaScript代码。
writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

集合需要遍历进行使用！

以下两个方法重要，在手册中查不到！

创建元素节点：document.createElement（）

创建文本节点：document.createTextNode（）

HTML DOM Element 对象

我们所认知的html页面所有的标签都是element元素

属性和方法

element.appendChild()	向元素添加新的子节点，作为最后一个子节点。
element.firstChild	返回元素的首个子节点。
element.getAttribute()	返回元素节点的指定属性值。
element.innerHTML	设置或返回元素的内容
element.insertBefore()	在指定的已有的子节点之前插入新节点。
element.lastChild	返回元素的最后一个子元素。
element.setAttribute()	把指定属性设置或更改为指定值。

HTML DOM Attribute 对象

我们所认知的html页面所有标签里面的属性都是attribute元素

属性和方法

属性 / 方法	描述
attr.isId	如果属性是 id 类型，则返回true，否则返回false。
attr.name	返回属性的名称。
attr.value	设置或返回属性的值。
attr.specified	如果已指定属性，则返回 true，否则返回false。
nodemap.getNamedItem()	从 NamedNodeMap 返回指定的属性节点。
nodemap.item()	返回 NamedNodeMap 中位于指定下标的节点。
nodemap.length	返回 NamedNodeMap 中的节点数。
nodemap.removeNamedItem()	移除指定的属性节点。
nodemap.setNamedItem()	设置指定的属性节点（通过名称）。

JavaScript的内置对象

· JS Array 

· JS Boolean 

· JS Date 

· JS Math 

· JS Number 

· JS String 

· JS RegExp 

Array 对象

Array 对象用于在单个的变量中存储多个值。

创建 Array 对象的语法：

new Array();

new Array(size);

new Array(element0,element1, ...,elementn);

参数

参数 size 是期望的数组元素个数。返回的数组，length字段将被设为size 的值。

参数 element ..., elementn 是参数列表。当使用这些参数来调用构造函数 Array()时，新创建的数组的元素就会被初始化为这些值。它的length字段也会被设置为参数的个数。

返回值

返回新创建并被初始化了的数组。

如果调用构造函数 Array() 时没有使用参数，那么返回的数组为空，length 字段为0。

当调用构造函数时只传递给它一个数字参数，该构造函数将返回具有指定个数、元素为 undefined的数组。

当其他参数调用 Array() 时，该构造函数将用参数指定的值初始化数组。

当把构造函数作为函数调用，不使用 new 运算符时，它的行为与使用 new 运算符调用它时的行为完全一样。

Js数组里面存储的类型可任意。

数组的特点： 长度可变！数组的长度=最大角标+1

Array 对象属性

length

设置或返回数组中元素的数目。

Array 对象方法

concat()	连接两个或更多的数组，并返回结果。
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()	颠倒数组中元素的顺序。
shift()	删除并返回数组的第一个元素
slice()	从某个已有的数组返回选定的元素
sort()	对数组的元素进行排序
splice()	删除元素，并向数组添加新元素。
toSource()	返回该对象的源代码。
toString()	把数组转换为字符串，并返回结果。
toLocaleString()	把数组转换为本地数组，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值

Boolean 对象

Boolean 对象表示两个值："true"或"false"。

创建 Boolean 对象的语法：

new Boolean(value);//构造函数

Boolean(value);//转换函数

参数

参数 value 由布尔对象存放的值或者要转换成布尔值的值。

返回值

当作为一个构造函数（带有运算符 new）调用时，Boolean()将把它的参数转换成一个布尔值，并且返回一个包含该值的Boolean对象。

如果作为一个函数（不带有运算符 new）调用时，Boolean()只将把它的参数转换成一个原始的布尔值，并且返回这个值。

注释：如果省略 value参数，或者设置为0、-0、null、""、false、undefined或NaN，则该对象设置为false。否则设置为true（即使value参数是字符串"false"）。

toString()

把逻辑值转换为字符串，并返回结果。

Date 对象

Date 对象用于处理日期和时间。

创建 Date 对象的语法：

var myDate=new Date()

注释：Date 对象会自动把当前日期和时间保存为其初始值。

Date 对象方法

Date()	返回当日的日期和时间。
setFullYear()	设置 Date 对象中的年份（四位数字）。
getMonth()	从 Date 对象返回月份(0 ~ 11)。
getDate()	从 Date 对象返回一个月中的某一天(1 ~ 31)。
getDate()	从 Date 对象返回一个月中的某一天(1 ~ 31)。
getHours()	返回 Date 对象的小时(0 ~ 23)。
getMinutes()	返回 Date 对象的分钟(0 ~ 59)。
getSeconds()	返回 Date 对象的秒数(0 ~ 59)。

 

Math 对象

Math 对象用于执行数学任务。

使用 Math 的属性和方法的语法：

var pi_value=Math.PI;

var sqrt_value=Math.sqrt(15);

注释：Math 对象并不像 Date 和String那样是对象的类，因此没有构造函数Math()，像Math.sin()这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把Math作为对象使用就可以调用其所有属性和方法。

Math 对象方法

abs(x)	返回数的绝对值。
ceil(x)	对数进行上舍入。
max(x,y)	返回 x 和y中的最高值。
min(x,y)	返回 x 和y中的最低值。
random()	返回 0 ~ 1 之间的随机数。
round(x)	把数四舍五入为最接近的整数。

Number 对象

Number 对象是原始数值的包装对象。

创建 Number 对象的语法：

var myNum=new Number(value);

var myNum=Number(value);

参数

参数 value 是要创建的 Number对象的数值，或是要转换成数字的值。

返回值

当 Number() 和运算符new一起作为构造函数使用时，它返回一个新创建的Number对象。如果不用new运算符，把Number()作为一个函数来调用，它将把自己的参数转换成一个原始的数值，并且返回这个值（如果转换失败，则返回NaN）。

Number 对象方法

方法	描述
toString	把数字转换为字符串，使用指定的基数。
toLocaleString	把数字转换为字符串，使用本地数字格式顺序。
toFixed	把数字转换为字符串，结果的小数点后有指定位数的数字。
toExponential	把对象的值转换为指数计数法。
toPrecision	把数字格式化为指定的长度。
valueOf	返回一个 Number 对象的基本数字值。

 

String 对象

String 对象用于处理文本（字符串）。

创建 String 对象的语法：

new String(s);

String(s);

参数

参数 s 是要存储在 String对象中或转换成原始字符串的值。

返回值

当 String() 和运算符new一起作为构造函数使用时，它返回一个新创建的String对象，存放的是字符串s 或s 的字符串表示。

当不用 new 运算符调用String()时，它只把s 转换成原始的字符串，并返回转换后的值。

String 对象属性

length

字符串的长度

String 对象方法

match()	找到一个或多个正则表达式的匹配。
substr()	从起始索引号提取字符串中指定数目的字符。
substring()	提取字符串中两个指定的索引号之间的字符。
toString()	返回字符串。

RegExp 对象

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

test	检索字符串中指定的值。返回 true 或false。

JavaScript 全局对象

全局属性和函数可用于所有内建的 JavaScript 对象。

顶层函数（全局函数）

函数	描述
decodeURI()	解码某个编码的 URI。
decodeURIComponent()	解码一个编码的 URI 组件。
encodeURI()	把字符串编码为 URI。
encodeURIComponent()	把字符串编码为 URI 组件。
eval()	计算 JavaScript 字符串，并把它作为脚本代码来执行。
parseFloat()	解析一个字符串并返回一个浮点数。
parseInt()	解析一个字符串并返回一个整数。

 

顶层属性（全局属性）

方法	描述
Infinity	代表正的无穷大的数值。
java	代表 java.* 包层级的一个JavaPackage。
NaN	指示某个值是不是数字值。
Packages	根 JavaPackage 对象。
undefined	指示未定义的值。