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 类型

nodeType 的值为 1；
nodeName 的值为元素的标签名;
nodeValue 的值为 null；
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 类型

nodeType 的值为 3；
nodeName 的值为”#text”;
nodeValue 的值为节点所包含的文本；
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 类型

nodeType 的值为 8；
nodeName 的值为”#comment”;
nodeValue 的值是注释的内容；
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);

兼容所有浏览器

扫描二维码关注公众号，回复： 1017294 查看本文章

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);
}

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

DOM