JavaScript HTML DOM 元素（節點）

創建新的 HTML 元素

如需向 HTML DOM 添加新元素，您必須首先創建該元素（元素節點），然后向一個已存在的元素追加該元素。

實例

<p id="p1">這是一個段落。</p>

<p id="p2">這是另一個段落。</p>

</div>

var para=document.createElement("p");

var node=document.createTextNode("這是一個新段落。");

para.appendChild(node);

var element=document.getElementById("div1");

element.appendChild(para);

</script>

例子解析：

這段代碼創建新的<p> 元素：

var para=document.createElement("p");

如需向 <p> 元素添加文本，您必須首先創建文本節點。這段代碼創建了一個文本節點：

var node=document.createTextNode("這是一個新段落。");

然后您必須向 <p> 元素追加這個文本節點：

para.appendChild(node);

最后您必須向一個已有的元素追加這個新元素。

這段代碼找到一個已有的元素：

var element=document.getElementById("div1");

以下代碼在已存在的元素后添加新元素：

element.appendChild(para);

刪除已有的 HTML 元素

以下代碼演示了如何刪除元素：

實例

<p id="p1">這是一個段落。</p>

<p id="p2">這是另一個段落。</p>

</div>

var parent=document.getElementById("div1");

var child=document.getElementById("p1");

parent.removeChild(child);

</script>

實例解析

這個 HTML 文檔含有擁有兩個子節點（兩個 <p> 元素）的 <div> 元素：

<p id="p1">這是一個段落。</p>

<p id="p2">這是另一個段落。</p>

</div>

找到 id="div1" 的元素：

var parent=document.getElementById("div1");

找到 id="p1" 的 <p> 元素：

var child=document.getElementById("p1");

從父元素中刪除子元素：

parent.removeChild(child);

	如果能夠在不引用父元素的情況下刪除某個元素，就太好了。不過很遺憾。DOM 需要清楚您需要刪除的元素，以及它的父元素。

這是常用的解決方案：找到您希望刪除的子元素，然后使用其 parentNode 屬性來找到父元素：

var child=document.getElementById("p1");

child.parentNode.removeChild(child);

HTML DOM 學習部分

在我們的 JavaScript 教程的 HTML DOM 部分，您已經學到了：

如何改變 HTML 元素的內容 (innerHTML)
如何改變 HTML 元素的樣式 (CSS)
如何對 HTML DOM 事件作出反應
如何添加或刪除 HTML 元素

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

OM 節點

根據 W3C 的 HTML DOM 標準，HTML 文檔中的所有內容都是節點：

整個文檔是一個文檔節點
每個 HTML 元素是元素節點
HTML 元素內的文本是文本節點
每個 HTML 屬性是屬性節點
注釋是注釋節點

HTML DOM 節點樹

HTML DOM 將 HTML 文檔視作樹結構。這種結構被稱為節點樹：

HTML DOM Tree 實例

通過 HTML DOM，樹中的所有節點均可通過 JavaScript 進行訪問。所有 HTML 元素（節點）均可被修改，也可以創建或刪除節點。

節點父、子和同胞

節點樹中的節點彼此擁有層級關系。

父（parent）、子（child）和同胞（sibling）等術語用于描述這些關系。父節點擁有子節點。同級的子節點被稱為同胞（兄弟或姐妹）。

在節點樹中，頂端節點被稱為根（root）
每個節點都有父節點、除了根（它沒有父節點）
一個節點可擁有任意數量的子
同胞是擁有相同父節點的節點
下面的圖片展示了節點樹的一部分，以及節點之間的關系：

請看下面的 HTML 片段：

<html>
  <head>
    <title>DOM 教程</title>
  </head>
  <body>
    <h1>DOM 第一課</h1>
    <p>Hello world!</p>
  </body>
</html>

從上面的 HTML 中：
<html> 節點沒有父節點；它是根節點
<head> 和 <body> 的父節點是 <html> 節點
文本節點 "Hello world!" 的父節點是 <p> 節點

并且：

<html> 節點擁有兩個子節點：<head> 和 <body>
<head> 節點擁有一個子節點：<title> 節點
<title> 節點也擁有一個子節點：文本節點 "DOM 教程"
<h1> 和 <p> 節點是同胞節點，同時也是 <body> 的子節點

并且：

<head> 元素是 <html> 元素的首個子節點
<body> 元素是 <html> 元素的最后一個子節點
<h1> 元素是 <body> 元素的首個子節點
<p> 元素是 <body> 元素的最后一個子節點

警告！

DOM 處理中的常見錯誤是希望元素節點包含文本。

在本例中：<title>DOM 教程</title>，元素節點 <title>，包含值為 "DOM 教程" 的文本節點。

