JavaScript HTML DOM 元素（節(jié)點(diǎn)）

創(chuàng)建新的 HTML 元素

如需向 HTML DOM 添加新元素，您必須首先創(chuàng)建該元素（元素節(jié)點(diǎn)），然后向一個(gè)已存在的元素追加該元素。

實(shí)例

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

</div>

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

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

para.appendChild(node);

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

element.appendChild(para);

</script>

例子解析：

這段代碼創(chuàng)建新的<p> 元素：

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

如需向 <p> 元素添加文本，您必須首先創(chuàng)建文本節(jié)點(diǎn)。這段代碼創(chuàng)建了一個(gè)文本節(jié)點(diǎn)：

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

然后您必須向 <p> 元素追加這個(gè)文本節(jié)點(diǎn)：

para.appendChild(node);

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

這段代碼找到一個(gè)已有的元素：

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

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

element.appendChild(para);

刪除已有的 HTML 元素

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

實(shí)例

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

</div>

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

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

parent.removeChild(child);

</script>

實(shí)例解析

這個(gè) HTML 文檔含有擁有兩個(gè)子節(jié)點(diǎn)（兩個(gè) <p> 元素）的 <div> 元素：

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

</div>

找到 id="div1" 的元素：

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

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

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

從父元素中刪除子元素：

parent.removeChild(child);

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

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

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

child.parentNode.removeChild(child);

HTML DOM 學(xué)習(xí)部分

在我們的 JavaScript 教程的 HTML DOM 部分，您已經(jīng)學(xué)到了：

如何改變 HTML 元素的內(nèi)容 (innerHTML)
如何改變 HTML 元素的樣式 (CSS)
如何對(duì) HTML DOM 事件作出反應(yīng)
如何添加或刪除 HTML 元素

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

.查詢節(jié)點(diǎn)

1.根據(jù)節(jié)點(diǎn)的層級(jí)查詢節(jié)點(diǎn)

1.childNodes

元素節(jié)點(diǎn),文本節(jié)點(diǎn),

2.children

元素節(jié)點(diǎn)

3.parentNode

獲取父節(jié)點(diǎn)

4.nextSibling

獲取下一個(gè)兄弟節(jié)點(diǎn)

有可能是文本節(jié)點(diǎn)

5.nextElementSibling

獲取下一個(gè)兄弟元素節(jié)點(diǎn)

6.previousSibling

獲取上一個(gè)兄弟節(jié)點(diǎn)

有可能是文本節(jié)點(diǎn)

7.previousElementSibling

獲取上一個(gè)兄弟元素節(jié)點(diǎn)

2.通過標(biāo)簽名查詢節(jié)點(diǎn) - 返回?cái)?shù)組

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

document:整個(gè)文檔內(nèi)查找

elem:某個(gè)元素內(nèi)查找

3.通過元素的name屬性值查詢節(jié)點(diǎn)

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

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

4.通過元素的class值查詢節(jié)點(diǎn)

document|elem.getElementsByClassName("class");

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

2.增加節(jié)點(diǎn)

1.創(chuàng)建元素節(jié)點(diǎn)

語法:

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

ex:

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

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

div.innerHTML="動(dòng)態(tài)創(chuàng)建的文本";

2.增加節(jié)點(diǎn)到網(wǎng)頁上

1.document.body.appendChild(elem);

向body中追加elem的新元素

2.parentNode.appendChild(elem);

向parentNode內(nèi)部追加elem新元素

3.parentNode.insertBefore(newElem,oldElem)

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

3.刪除節(jié)點(diǎn)

在DOM中,刪除節(jié)點(diǎn)的行為只能由父元素發(fā)起

parentNode.removeChild(elem);

刪除 parentNode 中的 elem 元素

4.事件

1.什么是事件

通常都是由用戶的行為來激發(fā)的操作

2.觸發(fā)事件的行為

所有的事件在綁定時(shí),必須加 on

1.鼠標(biāo)事件

1.click 事件

