DOM之Node属性与方法思维导图
Node公有属性和方法.png
JavaScript-DOM之Node方法
Node.nodeType Node.nodeName Node.nodeValue
- nodeTypen属性返回一个整数值，表示节点的类型。
| Node.nodeType | 值 | 对应常量 |
|---|---|---|
| 文档节点（document） | 9 | Node.DOCUMENT_NODE |
| 元素节点（element） | 1 | Node.ELEMENT_NODE |
| 属性节点（attr） | 2 | Node.ATTRIBUTE_NODE |
| 文本节点（text） | 3 | Node.TEXT_NODE |
| 文档片断节点（DocumentFragment) | 11 | Node.DOCUMENT_FRAGMENT_NODE |
- nodeName,属性返回节点的名称
文本节点（text）、注释节点（comment）和属性节点（attr）有文本值，这三类节点的nodeValue可以返回结果，其他类型的节点返回「null」
// HTML/*<body> <div class="test">this Node.nodeType(name value)test demo</div></body>*/var Div =document.querySelector('.test')Div.nodeType// 1Div.nodeValue// null// 文本节点（text）、注释节点（comment）和属性节点（attr）有文本值，这三类节点的nodeValue可以返回结果，其他类型的节点返回「null」Div.firstChild.nodeValue// "this Node.nodeType(name value)test demo"Div.nodeName// "DIV"Node.textContent(返回的是string)
表示一个节点及其后代的文本内容。
可通过赋值设置textContent的值，但是不会对『HTML标签』进行转义element.textContent = "this is textContent test demo"// 为节点设置textContent?
// HTML/*<body> <div class="test">this is <span>textContent</span>test demo</div></body>*/var test = document.querySelector('.test')test.textContent// "this is textContenttest demo"// 读取textContent属性时，自动对 HTML 标签转义test.textContent = '<span>this textcontent</span>'console.log(test.textContent)// "<span>this textcontent</span>"// 设置textContent时，会把「HTML标签解释为文本，不会转义」textContent与innerText
- textContent会获取所有元素的内容，包括
<script>和<style>元素，innerText不会。
-
innerText 受 CSS 样式的影响，并且不会返回隐藏元素的文本，而textContent会。
-
由于 innerText 受 CSS 样式的影响，它会触发重排（reflow），但textContent 不会。
Node.childNodes
?
<body> <div class="test"> <p>Hello World</p> <p>just test</p> <p>for DOM</p> <p class="test1">测试一</p> </div> <script> var test = document.querySelector('.test') var testChildNode = test.childNodes // NodeList(9) [text, p, text, p, text, p, text, p.test1, text] // 节点包括「回车 换行」(回车换行属于text范围) test.childNodes[1].nodeName // "P" </script></body>集合的元素是「**一个节点而不是字符串」。要从集合的元素「获取数据」，你必须使用它们的属性（例如：test.childNodes[1].nodeName 获取它们的名称，或是nodeValue）
Node.nextSibling与 Node.previousSibling(包括空白符文本节点)
-
Node.nextSibling 返回其父节点的 childNodes 列表中紧跟在其后面的节点，如果指定的节点为最后一个节点，则返回 null。
-
Node.previosSibling 返回当前节点的前一个兄弟节点,没有则返回null。
// HTML/*<body> <div class="ct"> <div class="test">this dom test demo</div> <p>测试</p> </div> </body>*/var test = document.querySelector('.test')test.nextSibling// 返回一个空白符文本(回车换行符)typeof test.nextSibling// "object"// 返回的节点为对象test.parentElementtest.parentElement.lastChild.previousSibling// <p>测试</p>// test.parentElement即为class="ct"的 div,他的「lastChild」为一个「空白符」，『lastChild』的previousSibling「<p>」JavaScript-DOM之Node方法
Node.prototype.hasChildNodes()
Node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾，插入点即为返回值判断一个节点有没有子节点的方式
node.hasChildNodes()node.firstChild !== nullnode.childNodes && node.childNodes.length > 0Node.prototype.isEqualNode()
返回一个布尔值，用于检查两个节点是否相等。所谓相等的节点，指的是两个节点的类型相同、属性相同、子节点相同
var Div1 = document.createElement('div')var Div2 = document.createElement('div')Div1.isEqualNode(Div2) // trueNode.prototype.removeChild()
?
/*<!--示例HTML代码--><div id="test"> <div class="son"></div></div>*/// ①// 先定位父节点,然后删除其子节点var Div = document.querySelector("#test");var Div_son = document.querySelector(".son");var throwawayNode = d.removeChild(Div_son);// ②// 无须定位父节点,通过parentNode属性直接删除自身var node = document.querySelector(".son");if (node.parentNode) { node.parentNode.removeChild(node);}//③!!!// 移除一个元素节点的所有子节点var element = document.querySelector("#test");while (element.firstChild) { element.removeChild(element.firstChild);}Node.prototype.cloneNode()
括号内参数默认为『false』即『浅拷贝』，参数为『true』，为『深拷贝』
???
<body> <div class="test"> <p>Hello World</p> <p>just test</p> <p>for DOM</p> </div></body>进行clone操作
var DivNode = document.querySelector('.test')var DivNodeClone = DivNode.cloneNode(true)document.body.appendChild(DivNodeClone)// 使用appendChild把克隆的节点添加到当前文档 // HTML/*<body> <div class="test"> <p>Hello World</p> <p>just test</p> <p>for DOM</p> </div> <div class="test"> <p>Hello World</p> <p>just test</p> <p>for DOM</p> </div></body>*/使用Node.appendChild()或其他类似的方法将拷贝的节点添加到文档中之前,克隆的节点并不属于当前文档树的一部分,没有父节点。
参考：
版权声明：本文为博主原创文章，未经博主许可不得转载
文章转载于:https://www.jianshu.com/p/e536190532ec
原著是一个有趣的人,若有侵权,请通知删除
还没有人抢沙发呢~