DOM(1)DOM是JS操作网页的接口，全称是“DocumentObjectModel”。（2）功能是将网页转为JS对象，从而可以使用脚本进行各种操作（如添加、删除内容）1.节点1.1节点层次结构（1）文档节点代表根节点每个文档。根节点的唯一子节点是元素，我们称之为文档元素（documentElement）。(2)document元素是文档的最外层元素，所有其他元素都存在于这个元素之内。(3)每个文档只能有一个文档元素。在HTML页面中，文档元素始终是元素。1.2节点类型（7种）DOM的最小单位称为节点。(1)文档节点(document)整个HTML文档文档对象作为window对象的一个??属性存在，我们不用获取它就可以直接使用(2)元素节点(Element)HTML文档中的HTML标签(3)属性节点(Attribute)元素的属性代表了每个标签的属性。这里需要注意的是，属性节点并不是元素节点的子节点，而是元素节点的一部分。(4)文本节点(Text)HTML标签中的文本内容(5)DocumentTypedoctype标签(如)。(6)Comment(7)DocumentFragment文档的片段这七个节点都是浏览器提供的节点对象的派生对象，具有一些共同的属性和方法。1.3节点树最顶端的节点为文档节点，代表整个文档。文档中最高的HTML标签一般是，它构成了树结构的根节点，其他HTML标签节点都是它的下属。除根节点外，其他节点与周围节点有三种关系：(1)父子节点(parentNode)：直接上层节点(2)子节点关系(childNode)：直接下层节点a.firstChild(第一个子节点)b.lastChild(最后一个子节点)(3)兄弟节点关系(sibling)：具有相同父节点的节点。a.nextSibling（下一个兄弟节点）b.previousSibling（上一个兄弟节点）2.NodeType2.1属性(1)nodeType属性返回一个整数值，表示节点a的类型。文档节点（document）9b．元素节点（element）1c．属性节点（attr）2d．文本节点（text）3e．文档类型节点(DocumentType)10f．注释节点（Comment）8g。文档片段节点(DocumentFragment)11(2)nodeName属性返回节点的名称vardiv=document.getElementById('d1');console.log(div.nodeName);//DIV(3)nodeValue返回表示当前节点本身的文本值的字符串，该属性可以读写只有文本节点（text）、注释节点（comment）和属性节点（attr）有文本值。(4)textContent返回当前节点及其所有后代节点的文本内容(5)nextSibling返回紧跟在当前节点之后的第一个兄弟节点。如果当前节点后面没有兄弟节点，则返回null(6)previousSibling返回当前节点之前最近的兄弟节点。如果当前节点没有先前的兄弟节点，则返回null(7)。parentNode当前节点的父节点。对于一个节点，它的父节点只能是三种类型：元素节点（element）、文档节点（document）和文档片段节点（documentfragment）（8）parentElement返回当前节点的父元素节点。如果当前节点没有父节点，或者父节点类型不是元素节点，则返回null(9)firstChild返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null(10)lastChild返回最后一个子节点。(11)childNodes返回一个类数组对象（NodeList集合），其成员包括当前节点参数的所有子节点，作为最后一个子节点插入到当前节点中。该方法的返回值是插入文档的子节点。(2)insertBefore(newNode,referenceNode)用于将一个节点插入到父节点内的指定位置。(3)removeChild()接受一个子节点作为参数，从当前节点中移除该子节点。返回值是移除的子节点。(4)replaceChild(newChild,oldChild)用于用新节点替换当前节点的一个子节点。返回值是被替换的节点oldChild。(5)cloneNode()方法返回调用该方法的节点的副本。3.文档类型3.1属性(1)documentElement总是指向HTML页面中的元素(2)body直接指向
元素(3)doctype访问，浏览器支持不一致，很少使用(4)title获取文档的标题(5)URL获取完整的URL(6)domain获取域名，并且可以设置，经常在跨域访问中使用(7)referrer获取链接到当前页面的页面的URL，即源页面的URL(8)images获取所有img对象，并返回HTMLCollection类数组对象(9)forms获取所有表单对象，并返回HTMLCollectionclassArrayobject(10)links获取文档中所有具有href属性的元素3.2查找元素(1)document.getElementById(id)通过元素id查找元素(2)document.getElementsByTagName(name)通过标签查找name元素(3)document.getElementsByClassName(name)通过类名查找元素(4)document.querySelector()返回第一个元素在匹配指定CSS选择器的文档中(5)document.querySelectorAll()document.querySelectorAll()是HTML5中引入的新方法，返回文档中匹配CSS选择器的所有元素节点的列表。3.3添加元素document.createElement(element)创建一个新的HTML元素，需要结合appendChild()或insertBefore()方法使用。其中，appendChild()方法在节点的子节点列表的末尾添加一个新的子节点。insertBefore()方法在节点的子节点列表中的任意位置插入一个新节点。3.4写入document.write()向文档写入文本或HTML表达式或JavaScript代码。4.Element类型4.1Attributes(1)attributes：返回与元素相关的所有属性的集合。(2)classList：返回元素包含的类属性的集合。(3)className：获取或设置指定元素的类属性的值。(4)tagName：返回当前元素的标签名。(5)innerHTML：设置或获取HTML语法表示的元素的后代。(6)clientHeight：获取元素内部的高度，包括内边距，但不包括水平滚动条、边框和外边距。(7)clientTop：返回元素距其上边界的高度。(8)clientLeft：返回元素从其左边界算起的宽度。(9)clientWidth：返回其内部元素的宽度，包括内边距，但不包括垂直滚动条、边框和外边距。4.2常用方法(1)element.innerHTML=newhtmlcontent改变元素的innerHTML(2)element.attribute=value修改属性的值(3)element.getAttribute()返回元素节点的指定属性值.(4)element.setAttribute(attribute,value)设置或改变HTML元素的属性值(5)element.style.property=newstyle改变HTML元素的样式5文本类型5.1属性和方法(1)length文本长度(2)appendData(text)追加文本(3)deleteData(beginIndex,count)删除文本(4)insertData(beginIndex,text)插入文本(5)replaceData(beginIndex,count,text)替换文本(6)splitText(beginIndex)从beginIndex位置将当前文本节点分成两个文本节点(7)document.createTextNode(text)创建一个文本节点，参数为要插入到该节点的文本(8)substringData(beginIndex,count)提取计数来自beginIndex的子串