《JavaScript高级程序设计》读书笔记10.1节点层次

DOM将任何HTML或XML文档描绘成一个由多层节点构成的树形结构。

<html>
    <head>
        <title>Sample Page</title>
    </head>
    <body>
        <p>Helllo World!</p>
    </body>
</html>

文档节点是每个文档的根节点。
文档节点只有一个子节点，即<html>元素，文档元素。
文档元素是文档的最外层元素，文档中的其他所有元素都包含在文档元素中。
节点分类：
1. 元素节点——表示HTML元素
2. 特性节点——表示特性
3. 文档类型节点–表示文档类型
4. 注释节点——表示注释

1.Node类型

DOM1定义了一个Node接口，该接口将由DOM中的所有节点类型实现。
Node接口，在JavaScript中是作为Node类型实现的，且所有节点类型都继承自Node类型。
每个节点都有一个nodeType属性，用于表明节点的类型。总计12种。常用四种节点：
- 1——元素节点
- 2——特性（属性）节点
- 3——文本节点
- 8——注释节点

1.1 nodeName属性和nodeValue属性

对于元素节点，nodeName是元素标签名，nodeValue始终是null。

1.2节点关系

每个节点都有一个childNode属性，动态的，其中保存着一个NodeList对象。NodeList对象是一种类数组对象（不是Array的实例），用于保存一组有序的节点，可以通过位置来访问这些节点。
1
2
3
var firstChild=someNode.childNodes[0];
var secondChild=someNode.childNodes.item(1);
var count=someNode.childNodes.length;
parentNode、firstChild、lastChild、previousSibling、nextSibling之间的关系如图
hasChildNodes(),在节点包含一或多子节点情况下返回true。
ownerDocument属性，指向文档节点。

1.3操作节点

appendChild()，向childNodes列表的末尾添加一个节点，随之节点关系也会很新。同时返回新增的节点。如果是已存在的节点，会从原位置转移。
insertBefore(),接受两个参数：要插入的节点和作为参照的节点。如果参照节点是null,insertBefore()和appendChild()执行相同操作。
replaceChild()，接受两个参数：要插入的节点和要替换的节点。被替换的节点仍为文档节点所有，但已经没有了自己的位置。
removeChild()，接受一个参数：要移除的节点。被移除的节点仍为文档节点所有，但已经没有了自己的位置。

1.4其他方法

cloneNode(),接受一个参数：true或false。为文档所有，但没有自己位置，如同孤儿。
- true，执行深复制，复制节点及其整个子节点树；
- false，执行浅复制，只复制节点本身。

2.Document类型

JavaScript通过Document类型表示文档；浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面，且也是window对象的一个属性，因此可以将其作为全局对象来访问。有如下特征：
- nodeType的值是9
- nodeName的值为“#document”
- nodeValue的值为null
- parentNode的值为null
- ownerDocument的值为null
- 其子节点可能是一个DocumentType、Element、ProcessingInstruction或comment

2.1 文档的子节点

documentElement，始终指向页面中的<html>元素
document.body，指向<body>元素

2.2 文档信息

document.title,取得当前页面的标题，也可以修改标题
3个与网页请求有关的属性：
- URL，包含页面完整的URL
- domain,只包含页面的域名
- referrer,保存着链接到当前页面的那个页面的URL

2.3 查找元素

document.getElementById()
document.getElementsByTagName()
document.getElementsByName()

2.4 特殊集合

document.anchors,包含文档中所有带name特性的<a>元素
document.forms,包含文档中所有<form>元素
document.img,包含文档中所有<img>元素
document.links,包含文档中所有带href特性的<a>元素

2.5 DOM一致性检测

document.implementation.hasFeature()

2.6 文档写入

document.write()、document.writeln()

3.Element类型

Element类型用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问。以下特征：
- nodeType的值为1；
- nodName的值为元素的标签名
- nodeValue的值为null
- parentNode的值是Document或Element
- 其子节点可能是Element、Text、Comment···

3.1 HTML元素

所有HTML元素都由HTMLElement类型或其子类型表示，基本标准特性:
- id，元素在文档中的唯一标识符
- title，有关元素的附加说明信息，一般通过工具提示条显示。
- lang，元素内容的语言代码，几乎不用
- dir，语言方向，几乎不用
- className，类名。

<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>

var div=document.getElementById("myDiv");
alert(div.id);          //"myDiv"
alert(div.className);   //"bd"
alert(div.title);       //"Body text"
alert(div.lang);        //"en"
alert(div.dir);         //"ltr"

3.2 取得特性

每个元素都有一个或多个特性，这些特性的用途的给出相应元素或其内容的附加信息。
即可通过DOM对象属性，也可通过DOM方法：getAttribute()。

3.3 设置特性

即可通过DOM对象属性，也可通过DOM方法：setAttribute()。

3.4 attributes属性（了解）

3.5 创建元素

document.createElement()

3.6 元素的子节点

记得检查nodeType属性

4 Text类型

文本节点由Text类型表示。基本特征：

nodeType的值为3
nodeName的值为”#text”
nodeValue的值为节点所包含的文本
parentNode是一个Element
没有子节点

默认情况下，每个可以包含内容的元素最多只能有一个文本节点，而且必须确实有内容存在。

先取得文本节点，再用nodeValue取得文本值

4.1 创建文本节点

document.createTextNode()

4.2 规范文本节点

父元素上调用normalize(),其实就是将所有文本节点合并成一个节点

4.3 分割文本节点

spiltText()

var element=document.createElement("div");
element.className="message";

var textNode=docuemnt.createTextNode("Hello World!");
element.appendChild(textNode);

document.body.appendChild(element);

var newNode=element.firstChild.spiltText(5);
alert(element.firstChild.nodeValue); //"Hello"
alert(newNode.nodeValue);            //" World"
alert(element.childNodes.length);    //2

5 Comment类型

注释在DOM中是通过Comment类型来表示的，一下特征：

nodeType的值为8
nodeName的值为”#comment”
nodeValue的值是注释内容
parentNode可能是Document或Element
没有子节点

6 Attr类型

元素的特性在DOM中以Attr类型来表示。
技术角度来说，特性是存在于元素的attribute属性中的节点。