DOM

DOM描绘一个层次化的节点树

　　节点的继承顺序

　　Object-->EventTarget-->Node-->Element-->HTMLElement-->HTMLDivElement

　　节点属性：

　　　　nodeName（元素节点：标签名大写，文本节点：#文本内容，注释节点：#comment固定值）、nodeValue（元素节点：不可用，文本节点：文本内容，注释节点：注释内容）、nodeType（1：元素  2：属性 3：文本  8：注释 9：文档）

　　获取节点：

　　　　document.getElementByID() 根据id获取单个元素节点（只能使用document调用）

　　　　document.getElementByTagName()  根据标签名获取元素节点列表

　　　　document.getElementByName()     根据name获取元素节点列表（只能使用document调用）

　　　　document.getElementByClassName()   根据class获取标签元素节点列表

　　　　document.querySelector()          根据选择器选择第一个元素节点    

　　　　document.querySelectorAll()      根据选择器获取所有元素节点

　　节点遍历：

　　　　childNodes：所有子节点      （包括换行和注释）

　　　　children: 所有元素节点 

　　　　parentNode:   获取该节点的父节点

　　　　firstChild: 第一个子节点

　　　　firstElementChild: 第一个子元素节点

　　　　lastChild:  最后一个子节点

　　　　lastElementChlid:  最后一个子元素节点

　　　　nextSibling:  下一个兄弟节点

　　　　nextElementSibling: 下一个兄弟元素节点

　　　　previousSibling:  上一个兄弟节点

　　　　previousElementSilbling: 上一个兄弟元素节点

　　创建节点：

　　　　createElement():   通过标签名创建元素节点 

　　　　createTextNode():  创建文本节点  （如果想重置节点的文本可以使用textContent）

　　　　createDocumentFragment(): 创建碎片容器

　　插入节点：

　　　　appendChild():  插入一个节点

　　　　insertBefore(newElem,targetElem): 在targetElem前插入一个节点

　　替换节点：

　　　　rep;aceChild(newElem,oldElem):  nowElem替换oldElem

　　删除节点：

　　　　remove():   移除自身节点

　　　　removeChild():  移除子节点

　　复制节点：

　　　　cloneNode(boolean) :  复制节点，true：浅复制仅复制当前元素的标签及属性值  false：深复制可以将当前标签中的文本或者子元素都可以复制

　　DOM属性：

　　　　document.body:   body元素

　　　　document.documentElement:   html元素

　　　　document.title:  文档标题

　　　　documetn.styleSheets:  css样式对象

　　　　document.URL :   完整的URL

　　　　document.domain:  域名

　　　　document.getAttribute(): 获元素节点的标签属性  （元素节点也是一个对象，它既有节点的属性，也有对象的属性，而getAttribute获取的是重要的标签属性，对象属性一般没什么用，但有些标签属性和对象属性是互通的，因此有时也可以用对象.属性名来获取和设置标签属性）

　　　　document.setAttribute(): 设置元素节点的标签属性

　　　　document.removeAttribute():  删除元素节点属性

　　DOM的样式：

　　　　element.style.styleName = "";    设置元素节点的样式

　　　　element.style.styleName            获取计算后样式（针对IE）

　　　　elment.style.getComputeStyle    获取计算后样式（非IE）

　　DOM常见属性：

　　　　clientWidth、clientHeight:  元素宽高(不加border)

　　　　offsetWidth、offsetHeight:  元素宽高（加border）

　　　　offsetLeft、offsestTop:    如果父元素有定位，就是距离父元素的距离，没有就是根据body距离

　　　　scrollWidth、scrollHeight:   获取元素的内容实际宽高

　　　　scrollTop、scrollLeft:   返回滚动条距离顶部、左侧的距离

DOM

原文：https://www.cnblogs.com/wangjingzhi/p/12150288.html