js操作Dom

Dom是组成html和xml文档的最小单位。Dom分为12中节点类型。

这12中节点类型都继承自Node类型，因此所有基本类型都共享相同的基本属性和方法。（DOM定义了一个Node接口，这个接口在javascript中是作为Node类型实现的，而在IE8-浏览器中的所有DOM对象都是以COM对象的形式实现的。所以，IE8-浏览器并不支持Node对象的写法，但是ie浏览器中识别1-12的数字）

（1）元素节点                           Node.ELEMENT_NODE(1)
（2）属性节点                           Node.ATTRIBUTE_NODE(2)
（3）文本节点            　　 Node.TEXT_NODE(3)
（4）CDATA节点             Node.CDATA_SECTION_NODE(4)
（5）实体引用名称节点    　　 Node.ENTRY_REFERENCE_NODE(5)
（6）实体名称节点        　　 Node.ENTITY_NODE(6)
（7）处理指令节点        　　 Node.PROCESSING_INSTRUCTION_NODE(7)
（8）注释节点            　 Node.COMMENT_NODE(8)
（9）文档节点            　 Node.DOCUMENT_NODE(9)
（10）文档类型节点        　　 Node.DOCUMENT_TYPE_NODE(10)
（11）文档片段节点        　　 Node.DOCUMENT_FRAGMENT_NODE(11)
（12）DTD声明节点           Node.NOTATION_NODE(12)

节点之间是有关系的：

   window.onload = function () {
        var myspan = document.getElementsByClassName("m-b-md m-b-lg")[0].getElementsByTagName("span")[0];
        console.log("span的后一个元素：" + myspan.nextSibling.nodeName);
        console.log("span的前一个元素：" + myspan.previousSibling);
        console.log("span的父元素：" + myspan.parentNode.nodeName);
        var aa = document.getElementsByClassName("m-b-md m-b-lg")[0];
        console.log("父节点的子节点数目：" + aa.childNodes.length);
        console.log("父节点的第一个子节点：" + aa.childNodes[0]);
        console.log("父节点的最后一个子节点：" + aa.lastChild);
        console.log("父节点的第一个子节点：" + aa.firstChild);
    }

操纵节点：

共享的属性包括：

nodeType：返回类型是以下的12中类型对应的数字

nodeName : 返回节点的名称

nodeValue : 返回或设置节点的值，格式为string

childNodes : 是一个nodelist对象，其独特之处在于它实际是基于Dom结构动态执行查询的结果。一种类数组对象，可以通过“【】”或者item（）来访问其内包含的某一个对象。nodelist有一个length属性，他获取的是访问那一刻的长度。也可以将nodelist转换成数组。此方法在ie8以前版本中无效:

var arrayNodes = Array.protype.slice.call( ***.childNodes , 0 )

（1）元素节点    Node.ELEMENT_NODE(1)

元素节点element对应网页的HTML标签元素。元素节点的节点类型nodeType值是1，节点名称nodeName值是大写的标签名，nodeValue值是null。

例如：button，div，p等所有的html标签都属于元素节点。

（2）属性节点   Node.ATTRIBUTE_NODE(2)

元素属性节点attribute对应网页中HTML标签的属性，它只存在于元素的attributes属性中，并不是DOM文档树的一部分。特性节点的节点类型nodeType值是2，节点名称nodeName值是属性名，nodeValue值是属性值。

（3）文本节点            　　 Node.TEXT_NODE(3)
（4）CDATA节点             Node.CDATA_SECTION_NODE(4)
（5）实体引用名称节点    　　 Node.ENTRY_REFERENCE_NODE(5)
（6）实体名称节点        　　 Node.ENTITY_NODE(6)
（7）处理指令节点        　　 Node.PROCESSING_INSTRUCTION_NODE(7)
（8）注释节点            　 Node.COMMENT_NODE(8)
（9）文档节点            　 Node.DOCUMENT_NODE(9)
（10）文档类型节点        　　 Node.DOCUMENT_TYPE_NODE(10)
（11）文档片段节点        　　 Node.DOCUMENT_FRAGMENT_NODE(11)
（12）DTD声明节点           Node.NOTATION_NODE(12)