DOM操作

DOM(Document Object Model)
        当网页被加载时，浏览器会创建页面的文档对象模型
        DOM树        DOM节点12个(*常用)
                ELEMENT_NODE                         1        元素节点        *
                ATTRIBUTE_NODE                    2        属性节点        *
                TEXT_NODE                                  3        文本节点        *
                CDATA_SECTION_NODE                4        CDATA 区段         
                ENTITY_REFERENCE_NODE        5        实体引用         
                ENTITY_NODE                                6        实体         
                PROCESSING_INSTRUCTION_NODE        7        处理指令         
                COMMENT_NODE                        8        注释节点        *
                DOCUMENT_NODE                        9        文档节点        *
                DOCUMENT_TYPE_NODE                 10        向为文档定义的实体提供接口。
                DOCUMENT_FRAGMENT_NODE         11        表示轻量级的 Document 对象，其中容纳了一部分文档。
                NOTATION_NODE                         12        表示在 DTD 中声明的符号。

        通过DOM树控制        
                HTML的元素、属性                 
                CSS的样式
        DOM两部走： 获取 操作
获取
        获取节点        
                document.documentElement                         返回文档的根节点
                document.body                                           返回文档的body元素
                document.title                                                 返回文档的title元素
                document.getElementById()                         返回对拥有指定 id 的第一个对象的引用。
                document.getElementsByClassName()         返回文档中所有指定类名的元素集合                不兼容IE8-
                document.getElementsByTagName()         返回带有指定标签名的对象集合。
                document.getElementsByName()                 返回带有指定名称的对象集合。
                document.querySelectorAll()                 返回文档中匹配的CSS选择器的所有元素节点列表
                document.querySelector()                         返回文档中匹配指定的CSS选择器的第一元素
                document.activeElement                                 返回当前获取焦点元素
                属性节点
                        attr.isId                                         检测元素是否拥有id
                        attr.specified                                 如果属性被指定返回 true ，否则返回 false
                        attr.specified                                 如果属性被指定返回 true ，否则返回 false
                        nodemap.item()                                 返回节点列表中处于指定索引号的节点。
                        nodemap.length                                 返回节点列表的节点数目。
                        nodemap.removeNamedItem()         删除指定属性节点
                        nodemap.setNamedItem()                 设置指定属性节点(通过名称)
        获取元素
                element.ownerDocument                 返回元素的根元素（文档对象）
                element.parentNode                         返回元素的父节点
                element.querySelector()         返回匹配指定 CSS 选择器元素的第一个子元素
                nodelist.length                         返回节点列表的节点数目。
                nodelist.item()                         返回某个元素基于文档树的索引
                element.previousSibling         返回某个元素紧接之前元素
                element.nextSibling                 返回该元素紧跟的一个元素
                element.firstChild                         返回元素的第一个子节点
                element.lastChild                         返回的最后一个子元素
                element.childNodes                         返回元素的一个子节点的数组
                element.attributes                         返回一个元素的属性数组
                获取元素属相
                        element.clientHeight         在页面上返回内容的可视高度（不包括边框，边距或滚动条）
                        element.clientWidth         在页面上返回内容的可视宽度（不包括边框，边距或滚动条）
                        element.offsetHeight         返回，任何一个元素的高度包括边框和填充，但不是边距
                        element.offsetWidth         返回，任何一个元素的宽度包括边框和填充，但不是边距
                        element.offsetLeft                 返回当前元素的相对水平偏移位置的偏移容器
                        element.offsetTop                 返回当前元素的相对垂直偏移位置的偏移容器
                        element.scrollHeight         返回整个元素的高度（包括带滚动条的隐蔽的地方）
                        element.scrollWidth         返回元素的整个宽度（包括带滚动条的隐蔽的地方）
                        element.scrollLeft                 返回当前视图中的实际元素的左边缘和左边缘之间的距离
                        element.scrollTop                 返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离
                                document.body.scrollTop;                        只兼容谷歌
                                document.documentElement.scrollTop;        兼容非谷歌
                        element.offsetParent         返回元素的偏移容器