可通過節點的 innerHTML 屬性來訪問文本節點的值。

OM結構

DOM 采用的是“樹形結構”，用“樹節點”的形式來表示頁面中的每一個元素。我們先看下面的一個例子。

<html>
  <head>
    <title><title>
    <meta charset="utf-8" />
  </head>
	<body>
      <h1>C語言中文網</h1>
			<p>C語言中文網一個……</p>
			<p>C語言中文網成立于……</p>
	</body>
</html>

對于上面這個 HTML 文檔，DOM 將其解析為圖 1 所示的樹形結構。

圖 1：DOM 樹

于HTML文檔被瀏覽器解析后就是一棵DOM樹，要改變HTML的結構，就需要通過JavaScript來操作DOM。

始終記住DOM是一個樹形結構。操作一個DOM節點實際上就是這么幾個操作：

更新：更新該DOM節點的內容，相當于更新了該DOM節點表示的HTML的內容；
遍歷：遍歷該DOM節點下的子節點，以便進行進一步操作；
添加：在該DOM節點下新增一個子節點，相當于動態增加了一個HTML節點；
刪除：將該節點從HTML中刪除，相當于刪掉了該DOM節點的內容以及它包含的所有子節點。

在操作一個DOM節點前，我們需要通過各種方式先拿到這個DOM節點。最常用的方法是document.getElementById()和document.getElementsByTagName()，以及CSS選擇器document.getElementsByClassName()。

由于ID在HTML文檔中是唯一的，所以document.getElementById()可以直接定位唯一的一個DOM節點。document.getElementsByTagName()和document.getElementsByClassName()總是返回一組DOM節點。要精確地選擇DOM，可以先定位父節點，再從父節點開始選擇，以縮小范圍。

例如：

// 返回ID為'test'的節點：
var test = document.getElementById('test');

// 先定位ID為'test-table'的節點，再返回其內部所有tr節點：
var trs = document.getElementById('test-table').getElementsByTagName('tr');

// 先定位ID為'test-div'的節點，再返回其內部所有class包含red的節點：
var reds = document.getElementById('test-div').getElementsByClassName('red');

// 獲取節點test下的所有直屬子節點:
var cs = test.children;

// 獲取節點test下第一個、最后一個子節點：
var first = test.firstElementChild;
var last = test.lastElementChild;

第二種方法是使用querySelector()和querySelectorAll()，需要了解selector語法，然后使用條件來獲取節點，更加方便：

// 通過querySelector獲取ID為q1的節點：
var q1 = document.querySelector('#q1');

// 通過querySelectorAll獲取q1節點內的符合條件的所有節點：
var ps = q1.querySelectorAll('div.highlighted > p');

注意：低版本的IE<8不支持querySelector和querySelectorAll。IE8僅有限支持。

嚴格地講，我們這里的DOM節點是指Element，但是DOM節點實際上是Node，在HTML中，Node包括Element、Comment、CDATA_SECTION等很多種，以及根節點Document類型，但是，絕大多數時候我們只關心Element，也就是實際控制頁面結構的Node，其他類型的Node忽略即可。根節點Document已經自動綁定為全局變量document。

練習

如下的HTML結構

<!-- HTML結構 -->
<div id="test-div">
<div class="c-red">
    <p id="test-p">JavaScript</p>
    <p>Java</p>
  </div>
  <div class="c-red c-green">
    <p>Python</p>
    <p>Ruby</p>
    <p>Swift</p>
  </div>
  <div class="c-green">
    <p>Scheme</p>
    <p>Haskell</p>
  </div>
</div>

請選擇出指定條件的節點：

'use strict';

// 測試:
if (!js || js.innerText !== 'JavaScript') {
    alert('選擇JavaScript失敗!');
} else if (!arr || arr.length !== 3 || !arr[0] || !arr[1] || !arr[2] || arr[0].innerText !== 'Python' || arr[1].innerText !== 'Ruby' || arr[2].innerText !== 'Swift') {
    console.log('選擇Python,Ruby,Swift失敗!');
} else if (!haskell || haskell.innerText !== 'Haskell') {
    console.log('選擇Haskell失敗!');
} else {
    console.log('測試通過!');
}

DOM

文檔對象模型 (DOM) 是 HTML 和 XML 文檔的編程接口

它提供了對文檔的結構化的表述，并定義了一種方式可以使從程序中對該結構進行訪問，從而改變文檔的結構，樣式和內容

任何 HTML或XML文檔都可以用 DOM表示為一個由節點構成的層級結構

節點分很多類型，每種類型對應著文檔中不同的信息和（或）標記，也都有自己不同的特性、數據和方法，而且與其他類型有某種關系，如下所示：

