JavaScript DOM 编程之基础篇

1.节点层次
①Node类型
a.每个节点都有nodeType属性，表示节点的类型。
元素节点(1)、属性节点(2)、文本节点(3)、CDATASection节点(4)、
注释节点(8)、文档节点(9)、DocumentType节点(10)、DocumentFragment节点(11)
b.nodeName和nodeValue属性，表示节点标签名和节点值
eg:
html部分：<div style="width:100px;height:100px;border:1px solid #ccc">yang</div>
js部分：
var div = document.querySelector("div");    // 获取div元素
alert(div.nodeType);        // 1, 节点类型为元素节点
alert(div.nodeName);        // DIV, 节点标签名为DIV
alert(div.nodeValue);       // null， 节点类型为null
c.节点关系
1)每个节点有childNodes属性，其中保存NodeList对象，对象有item()、length等属性方法
2)每个节点有父节点parentNode属性
3)每个节点有同胞节点previousSibing和nextSibing属性
4)每个节点有子节点lastChild和firstChild属性
5)每个节点有hasChildNodes()方法,表示如果有子节点返回true
6)每个节点有文档节点ownerDocument属性
d.操作节点
1)向childNodes节点列表末尾添加节点的appendChild(newNode)方法
2)向childNodes节点列表的任意位置添加节点的insertBefore(newNode, position)方法
3)替换childNodes节点列表的任意节点的replaceChild(newNode, replacedNode)方法
4)向childNodes节点列表移除节点的removeChild(node)方法
e.其他方法
1)复制节点的cloneNode(flag)方法，flag表示是否进行深复制(拷贝DOM树)
2)normalize()方法，使得节点标准化。比如删除空文本、合并两个相邻的文本节点
②Document类型 表文档类型
a.特征 nodeType(9)、nodeName(#document)、nodeValue(null)、parentNode(null)、ownerDocument(null)
b.文档的子节点
1) 子节点document.documentElement表示html元素
2) 子节点document.body表示body元素
c.文档信息
1) 子节点document.title表示文档标题
2) 子节点document.URL、document.domain、document.referrer与网友请求有关
d.查找元素
1) 通过id查找document.getElementById()
2) 通过标签名查找document.getElementsByTagName()
3) 通过name查找document.getElementsByName(),HTMLDocument类型专有
e.特殊集合
1) document.anchors,包含文档中所有带name特性的<a>元素
2) document.forms,包含文档中所有的<form>元素
3) document.images,包含文档中所有的<image>元素
4) document.links,包含文档中所有带href特性的<a>元素
f.DOM一致性检测      document.implementation.hasFeature() + 特殊的能力检测
g.文档写入  write()、writeln()、open()、close()
③Element类型  表元素类型
a.特征 nodeType(1)、nodeName(标签名)、nodeValue(null)、parentNode(Document/Element)
b.HTML元素    标准特性    id、title、lang、dir、className
c.属性特性  getAttribute()、setAttribute()、removeAttribute()
d.attributes属性，包含NameNodeMap，有getNamedItem()、setNamedItem()、item()、removeNamedItem()
eg: 遍历属性
html部分：<div name="yang" id="yang">yang</div>
js部分：
function outputAttributes(element){
var pairs = new Array(),
attrName, attrValue, i, len;
for (i=0, len=element.attributes.length; i < len; i++){
attrName = element.attributes[i].nodeName;
attrValue = element.attributes[i].nodeValue;
if (element.attributes[i].specified) {      // less ie7
pairs.push(attrName + "=\"" + attrValue + "\"");
}
}
return pairs.join(" ");
}
e.创建添加元素    document.body.appendChild(document.createElement(eleName));
f.元素的子节点    在不同浏览器中，子节点数量的计算不太一致，我们需要过滤
eg: 查找子节点数量
html部分：<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
js部分：for (var i=0, len=element.childNodes.length; i < len; i++){
if (element.childNodes[i].nodeType == 1){   // 忽略文本节点，只求元素节点
//执行某些操作
}
}
④Text类型 表文本类型
a.特征 nodeType(3)、nodeName(#text)、nodeValue(包含的文本)、parentNode(Element)
b.操作节点中的文本  appendData()、deleteData()、replaceData()、insertData()、splitText()、
substringData()
c.可以用data属性访问文本节点内容
d.创建文本节点    div.appendChild(document.createTextNode(文本));
e.规范化文本节点   ele.normalize()
f.分割文本节点        ele.splitText()
⑤Comment类型  表注释类型
a.特征 nodeType(8)、nodeName(#comment)、nodeValue(包含的注释)、parentNode(Element/Document)
b.可以用data属性访问注释节点内容
c.创建注释节点    document.createComment(注释内容);
⑥CDATASection类型
a.特征 nodeType(4)、nodeName(#cdata-section)、nodeValue(CDATA的内容)、parentNode(Element/Document)、没有子节点
⑦DocumentType类型 doctype声明       不是所有浏览器都支持
a.特征 nodeType(10)、nodeName(doctype 的名称)、nodeValue(null)、parentNode(Document)
⑧DocumentFragment类型 "轻量级"文档
a.特征 nodeType(11)、nodeName(#document-fragment)、nodeValue(null)、parentNode(null)
b.优点    作为一个仓库，避免了反复渲染
eg: 先将li添加到fragment中，然后再将fragment添加到ul中
var fragment = document.createDocumentFragment();
var ul = document.getElementById("myList");
var li = null;
for (var i=0; i < 3; i++){
li = document.createElement("li");
li.appendChild(document.createTextNode("Item " + (i+1)));
fragment.appendChild(li);
}
ul.appendChild(fragment);
⑨Attr类型 属性节点
a.特征 nodeType(2)、nodeName(属性键)、nodeValue(属性值)、parentNode(null)
b.属性 name、value、specified
2.DOM操作技术
①动态脚本
eg: 跨浏览器兼容动态脚本
function loadStringScript(code) {
var script = document.createElement("script");
script.type = "text/javascript";
try {
script.appendChild(document.createTextNode(code));
} catch (ex) {
script.text = code;     // less ei
}
document.body.appendChild(script);
}
loadStringScript("alert('aaa');");
②动态样式
a.引用外部文件
eg：动态添加link标签
function loadStyles(url) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}
loadStyles("css/example1.css");
b.行内样式
eg：动态添加style代码
function loadStyles(css) {
var style = document.createElement("style");
try {
style.appendChild(document.createTextNode(css));
} catch (ex) {
style.styleSheet.cssText = css;
}
document.getElementsByTagName("head")[0].appendChild(style);
}
loadStyles("body {background: green;}");
③操作表格   在DOM Table中有许多操作表格的API共我们使用
//创建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(1);
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);
④使用NodeList 与NamedNodeMap和HTMLCollection都属于动态的“数组”.每当文档结构发生变化时,他们始终保持最新、最准确的信息
eg: 下面代码会导致死循环
var divs = document.getElementsByTagName("div"),
i, div;
for (i=0; i < divs.length; i++){    // 因为divs.length永远是增加的
div = document.createElement("div");
document.body.appendChild(div);
}
eg: 把上述代码修改一番
var divs = document.getElementsByTagName("div"),
i, len, div;
for (i=0, len = divs.length; i < len; i++){ // 因为divs.length永远是增加的
div = document.createElement("div");
document.body.appendChild(div);
}