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

OM 節(jié)點(diǎn)

根據(jù) W3C 的 HTML DOM 標(biāo)準(zhǔn)，HTML 文檔中的所有內(nèi)容都是節(jié)點(diǎn)：

整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)
每個(gè) HTML 元素是元素節(jié)點(diǎn)
HTML 元素內(nèi)的文本是文本節(jié)點(diǎn)
每個(gè) HTML 屬性是屬性節(jié)點(diǎn)
注釋是注釋節(jié)點(diǎn)

HTML DOM 節(jié)點(diǎn)樹

HTML DOM 將 HTML 文檔視作樹結(jié)構(gòu)。這種結(jié)構(gòu)被稱為節(jié)點(diǎn)樹：

HTML DOM Tree 實(shí)例

通過 HTML DOM，樹中的所有節(jié)點(diǎn)均可通過 JavaScript 進(jìn)行訪問。所有 HTML 元素（節(jié)點(diǎn)）均可被修改，也可以創(chuàng)建或刪除節(jié)點(diǎn)。

節(jié)點(diǎn)父、子和同胞

節(jié)點(diǎn)樹中的節(jié)點(diǎn)彼此擁有層級(jí)關(guān)系。

父（parent）、子（child）和同胞（sibling）等術(shù)語用于描述這些關(guān)系。父節(jié)點(diǎn)擁有子節(jié)點(diǎn)。同級(jí)的子節(jié)點(diǎn)被稱為同胞（兄弟或姐妹）。

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

請(qǐng)看下面的 HTML 片段：

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

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

并且：

<html> 節(jié)點(diǎn)擁有兩個(gè)子節(jié)點(diǎn)：<head> 和 <body>
<head> 節(jié)點(diǎn)擁有一個(gè)子節(jié)點(diǎn)：<title> 節(jié)點(diǎn)
<title> 節(jié)點(diǎn)也擁有一個(gè)子節(jié)點(diǎn)：文本節(jié)點(diǎn) "DOM 教程"
<h1> 和 <p> 節(jié)點(diǎn)是同胞節(jié)點(diǎn)，同時(shí)也是 <body> 的子節(jié)點(diǎn)

并且：

<head> 元素是 <html> 元素的首個(gè)子節(jié)點(diǎn)
<body> 元素是 <html> 元素的最后一個(gè)子節(jié)點(diǎn)
<h1> 元素是 <body> 元素的首個(gè)子節(jié)點(diǎn)
<p> 元素是 <body> 元素的最后一個(gè)子節(jié)點(diǎn)

警告！

DOM 處理中的常見錯(cuò)誤是希望元素節(jié)點(diǎn)包含文本。

在本例中：<title>DOM 教程</title>，元素節(jié)點(diǎn) <title>，包含值為 "DOM 教程" 的文本節(jié)點(diǎn)。

可通過節(jié)點(diǎn)的 innerHTML 屬性來訪問文本節(jié)點(diǎn)的值。

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í)資料等推薦 - 知乎

在線咨詢

上一篇：web前臺(tái)小測(cè)試題
下一篇：中信銀行申請(qǐng)基于iText的支持生僻字轉(zhuǎn)換技術(shù)專利，解決生成含有生僻字的HTML轉(zhuǎn)換PDF時(shí)生僻字變?yōu)閬y碼的問題

您的項(xiàng)目需求

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

整合營銷服務(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)目需求

innerText、textContent