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操作。