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，我們一起飛！

.查詢節點

1.根據節點的層級查詢節點

1.childNodes

元素節點,文本節點,

2.children

元素節點

3.parentNode

獲取父節點

4.nextSibling

獲取下一個兄弟節點

有可能是文本節點

5.nextElementSibling

獲取下一個兄弟元素節點

6.previousSibling

獲取上一個兄弟節點

有可能是文本節點

7.previousElementSibling

獲取上一個兄弟元素節點

2.通過標簽名查詢節點 - 返回數組

document|elem.getElementsByTagName("標簽名");

document:整個文檔內查找

elem:某個元素內查找

3.通過元素的name屬性值查詢節點

document.getElementsByName("name屬性值");

返回值:包含指定name屬性值的元素的數組

4.通過元素的class值查詢節點

document|elem.getElementsByClassName("class");

返回:返回包含指定class屬性值的所有元素

2.增加節點

1.創建元素節點

語法:

var elem=document.createElement("元素名");

ex:

var div=document.createElement("div");

div.setAttribute("id","container");

div.innerHTML="動態創建的文本";

2.增加節點到網頁上

1.document.body.appendChild(elem);

向body中追加elem的新元素

2.parentNode.appendChild(elem);

向parentNode內部追加elem新元素

3.parentNode.insertBefore(newElem,oldElem)

將newElem元素插入到parentNode中oldElem元素之前

3.刪除節點

在DOM中,刪除節點的行為只能由父元素發起

parentNode.removeChild(elem);

刪除 parentNode 中的 elem 元素

4.事件

1.什么是事件

通常都是由用戶的行為來激發的操作

2.觸發事件的行為

所有的事件在綁定時,必須加 on

1.鼠標事件

1.click 事件

當鼠標單擊元素時觸發該事件

2.mouseover 事件

當鼠標移入進元素時的事件

3.mouseout 事件

當鼠標移出元素時的事件

4.mousemove 事件

當鼠標在元素內移動時的事件

2.鍵盤事件

1.keydown 事件

當鍵位按下時所激發的事件

2.keypress 事件

當鍵位按下時所激發的事件

3.keyup 事件

當鍵位抬起時所激發的事件

3.狀態改變事件

1.load 事件

當元素加載完成時所觸發的事件(body)

2.change 事件

當選項發生改變時所觸發的事件(select)

3.focus 事件

當元素獲取焦點時所觸發的事件(文本框類)

4.blur 事件

當元素失去焦點時所觸發的事件(文本框類)

5.submit 事件

當表單被提交時所觸發的事件(表單)

3.綁定的方式

1.在元素中綁定事件

<元素 on事件名=""></元素>

2.在js中動態的為元素綁定事件

語法:

DOM對象.on事件名=function(){

}

ex:

var main = document.getElementById("main");

main.onclick = function(){

}

注意：在JS動態綁定事件中,允許使用 this 來表示觸發當前事件的DOM元素

4.事件行為

1.狀態改變事件

1.load 事件

通常為 body 綁定 load 事件,目的是為了在所有內容都加載完成之后再實現一些初始化的操作

1. <body onload="函數()">

2.JS中動態綁定

window.onload = function(){

網頁加載完成后,要執行的操作

}

2.submit 事件

只有表單被提交時才會被觸發

注意:該事件需要一個boolean返回值來通知表單是否要繼續被提交.如果返回true,則可以提交表單.否則,阻止表單提交

JS中動態綁定:

表單對象.onsubmit = function(){

return true/false;

}

1.創建一個網頁,包含多個單選按鈕(name相同)

2.創建一個普通按鈕

3.單擊普通按鈕的時候

驗證多個單選按鈕中必須有一個被選中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p>
		<input type="radio" name="gender">男
		<input type="radio" name="gender">女
	</p>
	<button onclick="checkRadio()">驗證</button>
	<p>
		<input type="checkbox" id="chkAll" onclick="checkAll()">全選
		<input type="checkbox" name="hobby">吃
		<input type="checkbox" name="hobby">喝
		<input type="checkbox" name="hobby">玩
		<input type="checkbox" name="hobby">樂
	</p>
	<script src="common.js"></script>
	<script>
		
		function checkAll(){
			//先獲取 chkAll 的選中狀態
			var isChk = $("chkAll").checked;
			//獲取所有的 hobby 并循環,將所有的hobby的checked更改為isChk
			var all = document.getElementsByName("hobby");
			for(var i=0;i<all.length;i++){
				all[i].checked = isChk;
			}
		}
		function checkRadio(){
			//得到頁面中name=gender的所有的元素
			var arr=document.getElementsByName("gender");
			//聲明變量用于記錄 radio 的選中狀態
			var isChecked = false;
			for(var i=0;i<arr.length;i++){
				if(arr[i].checked){
					isChecked = true;
					break;
				}
			}
			if(isChecked){
				alert('通過');
			}else{
				alert('請選中一項');
			}
		}
	</script>
</body>
</html>

點擊按鈕時

1.先獲取三個文本框的值

2.創建兩個按鈕 - 刪除按鈕 , 修改按鈕

3.先創建四個td

將三個文本框的值追加到前三個td

將兩個按鈕追加到第四個td中

4.創建一個tr

將四個td追加到tr中

5.將 tr 追加到 table 中

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

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

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

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

在線咨詢

上一篇：如何把PDF轉換成HTML格式？教你一招
下一篇：HTML文檔常用元素匯總

您的項目需求

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

整合營銷服務商

JavaScript HTML DOM 元素（節點）

OM結構

練習

DOM

操作

創建節點

createElement

createTextNode

createDocumentFragment

createAttribute

獲取節點

querySelector

querySelectorAll

更新節點

innerHTML

innerText、textContent

style

添加節點

innerHTML

appendChild

insertBefore

setAttribute

刪除節點

您的項目需求