DOM（JavaScript高程笔记）

一、节点层次

1.Node类型

if (someNode.nodeType == 1){  // 适用于所有浏览器
    alert("Node is an element.");
}

Node.ELEMENT_NODE (1)；
Node.ATTRIBUTE_NODE (2)；
Node.TEXT_NODE (3)；

nodeName 和 nodeValue 属性

在使用这两个值以前，最好是像下面这样先检测一下节点的类型。

if (someNode.nodeType == 1){
    value = someNode.nodeName; // nodeName 的值是元素的标签名
    // 对于元素节点，nodeName 中保存的始终都是元素的标签名，而 nodeValue 的值则始终为 null 。
}

节点关系

每个节点都有一个 childNodes 属性，其中保存着一个 NodeList 对象。
NodeList 是一种类数组对象，它实际上是基于 DOM 结构动态执行查询的结果。

// 转为数组
function convertToArray(nodes){
    var array = null;
    try {
        array = Array.prototype.slice.call(nodes, 0); 
    } catch (ex) {
        //  IE8 及更早版本将 NodeList实现为一个 COM 对象
        array = new Array();
        for (var i=0, len=nodes.length; i < len; i++){
            array.push(nodes[i]);
        }
    }
    return array;
}
convertToArray(someNode.childNodes);

childNodes
parentNode
previousSibling
nextSibling
firstChild
lastChild
hasChildNode() // 在节点包含一或多个子节点的情况下返回 true
ownerDocument // 所有节点都有的属性，指向整个文档节点

操作节点

appendChild() // 如果节点已经是文档的一部分，则将该节点从原来的位置
转移到末尾
insertBefore() // 如果参照节点是
null ，则 insertBefore() 与 appendChild() 执行相同的操作
replaceChild()
removeChild()
cloneNode() // IE会复制JavaScript事件，最好先移除事件
normalize() // 处理文本节点，空则删，相邻则合并

3.Document类型

nodeType = 9
nodeName = '#document'
nodeValue = null
parentNode = null
ownerDocument = null

其子节点可能是一个 DocumentType （最多一个）、 Element （最多一个）、 ProcessingInstruction
或 Comment 。

文档的子节点

documentElement // 指向<html>
childNodes[0] // 指向<html>
body // 指向<body>
doctype // 指向<!DOCTYPE>，各浏览器支持不一致

文档信息

title // 中的文本</li> <li>URL</li> <li>referrer // 来源页面</li> <li>domain</li> </ul> 1 不能将这个属性设置为 URL 中不包含的域 <pre><code>// 假设页面来自 p2p.wrox.com 域 document.domain = "wrox.com"; // 成功 document.domain = "nczonline.net"; // 出错！ </code></pre> 2 如果域名一开始是“松散的” （loose），那么不能将它再设 置为“紧绷的” （tight）。 <pre><code>// 假设页面来自于 p2p.wrox.com 域 document.domain = "wrox.com"; //松散的（成功） document.domain = "p2p.wrox.com"; //紧绷的（出错！） </code></pre> 3 设置为相同的值可用于 frame 跨域 查找元素 <ul> <li>getElementById()</li> <li>getElementsByTagName() // 返回 HTMLCollection 对象</li> <li>getElementsByName() // 返回 HTMLCollection 对象</li> </ul> 特殊集合 // 返回值与 HTMLCollection 对象类似 <ul> <li>anchors // 所有带 name 属性的<a/></li> <li>links // 所有带 href 属性的<a/></li> <li>forms // 所有<form/></li> <li>images // 所有<img/></li> </ul> HTMLCollection对象 <ul> <li>namedItem() // 通过元素的 name 属性取得集合中的项（只会取得第一项）</li> <li>我们可以向方括号中传入数值或字符串形式的索引值。在后台，对数 值索引就会调用 item() ，而对字符串索引就会调用 namedItem() 。</li> </ul> DOM一致性检测 <pre><code>document.implementation.hasFeature('name', 'verson'); </code></pre> 文档写入 <pre><code>// 直接写入文档末尾 document.write("" + (new Date()).toString() + ""); // 如果在文档加载结束后再调用 document.write() ，那么输出的内容将会重写整个页面 window.onload = function(){ document.write("Hello world!"); }; </code></pre> <ul> <li>write() // 原样写入</li> <li>writeIn() // 末尾添加换行符( )</li> <li>open()</li> <li>close() // 打开、关闭输出流，如页面加载期间用 write 和 writeIn 则无需打开关闭</li> </ul> <h3 id="3element类型">3.Element类型</h3> <ul> <li>nodeType = 1</li> <li>nodeName = tagName = 标签名</li> <li>nodeValue = null</li> </ul> 取得属性 <ul> <li>getAttribute() // 可取得 data- 自定义属性。</li> <li>可以通过 DOM 对象的属性来取得非自定义属性。</li> <li>IE 可以通过 DOM 对象属性取得自定义属性。</li> </ul> 1 style <ul> <li>getAttribute() 访问返回CSS文本</li> <li>DOM 对象属性访问返回对象</li> </ul> 2 事件(onclick) <ul> <li>getAttribute() 访问返回字符串</li> <li>DOM 对象属性访问返回函数</li> </ul> 设置属性 <ul> <li>setAttribute() // 可设置 data- 自定义属性</li> <li>可以通过 DOM 对象的属性来设置非自定义属性。</li> <li>IE 可以通过 DOM 对象属性设置自定义属性。</li> </ul> 删除属性 <ul> <li>removeAttribute() // 彻底删除，包括属性和值</li> </ul> attributes属性 attributes 属性中每一个元素属性都由一个 Attr 节点表示，保存在一个 NamedNodeMap 对象中，NamedNodeMap 与 NodeList 类似。 节点属性 <ul> <li>nodeName</li> <li>nodeValue</li> </ul> 遍历元素属性 <pre><code>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.attribute[i].specified) { pairs.push(attrName + "="" + attrValue + """); } } return pairs.join(" "); } </code></pre> 创建元素 <pre><code>var div = document.createElement("div"); // 在 IE 中可用以下方式 var div = document.createElement("<div id="myNewDiv" class="box"></div >");</code></pre>