1.文档节点是每个文档的根节点。在HTML页面,文档节点始终都是<html>元素,因此我们也称其为**文档元素**。
2.DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现。这个Node接口在JavaScript中是作为Node类型实现的。除了IE之外,在其他所有浏览器中都可以访问到这个类型。JavaScript中的所有节点类型都继承自Node类型,因此所有节点类型都共享着相同的基本属性和方法。
3.每个节点都有一个**nodeType**属性,用于表明节点的类型。节点类型由在Node类型中定义的12个数值常量来表示。其中元素节点属性值为1,特性节点的属性值为2,文本节点的属性值为3。将nodeType属性与数字值比较可以检测其节点类型:
~~~
if (someNode.nodeType == 1){
alert('Node is an element');
}
~~~
4.要了解节点的具体信息,可以使用**nodeName**和**nodeValue**属性。其中nodeName保存着节点的具体名称(如<p>标签的nodeName值为大写的‘P’,nodeValue始终为null)。
5.每个节点都有一个**childNodes**属性,其中保存着一个NodeList对象。NodeList对象是一种类数组对象,用于保存一组有序的节点。虽然可以使用方括号语法来访问其子项,而且这个对象也有length属性,但它并不是Array的实例。NodeList对象的独特之处在于,它实际上是基于DOM结构动态执行查询的结构,因此DOM结构的变化能够自动反映在NodeList对象中。将childNodes转换成数组的方法:
~~~
function convetToArray(nodes){
var array = null;
try {
array = Array.prototype.slice.call(nodes,0);
} catch(error) {
array = new Array();
for (var i=0;i<nodes.length;i++) {
array.push(nodes[i]);
}
}
return array;
}
~~~
元素节点内的空白符也会作为文本标签被childNodes所包含。
6.描述节点间关系的属性还有:**parentNode、nextSibling、previousSibling、firstChild、lastChild**
7.**hasChildNodes()**方法在节点包含一或多个子节点的情况下返回true。所有节点都有的最后一个属性是ownerDocument,该属性指向表示整个文档的文档节点,通过这个属性我们可以不必在节点层次中通过层层回溯到达顶端,而是可以直接访问文档节点。
8.**appendChild()**向节点末尾添加一个节点,并返回新增节点。如果传入到appendChild()中的节点已经是文档的一部分了,那相当于将节点剪切了。
9.**insertBefore()**方法将一个新节点插到指定节点前面,并返回这个新节点。这个方法接收两个参数:要插入的节点和作为参照的节点。如果参照节点是null则与appendChild()执行相同结果。insertBefore()同样可以实现剪切。
10.**replaceChild()**方法将一个新节点替换掉原节点,并返回原节点。
11.**removeChild()**方法删除一个节点。
12.***以上四个方法操作的都是某个节点的子节点,也就是说,要使用这几个方法必须先取得父节点(使用parentNode属性)。***
13.**cloneNode()**方法用于创建节点副本。若传入参数为true,则会进行深复制,即复制节点及其整个子节点树。否则只会复制原节点本身。cloneNode()方法不会复制添加到DOM节点中的JavaScriipt属性,例如事件处理程序等。
15.***document.documentElement指向<html>元素。document.body指向<body>元素。***
16.通过**document.title**属性可以取得当前页面的标题(并非取得完整的title元素DOM对象),也可以修改当前页面的标题并反映在浏览器的标题栏中。修改title属性的值会改变<title>元素。
17.**URL**属性中包含页面完整的URL,**domain**属性中只包含页面的域名,而**referrer**属性中则保存着链接到当前页面的那个页面的URL。所有这些信息都存在于请求的HTTP头部。这三个属性中只有domain是可以设置的,但由于安全方面的限制,也并非可以给domain设置任何值。如果URL中包含一个子域名,则只能将domain设置为其主域名,同时不能将主域名设置为子域名。设置document.domain的意义在于,当页面中包含来自其他子域的框架或内嵌框架时,能够方便地进行相互访问而不受限于跨域安全限制。
18.getElementsByTagName()方法返回的是包含零或多个元素的nodeList。在HTML文档中,这个方法会返回一个HTMLCollection对象,作为一个‘动态’集合。
19.getElementsByName()方法常用于取得单选按钮。
20.document.implementation.hasFeature()方法用于检测浏览器是否支持给定的实现部分以及所支持的版本。通常还是要搭配能力检测使用。
21.document.write()和document.writeln()方法都接收一个字符串参数,即要写入到输出流中的文本。write()会原样写入,而writeln()则会在字符串的末尾添加一个换行符(\n).
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOCUMENT.WRITE() TEST</title>
</head>
<body>
<p>the Curent date and time is:
<script>
document.write('<strong>'+(new Date().toString())+'</strong>');
</script>
</p>
<script>
</script>
</body>
</html>
~~~
这个例子展示了在页面加载过程中输出当前日期和时间的代码。此外,还可以使用write()和writeln()方法动态地包含外部资源,例如Javascript文件等(必须做转义处理)。
**如果在文档加载结束后(如window.onload事件之后)再调用document.write(),那么输出的内容将会重写整个页面。**
22.所有元素对象都有的常用属性包括:id、title、className,它们也都是可修改的。
23.与特性相关的方法有三个setAttribute()、getAttribute()、removeAttribute()。
有两类特殊的特性,它们虽然有对应的属性名,但属性的值与通过getAttribute()返回的值并不同。第一类特性就是style,在通过getAttribute()访问时,返回的style特性值中包含的是CSS文本,而通过属性来访问它则会 返回一个对象。第二类特性是onclick这样的事件处理程序。如果通过getAttribute()访问返回的是相应的字符串,而在访问onclick属性时返回的是一个JavaScript函数或null。
24.创建元素节点:document.createElement(),接受一个表示要创建的标签的字符串,如'div'。
25.创建文本节点:document.createTextNode();通过nodeValue属性修改文本节点。
26.normalize()方法用于格式化处理文档树中的文本节点(包括空文本节点或接连出现的两个文本节点等情况)。而splitText()与前者相反,这个方法会按照指定的位置分割nodeValue值。
27.**NodeList及其近亲NamedNodeMap和HTMLCollection这三个集合都是动态的,而不是某个时间节点生成快照。换句话说,每当文档结构发生变化时,它们都会得到更新。因此,它们始终都会保存着最新、最准确的消息。从本质上说,所有NodeList对象都是在访问DOM文档时实时运行的查询。(不失时机地缓存NodeList对象的长度是处理这种特性的一种技巧)**
~~~
var divs = document.getElementsByTagName("div");
alert(divs instanceof HTMLCollection); //true (chrome中返回false,divs是NodeList对象)
var div = document.getElementById("div1");
var children = div.childNodes; //获取div元素子节点集合
alert(children instanceof NodeList); //true
var attrs = div.attributes; //获取div元素的特性
alert(children instanceof NamedNodeMap); //true
~~~