首先先要知道我们必须要明白的节点类型的值 1---元素类型 2---元素的属性类型 3--元素的值类型 4--cdata注释类型 8--注释 9--文档类型 操作节点属性 nodeType nodeName nodeValue parentNode 常规跨浏览器的原声dom选择器 在操作节点的时候注意各浏览器对空文本节点的处理,ie是忽略的(childNodes) 一、document.getElementById() 根据Id获取元素节点 二、document.getElementsByName() 根据name获取元素节点 三、document.getElementsByTagName() 根据HTML标签名获取元素节点,注意getElements***的选择器返回的是一个NodeList对象,能根据索引号选择其中1个,可以遍历输出。 h5新增dom选择器 document.getElementsByClassName() 根据class获取元素节点 类css选择器 document.querySelector() document.querySelectorAll() 文档结构和遍历 1、parentNode 获取该节点的父节点 2、childNodes 获取该节点的子节点数组注意低版本的处理 3、firstChild 获取该节点的第一个子节点 4、lastChild 获取该节点的最后一个子节点 5、nextSibling 获取该节点的下一个兄弟元素 6、previoursSibling 获取该节点的上一个兄弟元素 7、nodeType 节点的类型,9代表Document节点,1代表Element节点,3代表Text节点,8代表Comment节点,11代表DocumentFragment节点 8、nodeVlue Text节点或Comment节点的文本内容 9、nodeName 元素的标签名(如P,SPAN,#text(文本节点),DIV),以大写形式表示 H5新增的节点识别,统一文本节点处理(IE9之前不会返回节点的文本节点,这样会对firstChild以及childNodes属性的使用产生影响--摘自javascript高级程序设计) 1、firstElementChild 第一个子元素节点 2、lastElementChild 最后一个子元素节点 3、nextElementSibling 下一个兄弟元素节点 4、previousElementSibling 前一个兄弟元素节点 5、childElementCount 子元素节点个数量 h5还新增document.createNodeIterator document.createTreeWalker(相比nodeIterator 更加高级,不仅仅只有nextNode,previosNode还包括parentNode,nextSibling,previousSibiling,firstNode,lastNode)
javascript操作DOM节点的属性 getAttribute(); setAttribute(); 1、innerText、textContent innerText与textContent的区别,当文本为空时,innerText是"",而textContent是undefined 2、innerHTML和outHTML //注意火狐浏览器不支持innerText,但是所有的浏览器基本都支持textContent outHTML是包含所操作节点本身 innerHTMl所操作节点内部的html元素 创建,插入,删除节点 document.createTextNode() 创建一个文本节点 新建文档碎片有利于提高性能,减少对文档的重排 document.createDocumentFragment(); 创建一个元素节点 document.createElement() 在节点后面插入一个新的节点 document.appendChild(); document. insertBefore(); removeChild(); 由父元素调用,删除一个子节点 replaceChild() //删除一个子节点,并用一个新节点代替它,第一个参数为新建的节点,第二个节点为被替换的节点