<html>
    <head>
        <title>Page</title>
    </head>
    <body>
        <p>Hello World!</p >
    </body>
</html>

DOM像原子包含著亞原子微粒那樣，也有很多類型的DOM節點包含著其他類型的節點。接下來我們先看看其中的三種：

<div>
    <p title="title">
        content
    </p >
</div>

上述結構中，div、p就是元素節點，content就是文本節點，title就是屬性節點

操作

日常前端開發，我們都離不開DOM操作

在以前，我們使用Jquery，zepto等庫來操作DOM，之后在vue，Angular，React等框架出現后，我們通過操作數據來控制DOM（絕大多數時候），越來越少的去直接操作DOM

但這并不代表原生操作不重要。相反，DOM操作才能有助于我們理解框架深層的內容

下面就來分析DOM常見的操作，主要分為：

創建節點
查詢節點
更新節點
添加節點
刪除節點

創建節點

// 創建一個html元素，這里以創建h3元素為例
document.createElement("h3")

// 創建一個文本節點；
document.createTextNode(String);

// 創建一個屬性節點，這里以創建class屬性為例
document.createAttribute("class");

createElement

創建新元素，接受一個參數，即要創建元素的標簽名

const divEl = document.createElement("div");

createTextNode

創建一個文本節點

const textEl = document.createTextNode("content");

createDocumentFragment

用來創建一個文檔碎片，它表示一種輕量級的文檔，主要是用來存儲臨時節點，然后把文檔碎片的內容一次性添加到DOM中

const fragment = document.createDocumentFragment();

當請求把一個DocumentFragment 節點插入文檔樹時，插入的不是 DocumentFragment自身，而是它的所有子孫節點

createAttribute

創建屬性節點，可以是自定義屬性

const dataAttribute = document.createAttribute('custom');
consle.log(dataAttribute);

獲取節點

// 通過id號來獲取元素，返回一個元素對象
document.getElementById(idName) 
      
// 通過name屬性獲取id號，返回元素對象數組 
document.getElementsByName(name)  
   
// 通過class來獲取元素，返回元素對象數組
document.getElementsByClassName(className)   

// 通過標簽名獲取元素，返回元素對象數組
document.getElementsByTagName(tagName) 

//不需要兼容IE      
document.querySelector('#idxxx')

document.querySelectorAll('.red')[0]

document.querySelectorAll('#idxxx')[0]

querySelector

傳入任何有效的css 選擇器，即可選中單個 DOM元素（首個）：

document.querySelector('.element')
document.querySelector('#element')
document.querySelector('div')
document.querySelector('[name="username"]')
document.querySelector('div + p > span')

如果頁面上沒有指定的元素時，返回 null

querySelectorAll

返回一個包含節點子樹內所有與之相匹配的Element節點列表，如果沒有相匹配的，則返回一個空節點列表

const notLive = document.querySelectorAll("p");

需要注意的是，該方法返回的是一個 NodeList的靜態實例，它是一個靜態的“快照”，而非“實時”的查詢

關于獲取DOM元素的方法還有如下，就不一一述說

document.getElementById('id屬性值');返回擁有指定id的對象的引用
document.getElementsByClassName('class屬性值');返回擁有指定class的對象集合
document.getElementsByTagName('標簽名');返回擁有指定標簽名的對象集合
document.getElementsByName('name屬性值'); 返回擁有指定名稱的對象結合
document/element.querySelector('CSS選擇器');  僅返回第一個匹配的元素
document/element.querySelectorAll('CSS選擇器');   返回所有匹配的元素
document.documentElement;  獲取頁面中的HTML標簽
document.body; 獲取頁面中的BODY標簽
document.all[''];  獲取頁面中的所有元素節點的對象集合型

除此之外，每個DOM元素還有parentNode、childNodes、firstChild、lastChild、nextSibling、previousSibling屬性，關系圖如下圖所示

更新節點

innerHTML

不但可以修改一個DOM節點的文本內容，還可以直接通過HTML片段修改DOM節點內部的子樹

// 獲取<p id="p">...</p >
var p = document.getElementById('p');
// 設置文本為abc:
p.innerHTML = 'ABC'; // <p id="p">ABC</p >
// 設置HTML:
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
// <p>...</p >的內部結構已修改

innerText、textContent

自動對字符串進行HTML編碼，保證無法設置任何HTML標簽

// 獲取<p id="p-id">...</p >
var p = document.getElementById('p-id');
// 設置文本:
p.innerText = '<script>alert("Hi")</script>';
// HTML被自動編碼，無法設置一個<script>節點:
// <p id="p-id"><script>alert("Hi")</script></p >

