DOM《Node接口》

市民钟先生
125 阅读5分钟

Node接口

  • 所有DOM节点都继承了Node接口，拥有一些共同的属性和方法。这是DOM操作的基础。

Node属性

nodeType

  • 返回一个整数值，表示节点的类型。
document.nodeType // 9 文档节点

document.nodeType === Node.DOCUMENT_NODE // true
  • 不同节点的nodeType属性值和对应的常量如下：
节点类型常量数值
文档Node.DOCUMENT_NODE9
元素Node.ELEMENT_NODE1
属性Node.ATTRIBUTE_NODE2
文本Node.TEXT_NODE3
文档片断Node.DOCUMENT_FRAGMENT_NODE11
文档类型Node.DOCUMENT_TYPE_NODE10
注释Node.COMMENT_NODE8

nodeName

  • 返回节点的名称。
<div class="box">Hello World</div>

document.querySelector('div').nodeName  // DIV
节点类型属性值
文档#document
元素大写标签名
属性属性名称
文本#text
文档片段#document-fragment
文档类型文档的类型
注释#comment

nodeValue

  • 返回一个字符串，表示当前节点本身的文本值，该属性可读写。只有文本节点、注释节点、属性节点有文本值，其他类型一律返回null。
<div class="box">Hello World</div>

document.querySelector('div').nodeValue  // null 元素节点没有文本值
document.querySelector('div').firstChild.nodeValue  // 'Hello World' 
// 元素节点的第一个子节点是文本节点，所以有值

document.querySelector('div').firstChild.nodeValue = '123' 
// 设置文本值，就变成了
<div class="box">123</div>

textContent

  • 返回当前节点和它的所有后代节点的文本内容，可读写。
<div class="box">Hello World <span> Mr zhong</span> </div>

document.querySelector('div').textContent // Hello World  Mr zhong 

document.querySelector('div').textContent = '123'
// 设置文本值，就变成了
<div class="box">123</div>

baseURI

  • 返回一个字符串，表示当前网页的绝对路径。浏览器根据这个属性计算网页上的相对路径URL，该属性为只读。
document.baseURI   // 'https://www.baidu.com/'

ownerDocument

  • 返回当前节点所在的顶层文档对象，即document。
document.querySelector('div').ownerDocument  // #document

nextSibling

  • 返回紧跟在当前节点后面的第一个同级节点，如果没有则返回null。
<div id="box1">Hello World  </div>
<div id="box2">good</div>

document.getElementById('box1').nextSibling // #text  返回的是文本节点，因为第一个div后同级节点是 \n


<div id="box1">Hello World</div><div id="box2">good</div>
// 这种写法则返回 <div id="box2">good</div>

previousSibling

  • 返回当前节点前面距离最近的一个同级节点，如果没有则返回null。
<body>
  <div id="box1">Hello World  </div>
  <div id="box2">good</div>
</body>

document.getElementById('box1').previousSibling // #text 返回的是文本节点，因为第一个div前同级节点是 \n

parentNode

  • 返回当前节点的父节点。对于一个节点来说，它的父节点只能是三种类型元素节点、文档节点、文档片段节点。文档节点和文档片段的父节点都是null。
<body>
  <div id="box1">Hello World  </div>
  <div id="box2">good</div>
</body>

document.getElementById('box1').parentNode  // body

parentElement

  • 返回当前节点的父元素节点，如果没有父元素或者父节点类型不是元素节点，则返回null。
document.getElementsByTagName('body')[0].parentElement // html

firstChild

  • 返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null。
<body>
  <div id="box1">Hello World  </div>
  <div id="box2">good</div>
</body>

document.getElementsByTagName('body')[0].firstChild  // #text

lastChild

  • 返回当前节点的最后一个子节点，如果当前节点没有子节点，则返回null。
<div id="box1">Hello World</div>

document.getElementById('box1').lastChild  // #text

childNodes

  • 返回一个类数组，成员包括当前节点的所有子节点。
<div id="box1">Hello World</div>

document.getElementById('box1').childNodes  // NodeList [text]

isConnected

  • 返回一个布尔值，表示当前节点是否在文档之中。
var test = document.createElement('p');
test.isConnected // false  刚创建了一个节点，还没有插入文档中