當(dāng)鼠標(biāo)單擊元素時(shí)觸發(fā)該事件

2.mouseover 事件

當(dāng)鼠標(biāo)移入進(jìn)元素時(shí)的事件

3.mouseout 事件

當(dāng)鼠標(biāo)移出元素時(shí)的事件

4.mousemove 事件

當(dāng)鼠標(biāo)在元素內(nèi)移動(dòng)時(shí)的事件

2.鍵盤事件

1.keydown 事件

當(dāng)鍵位按下時(shí)所激發(fā)的事件

2.keypress 事件

當(dāng)鍵位按下時(shí)所激發(fā)的事件

3.keyup 事件

當(dāng)鍵位抬起時(shí)所激發(fā)的事件

3.狀態(tài)改變事件

1.load 事件

當(dāng)元素加載完成時(shí)所觸發(fā)的事件(body)

2.change 事件

當(dāng)選項(xiàng)發(fā)生改變時(shí)所觸發(fā)的事件(select)

3.focus 事件

當(dāng)元素獲取焦點(diǎn)時(shí)所觸發(fā)的事件(文本框類)

4.blur 事件

當(dāng)元素失去焦點(diǎn)時(shí)所觸發(fā)的事件(文本框類)

5.submit 事件

當(dāng)表單被提交時(shí)所觸發(fā)的事件(表單)

3.綁定的方式

1.在元素中綁定事件

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

2.在js中動(dòng)態(tài)的為元素綁定事件

語法:

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

}

ex:

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

main.onclick = function(){

}

注意：在JS動(dòng)態(tài)綁定事件中,允許使用 this 來表示觸發(fā)當(dāng)前事件的DOM元素

4.事件行為

1.狀態(tài)改變事件

1.load 事件

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

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

2.JS中動(dòng)態(tài)綁定

window.onload = function(){

網(wǎng)頁加載完成后,要執(zhí)行的操作

}

2.submit 事件

只有表單被提交時(shí)才會(huì)被觸發(fā)

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

JS中動(dòng)態(tài)綁定:

表單對(duì)象.onsubmit = function(){

return true/false;

}

1.創(chuàng)建一個(gè)網(wǎng)頁,包含多個(gè)單選按鈕(name相同)

2.創(chuàng)建一個(gè)普通按鈕

3.單擊普通按鈕的時(shí)候

驗(yàn)證多個(gè)單選按鈕中必須有一個(gè)被選中

<!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()">驗(yàn)證</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 的選中狀態(tài)
			var isChk = $("chkAll").checked;
			//獲取所有的 hobby 并循環(huán),將所有的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 的選中狀態(tài)
			var isChecked = false;
			for(var i=0;i<arr.length;i++){
				if(arr[i].checked){
					isChecked = true;
					break;
				}
			}
			if(isChecked){
				alert('通過');
			}else{
				alert('請(qǐng)選中一項(xiàng)');
			}
		}
	</script>
</body>
</html>

點(diǎn)擊按鈕時(shí)

1.先獲取三個(gè)文本框的值

2.創(chuàng)建兩個(gè)按鈕 - 刪除按鈕 , 修改按鈕

3.先創(chuàng)建四個(gè)td

將三個(gè)文本框的值追加到前三個(gè)td

將兩個(gè)按鈕追加到第四個(gè)td中

4.創(chuàng)建一個(gè)tr

將四個(gè)td追加到tr中

5.將 tr 追加到 table 中

OM結(jié)構(gòu)

DOM 采用的是“樹形結(jié)構(gòu)”，用“樹節(jié)點(diǎn)”的形式來表示頁面中的每一個(gè)元素。我們先看下面的一個(gè)例子。

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

對(duì)于上面這個(gè) HTML 文檔，DOM 將其解析為圖 1 所示的樹形結(jié)構(gòu)。

圖 1：DOM 樹

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

始終記住DOM是一個(gè)樹形結(jié)構(gòu)。操作一個(gè)DOM節(jié)點(diǎn)實(shí)際上就是這么幾個(gè)操作：

