原生JS 操做 DOM

時間 2019-11-16

標籤原生 dom 欄目 JavaScript 简体版

原文原文鏈接

前端開發始終繞不過的就是操做DOM，在之前，咱們使用Jquery，zepto等庫來操做DOM，以後在vue，Angular，React等框架出現後，咱們經過操做數據來控制DOM（絕大多數時候），愈來愈少的去直接操做DOM，更不用說用原生的JS來操做DOM了。css

可是並非全部時候都必定要引入這些庫，對於基礎的JS操做DOM的一些方法，仍是要有些瞭解的。這裏就算是回顧一下JS那些熟悉卻也陌生的DOM操做函數。前端

查詢

按照ID查詢

document.getElementById(id) // 兼容最好vue

// demo
// HTMl
<body>
  <div id="main">
    <div id="content"></div>
  </div>
</body>

// Script
const mainDom = document.getElementById('main');

const contentDom = document.getElementById('content');
複製代碼

按照class查詢

element.getElementsByClassName // ie9+
element.querySelectorAll // ie8
遍歷 // ie7-node

// demo
// HTMl
<body>
  <div id="main">
    <div id="content">
      <p class="info test">info1</p>
      <p class="info">info2</p>
      <p class="info">info3</p>
    </div>
  </div>
</body>

// Script
const mainDom = document.getElementById('main');
const infoDomList1 = mainDom.querySelectorAll('.info.test');
const infoDomList2 = mainDom.getElementsByClassName('info test');
複製代碼

按照Tag查詢

element.getElementsByTagName // ie6+jquery

// demo
// HTMl
<body>
  <div id="main">
    <div id="content">
      <p class="info test">info1</p>
      <p class="info">info2</p>
      <p class="info">info3</p>
    </div>
  </div>
</body>

// Script
const divDom = document.getElementsByTagName('div');
const pDom = divDom[0].getElementsByTagName('p');
複製代碼

按照屬性查詢

element.querySelector //ie8+
element.querySelectorAll() //ie8+
querySelector返回返回的是單個DOM元素，querySelectorAll返回NodeList瀏覽器

querySelector的語法很相似jquery裏面的選擇器，querySelector和querySelectorAll的使用方法是同樣，因此下面的一些說法都是適用於兩個。bash

// demo
// HTMl
<body>
  <div id="main">
    <div id="content">
      <p class="info test">info1</p>
      <p class="info">info2</p>
      <p class="info">info3</p>
    </div>
  </div>
</body>

// Script
const infoDom = document.querySelectorAll('.info');
const infoDom2 = document.querySelectorAll('.info:not(.test)');
複製代碼

querySelectorAll 和 querySelector 在子查詢下和jquery不是同樣的，詳見DOM元素querySelectorAll可能讓你意外的特性表現簡單的說就是document.querySelector("#my-id").querySelectorAll("div div");，直接感受是查詢#my-id的子元素下符合div div的dom，其實不是，而是#my-id的子元素中，同時也符合在全局範圍內的div div的dom。app

獲取父元素

element.parentNode // 基本都兼容框架

獲取子元素

element.childNodes // 基本都兼容dom

element.childNodes不止會獲取到DOM，也會獲取到文字等，只有當nodeType === 1時才表示DOM。

獲取兄弟節點

獲取前面的兄弟節點

element.previousSibling //基本都兼容

獲取全部前面的兄弟節點就是遍歷previousSibling, 直到null。

Gecko內核的瀏覽器會在源代碼中標籤內部有空白符的地方插入一個文本結點到文檔中.所以,使用諸如 Node.firstChild 和 Node.previousSibling 之類的方法可能會引用到一個空白符文本節點, 而不是使用者所預期獲得的節點.

獲取後面的兄弟節點

element.nextSibling //基本都兼容

獲取全部和注意點都和previousSibling同樣

DOM操做

建立DOM

document.createElement(tagName)

新增DOM

添加到節點的子節點的最後 append

paranetElement.appendChild(child);

添加到節點的前面

paranetElement.insertBefore(newElement, Element)

經過insertBefore方法能夠將newElement插入到Element前面，若是Element是null則將newElement插入到paranetElement的尾部。

若是newElement是一個已經存在在文檔中的DOM, insertBefore則會表現爲移動該DOM(將會保留全部的事件)。

添加到節點的後面

沒有這個函數 😶 可使用 insertBefore 方法和 nextSibling 來模擬它。

parentDiv.insertBefore(sp1, sp2.nextSibling);
複製代碼

若是sp2沒有下一個節點，則它確定是最後一個節點，則sp2.nextSibling返回null，且sp1被插入到子節點列表的最後面（即sp2後面）

詳見Node.insertBefore()

修改DOM

修改DOM的文案

Element.innerHTML // 獲取標籤內的全部內容 Element.innerText // 只獲取標籤內的文字內容，不包括標籤

修改css

element.style.cssAttribute

修改屬性

element.setAttribute()
element.removeAttribute()
element.className

刪除DOM

paranetElement.removeChild(element)

清空子節點

沒有專門的函數，能夠遍歷removeChild來實現

var element = document.getElementById("top");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}
複製代碼

結尾

關於DOM的操做，經常使用的暫時只想到這麼多，之後想到了，再慢慢補充

相關標籤/搜索

每日一句

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