js--DOM

1.DOM的作用

DOM是针对HTML和XML文档的API，允许开发人员添加，移除和修改页面的某一部分。DOM为web文档创建带有层级的结果，这些层级是通过node节点组成

2.Node接口–12种节点

DOM1级定义了一个 Node接口 ，该接口将DOM中的所有节点类型实现，总共有12种节点。

常用的有元素节点，属性节点，文本节点，注释节点，文档节点

ELEMENT_NODE(1),ATTRIBUTE_NODE(2),TEXT_NODE(3),COMMENT_NODE(8),DOCUMENT_NODE(9)

判断节点类型

// 在ie种无效，因为ie没有公开NODE的构造函数
if(someNode.nodeType == NODE.ELEMENT_NODE) {

}

//一般通用，在ie中也有效
if(someNode.nodeType == 1) {

}

3.node类型的属性和方法

someNode.nodeType
someNode.nodeName
someNode.nodeValue
someNode.childNodes----保存着NodeList对象，可以用someNode.childNodes[0]或者someNode.childNodes.item(0)两种方式访问(可用以下方法来转换成数组)
someNode.firstChild
someNode.lastChild
someNode.parentNode
someNode.nextSibling
someNode.previousSibling

4.node类型–Document类型

Document类型表示文档。document对象是Document的一个实例，表示整个HTML页面。document对象是window对象的一个属性，可以作为全局对象来访问。

document对象的属性和方法

document.nodeType--9
document.nodeName--"#document"
document.nodeValue--null
document.parentNode--null

<!-- 所有浏览器访问html和body通用的方法是document.documentElement和document.body -->
html == document.documentElement---一般不用document.childNodes[0]或者document.firstChild因为前边可能有注释节点
body == document.body

<!-- 文档信息 -->
document.title

<!-- 和网页请求相关的属性 -->
document.URL--页面完整的URL
document.domain--页面的域名
document.referrer--保存着链接到当前页面的那个页面的URL

<!-- 查找元素 -->
document.getElementById("someId");
var images = document.getElementsByTagName("img");
images[0]---其实就是在后台调用images.item(0)
images["myImage"]--其实就是在后台调用images.namedItem("myImage");

5.node类型–Element类型

element对象的属性和方法，注意attributes这个属性

element.nodeType--1
element.nodeName--元素的标签名
element.nodeValue--null
element.parentNode--Document或Element
<!-- 访问设置元素的属性 -->
element.getAttribute();
element.setAttribute();
element.removeAttribute();
element.attributes--也是一个类似nodeList

遍历元素的所有属性element.attributes

function outputAttributes(element) {
    var pairs = new Array(),
        attrName,
        attrValue,
        len,
        i;

    for(i = 0,len = element.attributes.length;i < len;i++) {
        attrName = element.attributes[i].nodeName;
        attrValue = element.attributes[i].nodeValue;
        <!-- 加上此判断语句是为了防止IE7以更早的版本中会返回所有可能的属性，而不是只返回被指定的特性 -->
        if(element.attributes[i].specified) {
            pairs.push(attrName + "=\"" + attrValue + "\"");
        }
    }
    return pairs.join(" ");
}

元素的子节点(li标签之间有空白是如何形成的)

<!-- IE解析成3个子节点，但是其他浏览器解析成7个节点(3个li元素节点和4个空白文本节点) -->
<ul id="myList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

所以要想遍历li标签的方法如下两种：

1.childNodes节点遍历

var ulList = document.getElementById("myList");

for(var i = 0 ,len = ulList.childNodes.length;i < len;i++) {
    <!-- 确保是li子节点 -->
    if(ulList.childNodes[i].nodeType == 1) {
        // do something
    }
}

2.直接使用getElementsByTagName

var ulList = document.getElementById("myList");
var items = ulList.getElementsByTagName("li");

3.使用专门的元素遍历方法(dom扩展中)，这样就不用担心空白的文本节点了

DOM扩展的元素遍历的属性：

childElementCount

firstElementChild

lastElementChild

previousElementSibling

nextElementSibling

var ulList = document.getElementById("myList"),
    child = ulList.firstElementChild;

for(var i = 0 ,len = ulList.childElementCount;i < len;i++) {
    if(child != ulList.firstElementChild) {
        child = child.nextElementSibling;
    }
}

6.node类型–Attr类型–不常用

attr对象的属性和方法–虽然也是节点，但不被人为是DOM文档树的一部分

attrNode.nodeType--2
attrNode.nodeName--特性的名称
attrNode.nodeValue--特性的值
attrNode.parentNode--null

一般我们都用元素的getAttribute(),setAttribute(),removeAttribute()，很少直接引用特性节点
Attr对象3个属性name特性名称，value特性的值，specified代码中是否注定此特性，是布尔值

访问特性的三个方法

var attr = document.createAttribute("align");
attr.value = "left";
element.setAttributeNode(attr);--为元素添加特性
<!-- 访问特性的三种方法
1.getAttribute()只返回特性的值
2.getAttributeNode()返回特性节点
3.attributes也是返回特性节点
 -->
element.attributes["align"].value;--left
element.getAttribute("align");--left
element.getAttributeNode("align").value;--left

7.node类型–Text类型

text对象的属性和方法

textNode.nodeType--3
textNode.nodeName--"#text"
textNode.nodeValue--节点所包含的文本
textNode.parentNode--是一个element

<!-- 无文本节点 -->
<div></div>
<!-- 有空格，有一个文本节点 -->
<div> </div>
<!-- 有内容，有一个文本节点 -->
<div>hello world！</div>

<!-- 规范化文本节点normalize()和分割文本节点splitText() -->
在一个包含两个或者多个文本节点的父元素调用normalize方法

创建文本节点document.createTextNode()

var element = document.createElement("div");
element.className = "message";

var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);

document.body.appendChild(element);

8.node类型–Comment类型
comment对象的属性和方法

commentNode.nodeType--8
commentNode.nodeName--"#comment"
commentNode.nodeValue--注释的内容
commentNode.parentNode--可能是Document或Element

9.node类型–DocumentFragment类型
DocumentFragment对象的属性和方法

documentFragmentNode.nodeType--11
documentFragmentNode.nodeName--"#document-fragment"
documentFragmentNode.nodeValue--null
documentFragmentNode.parentNode--null

documentFragment是一种轻量级的文档，是文档片段，文档片段不能直接添加到文档中，但是可以作为一个仓库来使用，可以在里面保存将来可能会添加到文档中的节点。

var fragment = document.createDocumentFragment();
var ul = document.getElementById("myList");
var li = null;

for(var i = 0;i < 3;i++) {
    li = document.createElement("li");
    li.appendChild(document.createTextNode("Item" + (i+1)));
    fragment.appendChild(li);
}

ul.appendChild(fragment);