(86)Wangdao.com第十九天_JavaScript 接口之 ParentNode 和 ChildNode

時間 2019-11-08

標籤 wangdao.com wangdao com 第十九天 9天 javascript 接口 parentnode childnode 欄目 JavaScript 简体版

原文原文鏈接

ParentNode 接口，ChildNode 接口node

節點對象除了繼承 Node 接口之外，還會繼承其餘接口。app

ParentNode 接口spa

表示當前節點是一個父節點，提供一些處理子節點的方法。code

ChildNode 接口對象

表示當前節點是一個子節點，提供一些相關方法。blog

ParentNode 接口
- 若是當前節點是父節點，就會繼承ParentNode接口。
  - 因爲只有元素節點（element）、文檔節點（document）和文檔片斷節點（documentFragment）擁有子節點
  - 所以只有這三類節點會繼承 ParentNode 接口。

- ParentNode.children 屬性
  - 成員是當前節點的全部元素子節點，返回一個HTMLCollection實例。
  - 該屬性只讀。
  - 只包括元素節點。
  - 若是沒有元素類型的子節點，返回值 HTMLCollection 實例的 length 屬性爲 0 。
    - 下面是遍歷某個節點的全部元素子節點的示例。
      for (var i = 0; i < el.children.length; i++) { // ... }
  - HTMLCollection 是動態集合，會實時反映 DOM 的任何變化

- ParentNode.firstElementChild 屬性
  - 返回當前節點的第一個元素子節點。若是沒有任何元素子節點，則返回 null
  - ```
  document.firstElementChild.nodeName    // "HTML"    document 節點的第一個元素子節點是<HTML>
```

- ParentNode.lastElementChild 屬性
  - 返回當前節點的最後一個元素子節點，若是不存在任何元素子節點，則返回 null

- ParentNode.childElementCount 屬性
  - 表示當前節點的全部元素子節點的數目，返回一個整數。
  - 若是不包含任何元素子節點，則返回 0

ParentNode.append() ParentNode.prepend()

append() 爲當前節點追加一個或多個子節點，位置是最後一個元素子節點的後面

prepend() 爲當前節點追加一個或多個子節點，位置是第一個元素子節點的前面

不只能夠添加元素子節點，還能夠添加文本子節點

沒有返回值

var parent = document.body;
            
            
            var p = document.createElement('p');
            p.innerHTML = "這是p"
            parent.append(p);    // 添加 元素子節點
            
            
            parent.append('Hello');    // 添加 文本子節點
            
            
            var p1 = document.createElement('p');
            var p2 = document.createElement('p');
            p1.innerHTML = "這是p1"
            p2.innerHTML = "這是p2"
            // 添加多個元素子節點
            parent.append(p1, p2);
            
            
            var p3 = document.createElement('p');
            p3.innerHTML = "這是p3"
            // 添加元素子節點和文本子節點
            parent.append('Hello', p3);

對應的會生成的 HTML 代碼爲繼承

ChildNode 接口

只要這個節點有父節點，那麼該節點就繼承了 ChildNode 接口

ChildNode.remove() 方法

從父節點移除當前節點

ele.remove();    // 在 DOM 裏移除 ele 節點

- ChildNode.before() ChildNode.after()
  - .before() 方法用於在當前節點前面，插入一個或多個同級節點。與當前節點擁有同一父元素。
    - 注意：不只能夠插入元素節點，還能夠插入文本節點
    - var p = document.createElement('p'); var p1 = document.createElement('p'); el.before(p); // 插入元素節點 el.before('Hello'); // 插入文本節點 el.before(p, p1); // 插入多個元素節點 el.before(p, 'Hello'); // 插入元素節點和文本節點
  - .after() 方法用於在當前節點前面，插入一個或者多個同級節點。與當前節點擁有同一父元素。

ChildNode.replaceWith()
- 使用參數節點，替換當前節點。參數能夠是元素節點，也能夠是文本節點。
- ```
var span = document.createElement('span');
el.replaceWith(span); 
```

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。