兩者的區別在于讀取屬性時，innerText不返回隱藏元素的文本，而textContent返回所有文本

style

DOM節點的style屬性對應所有的CSS，可以直接獲取或設置。遇到-需要轉化為駝峰命名

// 獲取<p id="p-id">...</p >
const p = document.getElementById('p-id');
// 設置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px'; // 駝峰命名
p.style.paddingTop = '2em';

添加節點

// 創建一個html元素，這里以創建h3元素為例
document.createElement("h3")

// 創建一個文本節點；
document.createTextNode(String);

// 創建一個屬性節點，這里以創建class屬性為例
document.createAttribute("class");
// 往element內部最后面添加一個節點，參數是節點類型
element.appendChild(Node);

// 在element內部的中在existingNode前面插入newNode
elelment.insertBefore(newNode,existingNode);

獲取當前元素的同級元素

// 返回當前元素的下一個同級元素 沒有就返回null
element.nextSibling

// 返回當前元素上一個同級元素 沒有就返回 null
element.previousSibling

獲取當前元素的文本

// 返回元素的所有文本，包括html代碼
element.innerHTML

// 返回當前元素的自身及子代所有文本值，只是文本內容，不包括html代碼
element.innerText

獲取當前節點的節點類型

// 返回節點的類型,數字形式（1-12）
// 常見幾個1：元素節點，2：屬性節點，3：文本節點。
node.nodeType

設置樣式

// 設置元素的樣式時使用style
element.style.color=“#eea”;

innerHTML

如果這個DOM節點是空的，例如，<div></div>，那么，直接使用innerHTML = '<span>child</span>'就可以修改DOM節點的內容，相當于添加了新的DOM節點

如果這個DOM節點不是空的，那就不能這么做，因為innerHTML會直接替換掉原來的所有子節點

appendChild

把一個子節點添加到父節點的最后一個子節點

舉個例子

<!-- HTML結構 -->
<p id="js">JavaScript</p >
<div id="list">
    <p id="java">Java</p >
    <p id="python">Python</p >
    <p id="scheme">Scheme</p >
</div>

添加一個p元素

const js = document.getElementById('js')
js.innerHTML = "JavaScript"
const list = document.getElementById('list');
list.appendChild(js);

現在HTML結構變成了下面

<!-- HTML結構 -->
<div id="list">
    <p id="java">Java</p >
    <p id="python">Python</p >
    <p id="scheme">Scheme</p >
    <p id="js">JavaScript</p >  <!-- 添加元素 -->
</div>

上述代碼中，我們是獲取DOM元素后再進行添加操作，這個js節點是已經存在當前文檔樹中，因此這個節點首先會從原先的位置刪除，再插入到新的位置

如果動態添加新的節點，則先創建一個新的節點，然后插入到指定的位置

const list = document.getElementById('list'),
const haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);

insertBefore

把子節點插入到指定的位置，使用方法如下：

parentElement.insertBefore(newElement, referenceElement)

子節點會插入到referenceElement之前

setAttribute

// 括號傳入屬性名，返回對應屬性的屬性值
element.getAttribute(attributeName)

// 傳入屬性名及設置的值
element.setAttribute(attributeName,attributeValue)

在指定元素中添加一個屬性節點，如果元素中已有該屬性改變屬性值

const div = document.getElementById('id')
div.setAttribute('class', 'white');//第一個參數屬性名，第二個參數屬性值。

刪除節點

刪除一個節點，首先要獲得該節點本身以及它的父節點，然后，調用父節點的removeChild把自己刪掉

// 拿到待刪除節點:
const self = document.getElementById('to-be-removed');
// 拿到父節點:
const parent = self.parentElement;
// 刪除:
const removed = parent.removeChild(self);
removed === self; // true

刪除后的節點雖然不在文檔樹中了，但其實它還在內存中，可以隨時再次被添加到別的位置

給大家分享我收集整理的各種學習資料，前端小白交學習流程，入門教程等回答-下面是學習資料參考。

前端學習交流、自學、學習資料等推薦 - 知乎

在線咨詢

上一篇：中信銀行申請基于iText的支持生僻字轉換技術專利，解決生成含有生僻字的HTML轉換PDF時生僻字變為亂碼的問題
下一篇：html中如何寫“返回頂部按鈕”？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript HTML DOM 元素（節點）

OM結構

練習

DOM

操作

創建節點

createElement

createTextNode

createDocumentFragment

createAttribute

獲取節點

querySelector

querySelectorAll

更新節點

innerHTML

innerText、textContent

style

添加節點

innerHTML

appendChild

insertBefore

setAttribute

刪除節點

您的項目需求