红皮书（9）：DOM

Node类型

nodeType
以下是一些重要的nodeType的取值：
1：元素element
2：属性attr
3：文本text
8：注释comments
9：文档document

nodeName,nodeValue

节点关系

childNodes: 每个节点都有一个childNodes属性，其中保存着一个NodeList对象

firstChild: 等同于childNodes[0]

lastChild: 等同于childNodes.length-1

同时通过使用列表中每个节点的previousSibling和nextSibling属性，可以访问同一列表中的其他节点。

操作节点

appendChild()
appendChild()方法用于向childNodes列表的末尾添加一个节点。添加节点后，childNodes的新增节点、父节点及以前的最后一个子节点的关系指针都会相应地得到更新。

insertBefore()
insertBefore()这个方法接受两个参数：要插入的节点和作为参照的节点。

// 插入后成为最后一个子节点
returnedNode = someNode.insertBefore(newNode,null);

// 插入后成为第一个节点
returnedNode = someNode.insertBefore(newNode,someNode.firstChild);

// 插入到最后一个子节点前面
returnedNode = someNode.insertBefore(newNode,someNode.lastChild);

repaceChild()
repaceChild()接受两个参数，要插入的节点和要替换的节点

var returnedNode = someNode.replaceChild(newNode,someNode.firstChild);

removeChild()
只移除而非替换节点。

var formerFirstChild = someNode.removeChild(someNode.firstChild);

cloneNode()

item 1
item 2
item 3

var deepList = myList.cloneNode(true);
console.log(deepList.length); // 3

var shallowList = myList.cloneNode(false);
console.log(shallowList.childNodes.length); //0

Document类型

Document节点具有下列特征：
nodeType的值为9；
nodeName的值为#document;
nodeValue的值为null;
parentNode的值为null;
ownerDocument的值为null;

文档的子节点

var html = document.documentElement; // 取得对<html>的引用
console.log(html === document.childNodes[0]); // true
console.log(html === document.firstChild); // true

文档信息

// 取得文档的标题
var originalTitle = document.title; 


// 设置文档标题
document.title = "New page title";


// 取得完整的url
var url = document.URL;
// 取得域名
var domain = document.domain;
// 取得来源页面的url
var referrer = document.referrer;




//假设页面来自p2p.wrox.com域
document.domain = "wrox.com"; // 成功
document.domain = "nczonline.net"; // 失败

在IE7中调用document.getElementById("myElement");结果会返回<input>元素，如下所示；
最好的办法是不让表单字段的name特性与其他元素的ID相同。

<input type="text" name="myElement" value="text field">
<div id="myElement">a div</div>

特殊集合

document.anchors,包含文档中所有带name特性的a元素;
document.forms, 包含文档中所有form元素，与document.getElementsByTagName("form")得到的结果相同;
document.images,包含文档中所有的img元素，与document.getElementsByTagName("img")得到的结果相同;
document.links，包含文档中所有带href特性的a元素;

文档写入

<html>
<head>
      <title>document.write() Example 3</title>
</head>
<body>
     <script type="text/javascript">
          document.write("<script type=\"text/javascript\" src=\"file.js\">") + "<\/script>");
     </script>
</body>
</html>

字符串<\/script>不会被当作外部script标签的关闭标签，因而页面中也就不会出现多余的内容了。

Element类型

Element节点具有以下特征：
nodeType的值为1;
nodeName的值为元素的标签名;
nodeValue的值为null;
parentNode可能是Document或Element;

要访问元素的标签名，可以使用nodeName属性，也可以使用tagName属性；

<div id="myDiv"></div>
var div = document.getElementById("myDiv");
console.log(div.tagName); // DIV
console.log(div.nodeName); // DIV


if (element.tagName=="div") { // 不能这样比较，很容易出错
}

if (element.tagName.toLowerCase =="div") { // 这样最好（适用于任何文档）
}

取得特性

操作特性的DOM方法主要有三个，分别是getAttribute()、setAttribute()、removeAttribute()；
注意，传递给getAttribute()的特性名与实际的特性名相同。印象要想得到class的特性值，应该传入"class"而不是"className"。

var div = document.getElementById("myDiv");
console.log(div.getAttribute("class")); // bd

创建元素

使用document.createElement()方法可以创建新元素。

元素的子节点

在执行某项操作以前，通常都要先检查一下nodeType属性，如下面的例子所示:

for (var i=0; len = element.childNodes.length; i<len; i++){
    if (element.childNodes[i].nodeType ==1) {
        // 执行某些操作
    }
}

Text类型

Text节点具有以下特征：
nodeType的值为3；
nodeName的值为"#text";
nodeValue的值为节点所包含的文本；
parentNode是一个Element；

创建文本节点

可以使用document.createTextNode()创建新文本节点。

规范化文本节点

normalize()

分割文本节点

splitText()

Comment类型

comment节点具有下列特征：
nodeType的值为8;
nodeName的值为"#comment";
nodeValue的值是注释的内容；
parentNode可能是Document或Element；
不支持（没有）子几点；

DOM操作技术

操作表格

    // 创建 table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";

// 创建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);

// 创建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("cell 1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("cell 2,1"));


// 创建第二行
tbody.insertRow(01);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("cell 1,2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("cell 2,2"));

document.body.appendChild(table);

红皮书（9）：DOM

Node类型

节点关系

操作节点

Document类型

文档的子节点

文档信息

特殊集合

文档写入

Element类型

取得特性

创建元素

元素的子节点

Text类型

创建文本节点

规范化文本节点

分割文本节点

Comment类型

DOM操作技术

操作表格

小渝人儿

引用和评论

更简单的理解Pod和容器

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具