一、什么是節(jié)點(diǎn)
DOM模型是樹狀結(jié)構(gòu)模型，二組成這棵樹的就是一個(gè)個(gè)點(diǎn)，在網(wǎng)絡(luò)術(shù)語中稱之為節(jié)點(diǎn)。
節(jié)點(diǎn)是一個(gè)模型中最基本的組成單位。DOM模型是由一個(gè)個(gè)節(jié)點(diǎn)組成的，DOM節(jié)點(diǎn)也有其不同的類型。
二、節(jié)點(diǎn)類型
DOM節(jié)點(diǎn)分為5種類型：
- 文檔節(jié)點(diǎn)（就是整個(gè)HTML文檔，也就是document對象）
- 元素節(jié)點(diǎn)
- 注釋節(jié)點(diǎn)（在HTML文檔中寫的注釋）
- 屬性節(jié)點(diǎn)
- 文本節(jié)點(diǎn)
1、元素節(jié)點(diǎn)
我們看到的一個(gè)個(gè)標(biāo)簽元素在DOM節(jié)點(diǎn)樹中就是元素節(jié)點(diǎn)，它是我們操作節(jié)點(diǎn)的核心，即使我們要操作屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)，也要先找到它們的元素節(jié)點(diǎn)
DOM中element對象的三個(gè)屬性：
- nodeType屬性可以顯示節(jié)點(diǎn)的類型 1表示元素節(jié)點(diǎn) 2表示屬性節(jié)點(diǎn) 3表示文本節(jié)點(diǎn)
- nodeName屬性可以顯示節(jié)點(diǎn)的名字，顯示的名字是大寫形式
- nodevalue屬性可以顯示節(jié)點(diǎn)的值，元素節(jié)點(diǎn)沒有值，顯示null
2、屬性節(jié)點(diǎn)
// 每個(gè)標(biāo)簽元素都有自己的一些屬性，這些屬性就是屬性節(jié)點(diǎn)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知數(shù)SEO_專注搜索引擎優(yōu)化和品牌推廣</title>
</head>
<body>
<h2>讓推廣顯而易見</h2>
<p id="node">沒有推廣不了的產(chǎn)品</p>
<ul>
<li>知數(shù)網(wǎng)絡(luò)</li>
<li>知數(shù)SEO</li>
</ul>
</body>
<script>
var pObj = document.getElementById('node'); // 獲取p元素節(jié)點(diǎn)
var p_id = pObj.getAttributeNode('id'); // 獲取id屬性節(jié)點(diǎn)
console.log(p_id); // 打印p的id屬性 node
var p_id_type = p_id.nodeType; // p元素的節(jié)點(diǎn)類型
console.log(p_id_type); // 打印節(jié)點(diǎn)類型 2
var p_id_name = p_id.name; // p元素節(jié)點(diǎn)的名字
console.log(p_id_name); // id
var p_id_value = p_id.value; // p元素節(jié)點(diǎn)的值
console.log(p_id_value); // node
</script>
</html>
// 代碼中我們使用getAttributeNode()方法獲取屬性節(jié)點(diǎn)，它和getAttribute()方法的區(qū)別在于后者得到的屬性值而不是對象
3、文本節(jié)點(diǎn)
// 我們寫在標(biāo)簽中的文本內(nèi)容就是文本節(jié)點(diǎn)，在瀏覽器中呈現(xiàn)給用戶的內(nèi)容就是一個(gè)文本節(jié)點(diǎn)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知數(shù)SEO_專注搜索引擎優(yōu)化和品牌推廣</title>
</head>
<body>
<h2>讓推廣顯而易見</h2>
<p id="node">沒有推廣不了的產(chǎn)品</p>
<ul>
<li>知數(shù)網(wǎng)絡(luò)</li>
<li>知數(shù)SEO</li>
</ul>
</body>
<script>
var pObj = document.getElementById('node'); // 獲取p元素節(jié)點(diǎn)
var p_text = pObj.firstChild;
console.log(p_text);
var p_text_type = p_text.nodeType;
console.log(p_text_type); // 3
var p_text_name = p_text.nodeName;
console.log(p_text_name); // #text
var p_text_value = p_text.nodeValue;
console.log(p_text_value); // 沒有推廣不了的產(chǎn)品
</script>
</html>
4、節(jié)點(diǎn)類型、節(jié)點(diǎn)名字、節(jié)點(diǎn)值
4.1、節(jié)點(diǎn)類型
可以通過nodeObject.nodeType屬性獲取
| 節(jié)點(diǎn)類型 | 節(jié)點(diǎn)說明 |
|---|---|
| 元素節(jié)點(diǎn) | 每個(gè)HTML標(biāo)簽就是元素 |
| 屬性節(jié)點(diǎn) | 元素節(jié)點(diǎn)的屬性，如id class name src等 |
| 文本節(jié)點(diǎn) | 元素節(jié)點(diǎn)或?qū)傩怨?jié)點(diǎn)的文本內(nèi)容，如<p>標(biāo)簽內(nèi)容是文本節(jié)點(diǎn)</p> |
| 注釋節(jié)點(diǎn) | 文檔的注釋 |
| 文檔節(jié)點(diǎn) | 整個(gè)html文檔，DOM樹中的根<html>標(biāo)簽 |
4.2、節(jié)點(diǎn)名字
不同DOM節(jié)點(diǎn)有不同的名稱，可以通過nodeObject.nodeName屬性得到節(jié)點(diǎn)的名稱
| 節(jié)點(diǎn)類型 | 節(jié)點(diǎn)名字 |
|---|---|
| 元素節(jié)點(diǎn) | HTML標(biāo)簽的名稱，大寫如<p>元素節(jié)點(diǎn)是P |
| 屬性節(jié)點(diǎn) | 屬性的名稱 |
| 文本節(jié)點(diǎn) | 永遠(yuǎn)是text |
| 注釋節(jié)點(diǎn) | 永遠(yuǎn)是#comment |
| 文檔節(jié)點(diǎn) | 永遠(yuǎn)是#document |
4.3、節(jié)點(diǎn)值
節(jié)點(diǎn)的值可以通過nodeObject.nodeValue屬性獲取
| 節(jié)點(diǎn)類型 | 節(jié)點(diǎn)的值 |
|---|---|
| 元素節(jié)點(diǎn) | 沒有值 |
| 屬性節(jié)點(diǎn) | 屬性的值就是屬性節(jié)點(diǎn)的值 |
| 文本節(jié)點(diǎn) | 文本內(nèi)容就是文本節(jié)點(diǎn)的值 |
| 注釋節(jié)點(diǎn) | 注釋內(nèi)容就是注釋節(jié)點(diǎn)的值 |
| 文檔節(jié)點(diǎn) | 沒有值 |
三、通過文檔對象方法獲取節(jié)點(diǎn)
我們相操作某個(gè)節(jié)點(diǎn)，第一步就是獲得這個(gè)節(jié)點(diǎn)。
1、通過id屬性獲取節(jié)點(diǎn)
通過document讀喜慶提供的 getElementById() 方法，接收一個(gè)標(biāo)簽元素的id屬性值，就可以獲取到對應(yīng)id的標(biāo)簽元素
2、通過標(biāo)簽名字獲取節(jié)點(diǎn)
*getElementsByTagName()*方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知數(shù)SEO_專注搜索引擎優(yōu)化和品牌推廣</title>
</head>
<body>
<h2>讓推廣顯而易見</h2>
<p id="node">沒有推廣不了的產(chǎn)品</p>
<ul>
<li>知數(shù)網(wǎng)絡(luò)</li>
<li>知數(shù)SEO</li>
</ul>
</body>
<script>
var lis = document.getElementsByTagName('li'); // 獲取所有l(wèi)i標(biāo)簽元素
console.log(lis); // 打印li元素集合
console.log(lis[0]); // 打印第一個(gè)li元素
</script>
</html>
// getElementsBytagName()不僅是document對象的方法，也是element對象的方法
3、通過類名獲取節(jié)點(diǎn)
*getElementsByClassName()*方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知數(shù)SEO_專注搜索引擎優(yōu)化和品牌推廣</title>
</head>
<body>
<div>春雨驚春清谷天，</div>
<div class="bgcolor">夏滿芒夏暑相連。</div>
<div>秋處露秋寒霜降，</div>
<div class="bgcolor">冬雪雪冬小大寒。</div>
</body>
<script>
var bgcolors = document.getElementsByClassName('bgcolor');
console.log(bgcolors);
console.log(bgcolors[0]);
</script>
</html>
4、通過name屬性獲取節(jié)點(diǎn)
還可以通過表單中的name屬性值來獲取到指定的input標(biāo)簽元素
*getElementsByName()*方法接受一個(gè)name值就可以獲取到對應(yīng)的input標(biāo)簽元素,它返回一個(gè)數(shù)組，這個(gè)數(shù)組存放著所有name值等于我們傳到函數(shù)中的那個(gè)值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知數(shù)SEO_專注搜索引擎優(yōu)化和品牌推廣</title>
</head>
<body>
<form id="myForm" action="">
<input type="text" name="username"><br>
<input type="radio" name="sex" value="男">男<br>
<input type="radio" name="sex" value="女">女<br>
</form>
</body>
<script>
var sex = document.getElementsByName('sex');
console.log(sex);
console.log(sex[0]);
</script>
</html>
四、通過層級關(guān)系獲取節(jié)點(diǎn)
HTML文檔在瀏覽器中被解析成DOM樹狀結(jié)構(gòu)模型，而且這種樹狀結(jié)構(gòu)模型非常方便我們尋找該節(jié)點(diǎn)相關(guān)的一些關(guān)系，我們可以通過層級關(guān)系來找到對應(yīng)的節(jié)點(diǎn)。文章來源：http://www.zghlxwxcb.cn/news/detail-815980.html
1、子節(jié)點(diǎn)childNodes
// 一個(gè)節(jié)點(diǎn)可以有一個(gè)或多個(gè)子節(jié)點(diǎn)，通過DOM提供的方法，我們可以操作這個(gè)節(jié)點(diǎn)的所有子節(jié)點(diǎn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知數(shù)SEO_專注搜索引擎優(yōu)化和品牌推廣</title>
</head>
<body>
<div id="content">
<p>知數(shù)</p>
<span>專注搜索引擎優(yōu)化和品牌推廣</span>
<p>一個(gè)懂技術(shù)的seoer</p>
<a href="https://www.zhishunet.com">知數(shù)SEO</a>
</div>
</body>
<script>
// 獲取div標(biāo)簽元素節(jié)點(diǎn)對象
var divobj = document.getElementById('content');
// 獲取該div下的所有子節(jié)點(diǎn)
var childs = divobj.childNodes;
// 打印獲得的所有子節(jié)點(diǎn)
console.log(childs);
// 打印獲得的所有子節(jié)點(diǎn)的個(gè)數(shù)
console.log(childs.length);
</script>
</html>
// firstChild屬性可以獲得第一個(gè)子節(jié)點(diǎn)
// lastChild屬性可以獲得最后一個(gè)子節(jié)點(diǎn)
2、父節(jié)點(diǎn)parentNode
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知數(shù)SEO_專注搜索引擎優(yōu)化和品牌推廣</title>
</head>
<body>
<div id="content">
<p>知數(shù)</p>
<span>專注搜索引擎優(yōu)化和品牌推廣</span>
<p id="p_node">一個(gè)懂技術(shù)的seoer</p>
<a href="https://www.zhishunet.com">知數(shù)SEO</a>
</div>
</body>
<script>
// 獲取標(biāo)簽元素節(jié)點(diǎn)對象
var p_obj = document.getElementById('p_node');
// 獲取p元素的父節(jié)點(diǎn)
var parent = p_obj.parentNode;
console.log(parent);
</script>
</html>
3、兄弟節(jié)點(diǎn)
// 所謂的兄弟節(jié)點(diǎn)就是同級節(jié)點(diǎn)
// nextSibling屬性可以獲取某個(gè)節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)
// previousSibling屬性可以獲取某個(gè)節(jié)點(diǎn)的上一個(gè)節(jié)點(diǎn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知數(shù)SEO_專注搜索引擎優(yōu)化和品牌推廣</title>
</head>
<body>
<div id="content">
<p>知數(shù)</p>
<span>專注搜索引擎優(yōu)化和品牌推廣</span>
<p id="p_node">一個(gè)懂技術(shù)的seoer</p>
<a href="https://www.zhishunet.com">知數(shù)SEO</a>
</div>
</body>
<script>
// 獲取標(biāo)簽元素節(jié)點(diǎn)對象
var p_obj = document.getElementById('p_node');
// 獲取p元素的下一個(gè)節(jié)點(diǎn)
var nextNode = p_obj.nextSibling;
console.log(nextNode);
</script>
</html>
五、節(jié)點(diǎn)的其他操作
1、添加節(jié)點(diǎn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知數(shù)SEO_專注搜索引擎優(yōu)化和品牌推廣</title>
</head>
<body>
<div id="content"></div>
</body>
<script>
// 創(chuàng)建一個(gè)a元素節(jié)點(diǎn)
var a = document.createElement('a');
// 設(shè)置a元素節(jié)點(diǎn)的屬性節(jié)點(diǎn)
a.setAttribute('href','https://www.zhishunet.com');
// 創(chuàng)建新的文本節(jié)點(diǎn)
var text = document.createTextNode('知數(shù)SEO');
// 將文本節(jié)點(diǎn)插入到新創(chuàng)建的a元素節(jié)點(diǎn)中
a.appendChild(text);
// 找到要插入新節(jié)點(diǎn)到某個(gè)父節(jié)點(diǎn)下
var parent = document.getElementById('content');
// 向這個(gè)父節(jié)點(diǎn)尾部插入新創(chuàng)建的節(jié)點(diǎn)
parent.appendChild(a);
</script>
</html>
// 還可以使用createTextNode()方法來創(chuàng)建文本節(jié)點(diǎn) 還可以使用textContent屬性來設(shè)置元素節(jié)點(diǎn)的文本內(nèi)容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知數(shù)SEO_專注搜索引擎優(yōu)化和品牌推廣</title>
</head>
<body>
<div id="content"></div>
</body>
<script>
// 創(chuàng)建一個(gè)a元素節(jié)點(diǎn)
var a = document.createElement('a');
// 設(shè)置a元素節(jié)點(diǎn)的屬性節(jié)點(diǎn)
a.setAttribute('href','https://www.zhishunet.com');
// 設(shè)置或修改a元素節(jié)點(diǎn)的文本內(nèi)容
a.textContent = '知數(shù)';
// 找到要插入新節(jié)點(diǎn)到某個(gè)父節(jié)點(diǎn)下
var parent = document.getElementById('content');
// 向這個(gè)父節(jié)點(diǎn)尾部插入新創(chuàng)建的節(jié)點(diǎn)
parent.appendChild(a);
</script>
</html>
// 還可以使用innerHTML屬性來設(shè)置或獲取元素節(jié)點(diǎn)的所有內(nèi)容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知數(shù)SEO_專注搜索引擎優(yōu)化和品牌推廣</title>
</head>
<body>
<div id="content"></div>
</body>
<script>
// 找到要插入的父節(jié)點(diǎn)
var parent = document.getElementById('content');
// 向這個(gè)目標(biāo)節(jié)點(diǎn)插入需要的內(nèi)容
parent.innerHTML = '<a ;
</script>
</html>
2、刪除節(jié)點(diǎn)
// 刪除節(jié)點(diǎn)和替換節(jié)點(diǎn)有些相似，必須先找到父節(jié)點(diǎn)，才能刪除這個(gè)父節(jié)點(diǎn)下的某個(gè)子節(jié)點(diǎn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知數(shù)SEO_專注搜索引擎優(yōu)化和品牌推廣</title>
</head>
<body>
<div>
<p id="p_node">這個(gè)需要?jiǎng)h除</p>
<p>寶劍鋒從磨礪出</p>
<p>梅花香自苦寒來</p>
</div>
</body>
<script>
// 找到要?jiǎng)h除的節(jié)點(diǎn)
var delNode = document.getElementById('p_node');
// 得到要?jiǎng)h除的節(jié)點(diǎn)的父節(jié)點(diǎn)
var parent = delNode.parentNode;
// 通過父節(jié)點(diǎn)的removeChiled()方法刪除目標(biāo)節(jié)點(diǎn)
parent.removeChild(delNode);
</script>
</html>
3、修改節(jié)點(diǎn)
// 我們可以使用elment對象的replaceChild()方法來替換子節(jié)點(diǎn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知數(shù)SEO_專注搜索引擎優(yōu)化和品牌推廣</title>
</head>
<body>
<div id="div_node">
<p>這個(gè)需要替換的</p>
<p>寶劍鋒從磨礪出</p>
<p>梅花香自苦寒來</p>
</div>
</body>
<script>
// 創(chuàng)建一個(gè)a元素
var a = document.createElement('a');
// 設(shè)置a元素的屬性節(jié)點(diǎn)
a.setAttribute('href','https://www.zhishunet.com')
// 創(chuàng)建新的文本節(jié)點(diǎn)
var text = document.createTextNode('知數(shù)SEO')
// 將文本節(jié)點(diǎn)插入到新創(chuàng)建的a元素節(jié)點(diǎn)中
a.appendChild(text);
// 找到目標(biāo)父節(jié)點(diǎn)div元素節(jié)點(diǎn)
var parent = document.getElementById('div_node');
// 找到第一個(gè)p元素節(jié)點(diǎn)
var oldNode = parent.childNodes[1];
// 替換內(nèi)容
parent.replaceChild(a,oldNode);
</script>
</html>
六、自封裝函數(shù)庫
原始的DOM操作需要很多代碼才能得到我們想要的效果，還有就是瀏覽器的兼容問題。所以我們要寫很多代碼來解決這些問題，如果每次操作DOM都要寫很多重復(fù)的代碼，就不符合開發(fā)的思想（不要重復(fù)造輪子）。文章來源地址http://www.zghlxwxcb.cn/news/detail-815980.html
<script>
// 自定義DOM函數(shù)庫
function MyDom(obj){
this.obj = obj; // 設(shè)置對象為傳遞過來的節(jié)點(diǎn)對象
this.getChildList = function(){}; // 獲取所有子元素節(jié)點(diǎn)的方法
this.getFirstChild = function(){}; // 獲取第一個(gè)子元素節(jié)點(diǎn)的方法
this.getLastChild = function(){}; // 獲取最后一個(gè)子元素節(jié)點(diǎn)的方法
this.getNextNode = function(){}; // 獲取下一個(gè)元素節(jié)點(diǎn)的方法
this.getPreNode = function(){}; // 獲取上一個(gè)元素節(jié)點(diǎn)的方法
this.appendChild = function(){}; // 添加子節(jié)點(diǎn)的方法
this.removeChild = function(){}; // 刪除元素節(jié)點(diǎn)的方法
this.bind = function(){}; // 綁定事件的方法
this.html = function(){}; // 獲取或者設(shè)置元素節(jié)點(diǎn)內(nèi)容的方法
}
</script>
// 也可以先創(chuàng)建一個(gè)空對象，然后通過修改她的prototype屬性來設(shè)置對象的屬性和方法
<script>
// 自定義DOM函數(shù)庫
function MyDom(obj){
this.obj = obj;
};
MyDom.prototype = {
this.obj = obj; // 設(shè)置對象為傳遞過來的節(jié)點(diǎn)對象
this.getChildList = function(){}; // 獲取所有子元素節(jié)點(diǎn)的方法
this.getFirstChild = function(){}; // 獲取第一個(gè)子元素節(jié)點(diǎn)的方法
this.getLastChild = function(){}; // 獲取最后一個(gè)子元素節(jié)點(diǎn)的方法
this.getNextNode = function(){}; // 獲取下一個(gè)元素節(jié)點(diǎn)的方法
this.getPreNode = function(){}; // 獲取上一個(gè)元素節(jié)點(diǎn)的方法
this.appendChild = function(){}; // 添加子節(jié)點(diǎn)的方法
this.removeChild = function(){}; // 刪除元素節(jié)點(diǎn)的方法
this.bind = function(){}; // 綁定事件的方法
this.html = function(){}; // 獲取或者設(shè)置元素節(jié)點(diǎn)內(nèi)容的方法
}
</script>
到了這里，關(guān)于一文讀懂JavaScript DOM節(jié)點(diǎn)操作（JavaScript DOM節(jié)點(diǎn)操作詳解）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
