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
// 1
Div.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.parentElement
test.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 !== null
node.childNodes && node.childNodes.length > 0
Node.prototype.isEqualNode()
返回一个布尔值，用于检查两个节点是否相等。所谓相等的节点，指的是两个节点的类型相同、属性相同、子节点相同
var Div1 = document.createElement('div')
var Div2 = document.createElement('div')
Div1.isEqualNode(Div2) // true
Node.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()或其他类似的方法将拷贝的节点添加到文档中之前,克隆的节点并不属于当前文档树的一部分,没有父节点。
参考：
版权声明：本文为博主原创文章，未经博主许可不得转载
网友评论