更新：更新該DOM節(jié)點(diǎn)的內(nèi)容，相當(dāng)于更新了該DOM節(jié)點(diǎn)表示的HTML的內(nèi)容；
遍歷：遍歷該DOM節(jié)點(diǎn)下的子節(jié)點(diǎn)，以便進(jìn)行進(jìn)一步操作；
添加：在該DOM節(jié)點(diǎn)下新增一個(gè)子節(jié)點(diǎn)，相當(dāng)于動(dòng)態(tài)增加了一個(gè)HTML節(jié)點(diǎn)；
刪除：將該節(jié)點(diǎn)從HTML中刪除，相當(dāng)于刪掉了該DOM節(jié)點(diǎn)的內(nèi)容以及它包含的所有子節(jié)點(diǎn)。

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

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

例如：

// 返回ID為'test'的節(jié)點(diǎn)：
var test = document.getElementById('test');

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

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

// 獲取節(jié)點(diǎn)test下的所有直屬子節(jié)點(diǎn):
var cs = test.children;

// 獲取節(jié)點(diǎn)test下第一個(gè)、最后一個(gè)子節(jié)點(diǎn)：
var first = test.firstElementChild;
var last = test.lastElementChild;

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

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

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

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

嚴(yán)格地講，我們這里的DOM節(jié)點(diǎn)是指Element，但是DOM節(jié)點(diǎn)實(shí)際上是Node，在HTML中，Node包括Element、Comment、CDATA_SECTION等很多種，以及根節(jié)點(diǎn)Document類型，但是，絕大多數(shù)時(shí)候我們只關(guān)心Element，也就是實(shí)際控制頁面結(jié)構(gòu)的Node，其他類型的Node忽略即可。根節(jié)點(diǎn)Document已經(jīng)自動(dòng)綁定為全局變量document。

練習(xí)

如下的HTML結(jié)構(gòu)

<!-- HTML結(jié)構(gòu) -->
<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>

請(qǐng)選擇出指定條件的節(jié)點(diǎn)：

'use strict';

// 測(cè)試:
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('測(cè)試通過!');
}

DOM

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

它提供了對(duì)文檔的結(jié)構(gòu)化的表述，并定義了一種方式可以使從程序中對(duì)該結(jié)構(gòu)進(jìn)行訪問，從而改變文檔的結(jié)構(gòu)，樣式和內(nèi)容

任何 HTML或XML文檔都可以用 DOM表示為一個(gè)由節(jié)點(diǎn)構(gòu)成的層級(jí)結(jié)構(gòu)

節(jié)點(diǎn)分很多類型，每種類型對(duì)應(yīng)著文檔中不同的信息和（或）標(biāo)記，也都有自己不同的特性、數(shù)據(jù)和方法，而且與其他類型有某種關(guān)系，如下所示：

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

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

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

上述結(jié)構(gòu)中，div、p就是元素節(jié)點(diǎn)，content就是文本節(jié)點(diǎn)，title就是屬性節(jié)點(diǎn)

操作

日常前端開發(fā)，我們都離不開DOM操作

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

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

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

創(chuàng)建節(jié)點(diǎn)
查詢節(jié)點(diǎn)
更新節(jié)點(diǎn)
添加節(jié)點(diǎn)
刪除節(jié)點(diǎn)

創(chuàng)建節(jié)點(diǎn)

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

// 創(chuàng)建一個(gè)文本節(jié)點(diǎn)；
document.createTextNode(String);

// 創(chuàng)建一個(gè)屬性節(jié)點(diǎn)，這里以創(chuàng)建class屬性為例
document.createAttribute("class");

createElement

創(chuàng)建新元素，接受一個(gè)參數(shù)，即要?jiǎng)?chuàng)建元素的標(biāo)簽名

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

createTextNode

創(chuàng)建一個(gè)文本節(jié)點(diǎn)

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

createDocumentFragment

