javascript高级程序设计读书笔记--DOM总结

1. node类型 nodeType

———-常用noode类型——

Node.ELEMENT_NODE(1) 元素节点

Node.ATTRIBUTE_NODE(2) 属性节点

Node.TEXT_NODE(3) 文本节点

确定节点类型

if(somenode.nodeType == Node.ELEMENT_NODE){
// 在ie下无效
console.log("this is a element node");
}

所以为了保证浏览器兼容，最好与数字值比较

if(somenode.nodeType == 1){
// 兼容所有浏览器
console.log("this is a element node");
}

2. 节点名和节点值 nodeName、nodeValue

这两个属性值完全取决于节点类型。假设是元素节点。则nodeName为标签名，而nodeValue为null。对于文本节点，nodeValue值即为文本内容。

3. nodeList

通过childNodes属性获取节点的所有子节点。

其中childNodes保存着nodeList对象。

nodeList是一种类数组对象，虽然有length属性，也可以使用访问数组的方法访问nodeList。但它并不是Array的实例。

// 怎么访问nodeList中的元素
var firstChild = node.childNodes[0];
var firstChild = node.childNodes.item(0);

4. 节点关系



5. 节点操作

创建节点

document.createElement(“p”) 创建元素节点

document.createTextNode(“这是文本”) 创建文本节点

插入节点

someNode.appendChild(newNode) 插入新节点到某以节点末尾。返回新节点

someNode.insertBefore(newNode, oneNode) 插入新节点到某节点的oneNode子节点之前。返回新节点

替换节点

someNode.replaceChild(newNode, oneNode) 使用新节点替换某一个子节点。返回值为被替换的节点。尽管被替换的节点还在文档中，但文档里面已经没有它的位置。

删除节点

someNode.removeChild(oneNode) 删除某一节点。返回被删除的节点。尽管被替换的节点还在文档中，但文档中已经没有它的位置。

克隆节点

someNode.cloneNode() 克隆节点。返回值为节点副本。

参数为true的时候，执行深复制。将会复制该节点，及其整个子节点树。

参数为false的时候，执行浅复制。即只复制节点本身。不传参的时候默认执行深复制。

返回的节点没有父节点，即是一个孤儿节点。除非执行插入/替换操作，将其插入到文档中。

! 注意：本方法值复制特性，不会复制js属性，即事件处理程序。但是IE会父子事件处理程序。为了安全起见，最好在复制之前首先移除事件处理函数。

处理文档树的文本节点

主要处理两种情况（由于解析器的实现或DOM操作等原因出现）

- 文本节点不包含文本

- 连续出现两个文本节点

someNode.normalize() 对该节点后代节点的文本节点进行处理以上两种情况。

// 根据已有insertBefore，实现insertAfter方法
function insertAfter(parentNode, newNode, oneChildNode) {
// 当然需要对oneChildNode进行判断一下，
if(parentNode.lastChild == oneChildNode){
// 如果是最后一个节点，
parentNode.appendChild(newNode);
}
// 也可以对oneChildNode是否是parentNode的子节点进行判断一下
// 实现将newNode插入到parentNode的一个子节点oneChildNode之后
parentNode.insertBefore(newNode, oneChildNode.nextSlibling);

}

6. 元素查找

getElementById() 通过id获取节点

getElementsByTagName() 通过标签名获取节点。HTMLDocument对象特有，返回的是一个HTMLCollection.

HTMLCollection类似于nodeList。访问方法有3种：

1. 通过nodes.item(0) 访问

2. 通过nodes[0]访问

3. 通过nodes.namedItem(“images1”) 通过元素的name属性访问。可以得到name为images1的节点。

getElementsByName() 通过name获取节点。HTMLDocument对象特有。

document.anchors 获取所有带有name特性的<a>元素。HTMLDocument对象特有。

document.links 获取所有带有 href 特性的<a>元素。HTMLDocument对象特有。

document.images 获取所有img元素。HTMLDocument对象特有。

document.forms 获取所有表单元素。 HTMLDocument对象特有。

7. 文档写入

document.write()

document.writeln()

用于向文档内动态加入内容。两者区别： writeln()会在输出内容结束后加一个换行符\n

注意： 在页面加载期间，以上两种方法会顺序执行，输出内容到页面。但是如果在页面加载完成后，调用该方法的时候，会重写整个页面。

node.innerHTML = “”

通过属性赋值，可以针对某一具体元素进行内容更新。不会重写页面。

8. 取得特性

- getAttribute() 可以获取元素的任何特性，包括自定义特性

- 直接通过属性访问。 eg: console.log( div.className );

区别：

1. 前者可以取得自定义特性的值，后者无法取得（ie除外）;

2. 对于内联样式 style特性。前者返回的是css文本，后者返回的是对象；

3. 对于事件处理程序特性，例如onclick。前者返回的是相应代码的字符串，后者返回的是函数。

综上，我们一般使用属性访问，只有在访问自定义属性的时候才使用getAttribute();

9. 设置特性

setAttribute（） 两个参数，特性和特性值。

通过属性访问设置。 div.align = “left”;

区别

前者可以设置自定义属性，后者不可以（ie除外）；

前者在ie7及以前版本存在问题。并且通过getAttribute设置style及事件处理程序无效。

推荐使用属性设置特性。

removeAttribute() 彻底删除元素某一特性，不仅是清除值，也是删除该特性。

不常用，在序列化DOM元素时候会用到。

10. 动态脚本

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "some.js";
document.body.appendChild(script);
// 动态插入脚本。

11. 动态样式

var style = document.createElement("style");
style.type = "text/css";
style.href = "style.css";
style.rel = "stylesheet";
var head = document.getElementsByTagName("head");
head.appendChild(style);
// 动态插入css样式。

// 动态写入内嵌样式
var style = document.createElement("style");
style.type = "text/css";
try {
style.appendChild(document.createTextNode("body{background-color: red}"));
// 在ie中，style标签被认为是和script标签类似的特殊标签，不可以对其子元素操作。会报错
} catch(ex) {
// 需要注意： ie中对stylesheet.cssText重复设置或设置值为""的时候，ie可能会崩溃，
style.stylesheet.cssText = "body{background-color: red}";
}

var head = document.getElementsByTagName("head");
head.appendChild(style);

12. 表格中比较重要的几个属性/方法

属性/方法	作用
rows	所有行的HTMLCollection
cells	所有列的HTMLCollection
deleteRow(pos)	删除第pos行
insertRow(pos)	在第pos行插入一行
deleteCell(pos)	删除第pos列
insertCell(pos)	在第pos列插入一列

最后： DOM往往是js程序中性能开销比较大的部分。尽量减少DOM操作。