操作
        文档操作
                document.normalize()                         删除空文本节点，并连接相邻节点
                document.normalizeDocument()         删除空文本节点，并连接相邻节点的
                document.open()                                 打开一个流，以收集来自任何document.write()或 document.writeln()法的输出。
                document.close()                                 关闭用 document.open() 方法打开的输出流，并显示选定的数据。
                document.writeln()                                 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。
                document.write()                                 向文档写 HTML 表达式 或 JavaScript 代码。
        节点操作
                document.createAttribute()                 创建一个属性节点
                document.createComment()                 创建注释节点。                 
                document.createDocumentFragment()         创建空的 DocumentFragment 对象，并返回此对象。
                document.createElement()                 创建元素节点。                         
                document.createTextNode()                 创建文本节点。
                document.importNode()                         把一个节点从另一个文档复制到该文档以便应用。
                document.renameNode()                         重命名元素或者属性节点。
        元素操作
                 element.compareDocumentPosition()         比较两个元素的文档位置。
                element.isSameNode()         检查两个元素所有有相同节点。
                element.isEqualNode()         检查两个元素是否相等
                element.toString()                一个元素转换成字符串
                element.removeChild()         删除一个子元素
                element.replaceChild()         替换一个子元素
                element.insertBefore()         现有的子元素之前插入一个新的子元素
                element.appendChild()         为元素添加一个新的子元素
                element.cloneNode()           克隆某个元素
                element.textContent                 设置或返回一个节点和它的文本内容
                element.innerHTML                 设置或者返回元素的内容。
                元素属相操作
                        element.nodeValue         返回元素的类型
                        element.lang                 设置或者返回一个元素的语言。
                        element.dir                         设置或返回一个元素中的文本方向
                        element.id                         设置或者返回元素的 id。
                        element.className         设置或返回元素的class属性
                        element.classlist                 返回元素的类名，作为 DOMTokenList 对象。
                        element.title                         设置或返回元素的title属性
                        element.style                                         设置或返回元素的样式属性
                        element.tabIndex                                 设置或返回元素的标签顺序。
                        element.contentEditable                 设置或返回元素的内容是否可编辑
                        element.isContentEditable                 如果元素内容可编辑返回 true，否则返回false
                        element.hasAttribute()                         如果元素中存在指定的属性返回 true，否则返回false。
                        element.hasAttributes()                 如果元素有任何属性返回true，否则返回false。
                        element.getAttributeNode()                 返回指定属性节点
                        element.getAttribute()                         返回指定元素的属性值
                        element.setAttributeNode()                 设置或者改变指定属性节点。
                        element.setAttribute()                         设置或者改变指定属性并指定值。
                        element.removeAttribute()                 从元素中删除指定的属性
                        element.removeAttributeNode()         删除指定属性节点并返回移除后的节点。
                        element.hasfocus()                                 返回布尔值，检测文档或元素是否获取焦点
                        element.focus()                                        设置文档或元素获取焦点
                        element.nodeName                                 返回元素的标记名（大写）
                        element.hasChildNodes()                 返回一个元素是否具有任何子元素
                        element.namespaceURI                         返回命名空间的 URI。
                        element.getFeature()                         返回指定特征的执行APIs对象。
                        element.isSupported()                         如果在元素中支持指定特征返回 true。
                        element.isDefaultNamespace()         如果指定了namespaceURI 返回 true，否则返回 false。
                        element.getUserData()                         返回一个元素中关联键值的对象。

***************************************************************************************************************************************************************************************************************************************************
01 Attributes     存储节点的属性列表(只读)  

02  childNodes     存储节点的子节点列表(只读) 

03  dataType     返回此节点的数据类型 

04  Definition     以DTD或XML模式给出的节点的定义(只读) 

05  Doctype     指定文档类型节点(只读) 

06  documentElement     返回文档的根元素(可读写) 

07  firstChild     返回当前节点的第一个子节点(只读) 

08  Implementation     返回XMLDOMImplementation对象 

09  lastChild     返回当前节点最后一个子节点(只读) 

10 nextSibling     返回当前节点的下一个兄弟节点(只读)  

11 nodeName     返回节点的名字(只读)  

12 nodeType     返回节点的类型(只读)  

13 nodeTypedValue     存储节点值(可读写)  

14 nodeValue     返回节点的文本(可读写)  

15 ownerDocument     返回包含此节点的根文档(只读)  

16 parentNode     返回父节点(只读)  

17 Parsed     返回此节点及其子节点是否已经被解析(只读)  

18 Prefix     返回名称空间前缀(只读)  

19 preserveWhiteSpace     指定是否保留空白(可读写)  

20 previousSibling     返回此节点的前一个兄弟节点(只读) 

21 Text     返回此节点及其后代的文本内容(可读写)  

22 url    返回最近载入的XML文档的URL(只读)  

23 Xml     返回节点及其后代的XML表示(只读) 

方法:



01 appendChild     为当前节点添加一个新的子节点,放在最后的子节点后 

02  cloneNode     返回当前节点的拷贝 

03  createAttribute     创建新的属性 

04  createCDATASection     创建包括给定数据的CDATA段 

05  createComment     创建一个注释节点 

06  createDocumentFragment     创建DocumentFragment对象 

07  createElement     创建一个元素节点 

08  createEntityReference     创建EntityReference对象 

09 createNode     创建给定类型,名字和命名空间的节点  

10 createPorcessingInstruction     创建操作指令节点 

11 createTextNode     创建包括给定数据的文本节点  

12 getElementsByTagName     返回指定名字的元素集合  

13 hasChildNodes     返回当前节点是否有子节点  

14 insertBefore     在指定节点前插入子节点  

15 Load     导入指定位置的XML文档  

16 loadXML     导入指定字符串的XML文档  

17 removeChild     从子结点列表中删除指定的子节点  

18 replaceChild     从子节点列表中替换指定的子节点  

19 Save     把XML文件存到指定节点  

20 selectNodes     对节点进行指定的匹配,并返回匹配节点列表  

21 selectSingleNode     对节点进行指定的匹配,并返回第一个匹配节点 

22 transformNode     使用指定的样式表对节点及其后代进行转换 

23 transformNodeToObject     使用指定的样式表将节点及其后代转换为对象