用來創(chuàng)建一個(gè)文檔碎片，它表示一種輕量級(jí)的文檔，主要是用來存儲(chǔ)臨時(shí)節(jié)點(diǎn)，然后把文檔碎片的內(nèi)容一次性添加到DOM中

const fragment = document.createDocumentFragment();

當(dāng)請(qǐng)求把一個(gè)DocumentFragment 節(jié)點(diǎn)插入文檔樹時(shí)，插入的不是 DocumentFragment自身，而是它的所有子孫節(jié)點(diǎn)

createAttribute

創(chuàng)建屬性節(jié)點(diǎn)，可以是自定義屬性

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

獲取節(jié)點(diǎn)

// 通過id號(hào)來獲取元素，返回一個(gè)元素對(duì)象
document.getElementById(idName) 
      
// 通過name屬性獲取id號(hào)，返回元素對(duì)象數(shù)組 
document.getElementsByName(name)  
   
// 通過class來獲取元素，返回元素對(duì)象數(shù)組
document.getElementsByClassName(className)   

// 通過標(biāo)簽名獲取元素，返回元素對(duì)象數(shù)組
document.getElementsByTagName(tagName) 

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

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

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

querySelector

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

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

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

querySelectorAll

返回一個(gè)包含節(jié)點(diǎn)子樹內(nèi)所有與之相匹配的Element節(jié)點(diǎn)列表，如果沒有相匹配的，則返回一個(gè)空節(jié)點(diǎn)列表

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

需要注意的是，該方法返回的是一個(gè) NodeList的靜態(tài)實(shí)例，它是一個(gè)靜態(tài)的“快照”，而非“實(shí)時(shí)”的查詢

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

document.getElementById('id屬性值');返回?fù)碛兄付╥d的對(duì)象的引用
document.getElementsByClassName('class屬性值');返回?fù)碛兄付╟lass的對(duì)象集合
document.getElementsByTagName('標(biāo)簽名');返回?fù)碛兄付?biāo)簽名的對(duì)象集合
document.getElementsByName('name屬性值'); 返回?fù)碛兄付Q的對(duì)象結(jié)合
document/element.querySelector('CSS選擇器');  僅返回第一個(gè)匹配的元素
document/element.querySelectorAll('CSS選擇器');   返回所有匹配的元素
document.documentElement;  獲取頁面中的HTML標(biāo)簽
document.body; 獲取頁面中的BODY標(biāo)簽
document.all[''];  獲取頁面中的所有元素節(jié)點(diǎn)的對(duì)象集合型

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

更新節(jié)點(diǎn)

innerHTML

不但可以修改一個(gè)DOM節(jié)點(diǎn)的文本內(nèi)容，還可以直接通過HTML片段修改DOM節(jié)點(diǎn)內(nèi)部的子樹

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

innerText、textContent

自動(dòng)對(duì)字符串進(jìn)行HTML編碼，保證無法設(shè)置任何HTML標(biāo)簽

// 獲取<p id="p-id">...</p >
var p = document.getElementById('p-id');
// 設(shè)置文本:
p.innerText = '<script>alert("Hi")</script>';
// HTML被自動(dòng)編碼，無法設(shè)置一個(gè)<script>節(jié)點(diǎn):
// <p id="p-id"><script>alert("Hi")</script></p >

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

style

DOM節(jié)點(diǎn)的style屬性對(duì)應(yīng)所有的CSS，可以直接獲取或設(shè)置。遇到-需要轉(zhuǎn)化為駝峰命名

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

添加節(jié)點(diǎn)

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

// 創(chuàng)建一個(gè)文本節(jié)點(diǎn)；
document.createTextNode(String);

// 創(chuàng)建一個(gè)屬性節(jié)點(diǎn)，這里以創(chuàng)建class屬性為例
document.createAttribute("class");
// 往element內(nèi)部最后面添加一個(gè)節(jié)點(diǎn)，參數(shù)是節(jié)點(diǎn)類型
element.appendChild(Node);

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