document.body.appendChild(test);
test.isConnected // true   已经插入到文档中了

Node方法

appendChild()

  • 接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。返回值就是子节点。
  • 如果参数节点是 DOM 已经存在的节点，那么此方法会将其从原来的位置，移动到新位置。
var p = document.createElement('p');
document.body.appendChild(p);

<body>
  <div id="box1">
    Hello World
    <p></p>
  </div>
</body>

hasChildNodes()

  • 返回一个布尔值，表示当前节点是否有子节点。
<div id="box1">
     
</div>

document.getElementById('box1').hasChildNodes()  // true 有回车 有空格

cloneNode()

  • 用于克隆一个节点，参数为布尔值，表示是否同时克隆子节点。返回值是克隆出来的新节点。
  • 克隆一个节点时，有可能会出现两个相同的id和name属性。
<body>
  <div id="box1">111</div>
</body>

document.getElementById('box1').cloneNode(true);  // <div id="box1">111</div>
document.getElementById('box1').cloneNode();  // <div id="box1"></div>

insertBefore()

  • 将某个节点插入父节点内部的指定位置。参数一为要插入的新节点；参数二是父节点内部的一个子节点，新节点将插入到参数二节点的前面。如果参数二为null，则新节点会成为父节点的最后一个子节点。
<body>
  <div id="box1">111</div>
</body>

let p = document.createElement('p');
document.body.insertBefore(p, document.body.firstChild);

<body>
  <p></p>
  <div id="box1">111</div>
</body>

removeChild()

  • 接受一个子节点作为参数，从当前节点移除该子节点。返回值是被移除的子节点。
<body>
  <div id="box1">111</div>
</body>

document.body.removeChild(document.getElementById('box1'))  // <div id="box1">111</div>

<body></body>

replaceChild()

  • 将一个新的节点替换当前节点的某一个子节点。参数一是用来替换的新节点；参数二是将要替换的子节点。返回值是替换掉的那个节点。
<body>
  <div id="box1">111</div>
</body>

let div = document.getElementById('box1');
let p = document.createElement('p');
document.body.replaceChild(p, div);    // <div id="box1">111</div>

<body>
  <p></p>
</body>

contains()

  • 返回一个布尔值，表示参数节点是否满足以下三个条件：

    • 参数节点为当前节点。
    • 参数节点为当前节点的子节点。
    • 参数节点为当前节点的后代节点。
<body>
  <div id="box1">
    <div id="box2">
      <div id="box3">
        <div id="box4">
        </div>
      </div>
    </div>
  </div>
</body>

let div = document.getElementById('box4');
document.body.contains(div);  // true

isEqualNode()

  • 返回一个布尔值，用于检查两个节点是否相等（节点类型、属性、子节点）。
<body>
  <div id="box1">
  </div>
  <div id="box1">
  </div>
</body>

let div = document.getElementsByTagName('div')[0];
let div2 = document.getElementsByTagName('div')[1];
div.isEqualNode(div2) // true

<body>
  <div id="box1">
  </div>
  <div id="box2">
  </div>
</body>
let div = document.getElementsByTagName('div')[0];
let div2 = document.getElementsByTagName('div')[1];
div.isEqualNode(div2) // false

isSameNode()

  • 返回一个布尔值，表示两个节点是否为同一个节点。
<body>
  <div id="box1">
  </div>
  <div id="box1">
  </div>
</body>

let div = document.getElementsByTagName('div')[0];
let div2 = document.getElementsByTagName('div')[1];
div.isSameNode(div2)  // false
div.isSameNode(div)  // true

normalize()

  • 清理当前节点内部的所有文本节点。会去除空的文本节点，并将毗邻的文本节点合并成一个。
let wrapper = document.createElement('div');

wrapper.appendChild(document.createTextNode('Part 1 '));
wrapper.appendChild(document.createTextNode('Part 2 '));

wrapper.childNodes.length // 2
wrapper.normalize();
wrapper.childNodes.length // 1

getRootNode()

  • 返回当前节点所在的根节点document，与ownerDocument相同。
document.body.getRootNode() === document  // true

// document调用时不一样
document.getRootNode()    // #document
document.ownerDocument    // null
avatar
文章
阅读
粉丝