Dom 文档对象模型

　　分类：

　　1.HTMLDom针对HTML文档的标准模式

　　2.XMLDOM针对XML文档的标准模型

一.节点--文档中的每一部分都是节点包括document元素  属性  文本  注释 等等

　　核心Dom针对任何结构化文档的标准模型

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

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

　　3.文本节点 　　Node.TEXT_NODE(3)

　　4.CDATA节点 Node.CDATASECTIONNODE(4)

实体引用名称节点 　　Node.ENTRYREFERENCENODE(5)　　

　　6.实体名称节点 　　Node.ENTITY_NODE(6)

　　7.处理指令节点 　　Node.PROCESSINGINSTRUCTIONNODE(7)

　　8.注释节点 　 Node.COMMENT_NODE(8)

　　9.文档节点 　 Node.DOCUMENT_NODE(9)

　　10.文档类型节点 　　Node.DOCUMENTTYPENODE(10)

　　11.文档片段节点 　　Node.DOCUMENTFRAGMENTNODE(11)

　　12.DTD声明节点 Node.NOTATION_NODE(12)

HTMLDOM节点

　　1.document HTMLdocument文档

　　2.element 元素

　　3.attr 属性

　　4.CharacterData-text文本　　--comment注释

二.节点属性

　　1.nodeName 节点名字

　　2.nodeValue 节点值

　　3.nodeType节点类型

三.获取文档元素的方法

　　1.通过ID选取元素 document.getElementById();

　　　　id属性可自动生成被脚本访问的全局变量 不推荐使用 --可读性 保留字

　　2.通过名字选取元素 document.getElementsByName 

　　　　IE9以上和标准浏览器认为所有元素都有name
　　　　IE9 以下认为只有个别元素有name 表单 img form
　　　　document.elementname -->(form img iframe); --兼容

　　3.通过标签名选择器 

　　　　document.getElementsByTagName();
　　　　element.getElementsByTagName();

　　4.通过css类选择器元素

　　　　document.getElementsByClassName() --IE9以下不兼容

　　5.通过css选择器选择元素
　　　　document.querySelector() 获取元素
　　　　element.querySelector() 
　　　　document.querySelectorAll() 获取集合
　　　　element.querySelectorAll()

　　6.document.all 获取所有元素的集合

四.文档结构

　　1.节点树

　　　　childNodes  所有的子节点

　　　　firstChild　　第一个子节点

　　　　lastChild　　最后一个子节点

　　　　previousSibling   上一个兄弟节点

　　　　nextSibling　　　下一个兄弟节点

　　　　parentNode　　　父节点

　　2.元素树

　　　　children  所有的子节点

　　　　firstElementChild　　第一个子元素

　　　　lastElementChild　　最后一个子元素

　　　　previousElementSibling   上一个兄弟元素

　　　　nextElementSibling　　　下一个兄弟元素

　　　　parentElement　　　父元素

　　　　childElementCount  子元素数量

　　　　ownDocument　　　返回元素所属的文档对象

五.属性

　　1.标准属性

　　　　DOM元素映射HTML的属性（属性伴随元素存在）

　　2.非标准属性　　

　　　　getAttribute(attr) --获取自定义或内置属性的值(属性需要存在) 　　　　　　　

　　　　setAttribute(attr,value) --设置自定义或内置属性

　　　　hasAttribute() --判断属性是否存在(自定义或内置)

　　　　removeAttribute() --删除自定义或内置属性

　　3.属性节点

　　 　　getAttributeNode(attr) --获取属性节点

　　 　　setAttributeNode(s) --设置属性节点

　　　　--创建属性

　　　　var s = document.createAttribute(attrname);

　　　　--设置节点值：

　　　　s.nodeValue=’attrvalue’;

　　　　--设置属性节点

　　　　box.setAttributeNode(s);

 六.HTML5 data-属性的使用

　　使用 data-* 属性来嵌入自定义数据--IE10以上