獲取當(dāng)前元素的同級(jí)元素

// 返回當(dāng)前元素的下一個(gè)同級(jí)元素 沒有就返回null
element.nextSibling

// 返回當(dāng)前元素上一個(gè)同級(jí)元素 沒有就返回 null
element.previousSibling

獲取當(dāng)前元素的文本

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

// 返回當(dāng)前元素的自身及子代所有文本值，只是文本內(nèi)容，不包括html代碼
element.innerText

獲取當(dāng)前節(jié)點(diǎn)的節(jié)點(diǎn)類型

// 返回節(jié)點(diǎn)的類型,數(shù)字形式（1-12）
// 常見幾個(gè)1：元素節(jié)點(diǎn)，2：屬性節(jié)點(diǎn)，3：文本節(jié)點(diǎn)。
node.nodeType

設(shè)置樣式

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

innerHTML

如果這個(gè)DOM節(jié)點(diǎn)是空的，例如，<div></div>，那么，直接使用innerHTML = '<span>child</span>'就可以修改DOM節(jié)點(diǎn)的內(nèi)容，相當(dāng)于添加了新的DOM節(jié)點(diǎn)

如果這個(gè)DOM節(jié)點(diǎn)不是空的，那就不能這么做，因?yàn)?/span>innerHTML會(huì)直接替換掉原來的所有子節(jié)點(diǎn)

appendChild

把一個(gè)子節(jié)點(diǎn)添加到父節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)

舉個(gè)例子

<!-- HTML結(jié)構(gòu) -->
<p id="js">JavaScript</p >
<div id="list">
    <p id="java">Java</p >
    <p id="python">Python</p >
    <p id="scheme">Scheme</p >
</div>

添加一個(gè)p元素

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

現(xiàn)在HTML結(jié)構(gòu)變成了下面

<!-- HTML結(jié)構(gòu) -->
<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元素后再進(jìn)行添加操作，這個(gè)js節(jié)點(diǎn)是已經(jīng)存在當(dāng)前文檔樹中，因此這個(gè)節(jié)點(diǎn)首先會(huì)從原先的位置刪除，再插入到新的位置

如果動(dòng)態(tài)添加新的節(jié)點(diǎn)，則先創(chuàng)建一個(gè)新的節(jié)點(diǎn)，然后插入到指定的位置

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

insertBefore

把子節(jié)點(diǎn)插入到指定的位置，使用方法如下：

parentElement.insertBefore(newElement, referenceElement)

子節(jié)點(diǎn)會(huì)插入到referenceElement之前

setAttribute

// 括號(hào)傳入屬性名，返回對(duì)應(yīng)屬性的屬性值
element.getAttribute(attributeName)

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

在指定元素中添加一個(gè)屬性節(jié)點(diǎn)，如果元素中已有該屬性改變屬性值

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

刪除節(jié)點(diǎn)

刪除一個(gè)節(jié)點(diǎn)，首先要獲得該節(jié)點(diǎn)本身以及它的父節(jié)點(diǎn)，然后，調(diào)用父節(jié)點(diǎn)的removeChild把自己刪掉

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

刪除后的節(jié)點(diǎn)雖然不在文檔樹中了，但其實(shí)它還在內(nèi)存中，可以隨時(shí)再次被添加到別的位置

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

前端學(xué)習(xí)交流、自學(xué)、學(xué)習(xí)資料等推薦 - 知乎

在線咨詢

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

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

JavaScript HTML DOM 元素（節(jié)點(diǎn)）

OM結(jié)構(gòu)

練習(xí)

DOM

操作

創(chuàng)建節(jié)點(diǎn)

createElement

createTextNode

createDocumentFragment

createAttribute

獲取節(jié)點(diǎn)

querySelector

querySelectorAll

更新節(jié)點(diǎn)

innerHTML

innerText、textContent

style

添加節(jié)點(diǎn)

innerHTML

appendChild

insertBefore

setAttribute

刪除節(jié)點(diǎn)

您的項(xiàng)目需求