DOM由节点组成在HTMLDOM（DocumentObjectModel）中，每一部分都是一个节点：文档本身就是一个文档节点所有的HTML元素都是元素节点所有的HTML属性都是属性节点一个文本里面的文本HTMLelement是文本节点comment是注释节点1．重要节点类型：标签（元素）节点、属性节点、文本节点。2.重要的节点属性：（1）nodeType节点类型（数字表示，标签1，属性2，文本3）（2）nodeName节点名称（3）nodeValue节点值3.不同类型节点label节点的属性值attributenodetextnodenodeType节点类型123nodeName节点名对应标签名对应属性名#textnodeValue节点值null对应属性值对应文本内容labelnode:nodeType:1;nodeName：对应标签名称；节点值：空属性节点：节点类型：2；nodeName：对应的属性名；nodeValue：对应的属性值文本节点：nodeType：3；节点名称：#text；nodeValue：元素节点或属性节点中的文本内容文档节点：nodeType：9；nodeName：表示整个Document（DOM树的根节点）label节点和文本node.children不是DOM的label属性，但是所有浏览器都支持，只有获取label子节点才能获取相邻节点的属性：[next(previous)Sibling],[next(previous)ElementSibling].nextSibling：返回紧跟在指定节点（sibling）之后的节点。返回的节点作为Node对象返回。元素中的空格被视为文本，文本被视为文本节点。IE8和以前的浏览器会忽略空白文本节点。函数getPrevNode(dom){varpreNode=dom.previousSibling;vartxt=preNode.nodeValue.trim();//''if(preNode.nodeType==3&& txt.length==0){returnpreNode.previousSibling}else{returnpreNode}}.nextElementSibling:IE8及之前的浏览器不支持这个属性，只支持labelnodeswereobtained//解决兼容性问题functiongetNextElement(element){if(element.nextElementSibling){returnelement.nextElementSibling;}else{varele=element.nextSibling;控制台.log(ele)while(ele&&ele.nodeType!==1){ele=ele.nextSibling;}返回元素；}}父元素的第一个和最后一个子节点：[first(last)Child],[first(last)ElementChild].firstChild：所有浏览器都支持，获取标签节点和文本节点，但IE8及更早版本低浏览器可以忽略空白文本节点，获取标签节点。firstElementChild:IE8之前低版本浏览器不支持，直接获取父元素第一个标签节点functiongetFirstElementChild(element){if(element.firstElementChild){返回元素。第一个元素子；}其他{变量ele=element.firstChild;while(ele&&ele.nodeType!==1){ele=ele.nextSibling;}返回元素；}}functiongetLastElementChild(element){if(element.lastElementChild){返回element.lastElementChild;else{varele=element.lastChild;while(ele&&ele.nodeType!==1){ele=ele.previousSibling;}返回元素；)Child[不仅可以获取标签节点，还可以获取文本节点，但ie8及之前的浏览器会忽略空文本节点].children;[所有浏览器都支持，只获取当前元素的label子元素]next(previous)ElementSibling,first(last)ElementChild[IE8及之前低版本浏览器不支持，只获取label节点]节点操作动态创建nodeelementsdocument.createElement("labelname");//创建元素节点；文档。createTextNode("txt");//创建文本节点；1.父元素。appendChild(nodeelement)--将节点插入到父节点的末尾2．Parentelement.insertBefore(newnode,insertionposition)--将新节点插入到之前的父元素中.removeChild(nodeelement);//删除节点元素parentelement.replaceChild(node1,node2);//将节点2替换为节点1克隆节点：cloneNode(booleanvalue)1.该方法将复制并返回调用它的节点的副本2.如果传递的参数为true，则当前节点的所有后代节点都将被复制递归复制。False只复制当前节点。如果参数为False，只克??隆一个标签（不传参数，默认为false）如果参数为true，标签之间的内容也会被克隆，也叫深克隆3.返回的节点不属于文档树，其parentNode属性为null。4、复制Element节点时，其所有属性都会被复制。但是，不会复制当前节点上注册的事件。基本用法1.对象。设置和获取属性【元素是一个DOM对象】例如：txt.value=”123”;{不能设置或获取自定义属性}2.setAttribute(属性名,属性值)：设置属性，也可以设置自定义属性。建议使用它。注意：设置已有属性时，原有属性值将被覆盖。3.getAttribute()可以获取行Attributes中的原始属性，也可以获取自定义属性4.removeAttribute(要移除的属性名)彻底删除元素节点设置样式和元素设置样式两种形式（通过对象方式）：1.设置类名className:element的一个属性，设置类名；[当你想给一个元素添加多个样式时，可以将样式放在一个css类style中，然后通过元素的属性className获取类名。]dom.setAttribute('class','xxx');IE6/7不支持setAttribute('class',xxx)设置元素的类。dom.setAttribute('className','xxx')IE8/9/10/Firefox/Safari/Chrome/Opera不支持setAttribute('className',xxx)设置元素的classdom.className='xxx'；所有浏览器都支持dom.className=dom.className.replace("hide","show");//字符串的替换只替换要替换的字符，不改变其他2.style:的一个属性通过其设置样式的元素。例如：dom.style.backgroundColor='red';//将样式的中间横线改为驼峰式dom.style.background='red';dom.style.color='红色';设置和清除类方式1.设置类名：dom.className='类名';2。清除类名：dom.className='';3。彻底清除类的属性：dom.removeAttribute('class')设置，获取标签中的文本内容得到内容区别：1.innerText只打印标签之间的文本内容，不打印标签2.innerHTML，不仅打印文本内容，还打印标签之间的标签。高版本浏览器会原样输出格式，设置内容区别：1.innerText设置内容时，不能设置标签，标签会被转义。2、innerHtml设置内容时，可以把里面的标签渲染成普通的html标签。总结：（1）所有浏览器都支持innerHTML，不仅可以获取文本，还可以获取标签之间的标签。(2)老版本火狐浏览器不支持innerText，只支持textContent；(3)Ie8之前的浏览器不支持textContent，只支持innerText；如果设置了页面标签，可以调用动态创建的元素，通过js动态创建页面元素。1.document.write()几乎很少用到2.InnerHTML：直接在里面写html代码生成标签3.document.creatElement(tagname)：创建一对标签获取样式obj.style：只获取html标签style属性(style="...")中的值是从
