DOM（《JavaScript 高级程序设计》第 10 章笔记）

DOM

1、节点层次

文档元素是文档的最外层元素

1.1 Node 类型

每个节点都有一个 nodeType 属性，用于表明节点的类型。
为了确保跨浏览器兼容，最好还是将 nodeType 属性与数字值比较，

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

1.1.1 nodeName 和 nodeValue 属性

• 取决于节点的类型。使用前先检测一下节点类型。
• 对于元素节点，nodeName 中保存的是元素的标签名，nodeVaue 的值始终是 null

1.1.2 节点关系

• 每个节点都有一个 childNodes 属性，其中保存着 NodeList 对象。NodeList 是一种类数组的对象，有lenth 值，用于保存一组有序的节点，可以通过位置访问节点。
• 可以使用方括号或者使用 item () 方法
• 每个节点都有一个parentNode

1.1.3操作节点

• 最常用的是 appendChild() ,用于向 childNodes 列表的末尾添加一个节点，返回新增的节点。
• 使用 insertBefore() 方法放在 childNodes 列表中的某个特定位置。这个方法接受两个参数，要插入的节点和作为参照的节点。
  被插入的节点会变成参照节点的前一个同胞点，同时被方法返回。
• replaceChild () 方法接受两个参数：要插入的节点和要替换的节点。要替换的节点将由这个方法返回并从文档树中被移除，同时插入的节点要占据其位置。
• 移除节点 removeChild() 方法。
  ### 1.2 Document 类型
  
  1. nodeType 的值为 9；
  2. nodeName 的值为”#document”;
  3. nodeValue 的值为 null；
  4. parentNode 的值为 null；
  5. ownerDocument 的值为 null；

1.2.1 文档的子节点

• 两个内置的访问其子节点的快捷方式，第一个 documentElement 属性，该属性始终指向 HTML 页面中的元素，另一个就是通过 childNodes 列表访问文档元素。
• Document 另一个可能的子节点是 DocumentType.

1.2.2 文档信息(*)

1.2.3 查找元素

• getElementById() 接收一个参数，要取得的元素的 ID.找得到该元素则返回该元素，找不到则返回 null；
• getElementsByTagName().返回的是包含多个元素的NodeList。
• getElementByName

1.3Element 类型

1. nodeType 的值为 1；
2. nodeName 的值为元素的标签名;
3. nodeValue 的值为 null；
4. parentNode 可能是Document 或 Element ;
   
   • 可以使用 nodeName 属性，也可以使用 tagName 属性访问属性元素；

1.3.1HTML 元素

所有 HTML 元素都由 HTMLElement 类型表示，不是直接通过这个类型。

1.3.2取得特性

有两类特殊的属性，通过 getAttribute() 返回的值并不相同。第一类特性是 stytle ，第二类是 onclick 这样的事件处理程序。

1.3.3设置特性

setAttribute() 接受两个参数：要设置的特性名和值

1.3.4attributes 属性

遍历元素的特性。

function outputAttributes(element){
    var pairs=new Array(),
        attrName,
        attrValue,
        i,
        len;
    for(i=0,len=element.attribute.length;i<len;i++){
        attrName=element.attribute[i].nodeName;
        attrValue=element.attribute[i].nodeValue;
        pairs.push(attrName+"=\""+attrValue+"\"");
    }
    return pairs.join(" ")
}

1.3.5 创建元素

使用 document.createElement() 方法创建新元素，参数为创建的元素的标签名。document.createElement();在创建新元素的同时也为新元素设置了 document.createElement() 属性。

1.3.6 元素的子节点

1.4Text 类型

1. nodeType 的值为 3；
2. nodeName 的值为”#text”;
3. nodeValue 的值为节点所包含的文本；
4. parentNode 是一个 Element;

操作节点的方法

• appendData(text)方法将text添加到节点的末尾，该方法无返回值；
• deleteData(offset,count)方法从offset指定的位置开始删除count个字符，无返回值；
• insertData(offset,text)方法在offset指定的位置插入text，无返回值；
• replaceData(offset,count,text)方法用text替换从offset指定位置开始到offset+count为止的文本，无返回值；
• splitText()方法将一个文本节点分成两个文本节点，即按照指定的位置分割nodeValue值。原来的文本节点将包含从开始到指定位置之前的内容。这个方法会返回一个新文本节点，包含剩下的文本。splitText()方法返回的节点与原节点的parentNode相同 ；
• 除了这些方法之外，文本节点还有一个 length 属性，保存着节点中字符的数目。

1.4.1 创建文本节点

• 使用document.createTextNode()创建新文本节点，这个方法只接收一个参数————要插入节点中的文本。
• 在创建新文本节点的同时，也会为其设置 ownerDocument 属性。除非把新节点添加到文档树中已经存在的节点，否则不会再浏览器窗口中看到新节点。

1.5 Comment 类型

1. nodeType 的值为 8；
2. nodeName 的值为”#comment”;
3. nodeValue 的值是注释的内容；
4. parentNode 是一个 Element 或Document;
   通过 nodeValue 或 data 属性取得注释的内容

1.6 CDATASection 类型

1.7 DocumentType 类型

1.8 DocumentFragment 类型

1.9 Attr 类型

2、DOM 的操作技术

2.1 动态脚本

• 指的是在页面加载是不存在，但将来的某一刻通过修改 DOM 动态添加的脚本。
• 创建动态脚本也有两种方式：插入外部文件和直接插入JS代码。

1.插入外部文件

//动态创建<script type="text/javascript" src="test.js"></script>
var script = document.createElement("script");
script.type = "text/javascript";
script.src= "test.js";
//这句放哪都可以
document.body.appendChild(script);

在执行最后一行代码把

function loadScript(url){
   var script = document.createElement('script');
   script.type= "text/javascript";
   script.src = url;
   document.body.appendChild(script);
}

loadScript("test.js");

2、行内直接插入 JS 代码(IE8 以上浏览器可运行)

var script  = document.createElement('script');
script.type = 'text/javascript';
script.text = "function sayHi(){alert('hi')}";
document.body.appendChild(script);

兼容所有浏览器

function loadScriptString(code){
  var script = document.createElement('script');
  script.type = "text/javascript";
  try{
   //除过<=IE8和Safari3及之后版本
   script.appendChild(document.createTextNode(code));
  }catch(e){
    script.text = code;
  }
  document.body.appendChild(script);
}

2.2 动态样式

能够把CSS样式包含到HTML页面中的元素有和

function loadStyles(url){
  var link = document.createElement("link");
  link.rel = "stylesheet";
  link.type = "text/css";
  link.href = url;
  var head = document.getElementsByTagName('head')[0];
  head.appendChild(link);
}

2、使用

var style = document.createElement('style');
style.type = "text/css";
style.appendChild(document.createTextNode("body{background-color: red}"));
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);

兼容所有浏览器代码

function loadStyleString(css){
   var style = document.createElement('style');
   style.type = "text/css";
   try{
      style.appendChild(document.createTextNode(css));
   }catch(e){
      style.styleSheet.cssText = css;
   } 
   var head = document.getElementsByTagName("head")[0];   
   head.appendChild(style);
}

操作表格(*)