DOM(一)：Node属性与方法-CFANZ编程社区

DOM之Node属性与方法思维导图

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,属性返回节点的名称

// 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>

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()

???

<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>
*/