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