JavaScript DOM節(jié)點(diǎn)操作方法詳解

更新時(shí)間：2025年10月30日 10:45:03 作者：貝西奇談

這篇文章詳細(xì)介紹了JavaScript中的DOM節(jié)點(diǎn)操作,包括節(jié)點(diǎn)類型、獲取節(jié)點(diǎn)的方法、通過層級(jí)關(guān)系獲取節(jié)點(diǎn)以及節(jié)點(diǎn)的其他操作,還講解了如何使用JavaScript操作CSS樣式,包括直接使用style屬性和操作多個(gè)樣式的方法,感興趣的朋友跟隨小編一起看看吧

一、什么是節(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對(duì)象）
元素節(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對(duì)象的三個(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ū)別在于后者得到的屬性值而不是對(duì)象

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屬性獲取

4.2、節(jié)點(diǎn)名字

不同DOM節(jié)點(diǎn)有不同的名稱，可以通過nodeObject.nodeName 屬性得到節(jié)點(diǎn)的名稱

4.3、節(jié)點(diǎn)值

節(jié)點(diǎn)的值可以通過nodeObject.nodeValue屬性獲取

三、通過文檔對(duì)象方法獲取節(jié)點(diǎn)

我們相操作某個(gè)節(jié)點(diǎn)，第一步就是獲得這個(gè)節(jié)點(diǎn)。

1、通過id屬性獲取節(jié)點(diǎn)

通過document讀喜慶提供的 getElementById() 方法，接收一個(gè)標(biāo)簽元素的id屬性值，就可以獲取到對(duì)應(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對(duì)象的方法，也是element對(duì)象的方法

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值就可以獲取到對(duì)應(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">
    <input type="radio" name="sex" value="男">男
    <input type="radio" name="sex" value="女">女
</form>
</body>
<script>
    var sex = document.getElementsByName('sex');
    console.log(sex);
    console.log(sex[0]);
</script>
</html>

四、通過層級(jí)關(guān)系獲取節(jié)點(diǎn)

HTML文檔在瀏覽器中被解析成DOM樹狀結(jié)構(gòu)模型，而且這種樹狀結(jié)構(gòu)模型非常方便我們尋找該節(jié)點(diǎn)相關(guān)的一些關(guān)系，我們可以通過層級(jí)關(guān)系來找到對(duì)應(yīng)的節(jié)點(diǎn)。

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  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >知數(shù)SEO</a>
</div>
</body>
<script>
    // 獲取div標(biāo)簽元素節(jié)點(diǎn)對(duì)象
    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  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >知數(shù)SEO</a>
</div>
</body>
<script>
    // 獲取標(biāo)簽元素節(jié)點(diǎn)對(duì)象
    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)就是同級(jí)節(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  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >知數(shù)SEO</a>
</div>
</body>
<script>
    // 獲取標(biāo)簽元素節(jié)點(diǎn)對(duì)象
    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  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >知數(shù)SEO</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對(duì)象的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>

六、JS操作CSS樣式

1. 直接使用 style 屬性設(shè)置樣式

style 屬性是 DOM 中最簡(jiǎn)單直接的方式，用于動(dòng)態(tài)修改元素的內(nèi)聯(lián)樣式。內(nèi)聯(lián)樣式的優(yōu)點(diǎn)是它能在不影響其他樣式的情況下，直接應(yīng)用于指定的元素。通過 JavaScript 可以輕松訪問并修改元素的 style 屬性。

例如，假設(shè)我們有如下的 HTML 元素：

<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>

通過 JavaScript 修改該元素的樣式，可以這樣實(shí)現(xiàn)：

const box = document.getElementById('box');
box.style.backgroundColor = 'blue';
box.style.width = '200px';

執(zhí)行這段代碼后，div 的背景顏色會(huì)從紅色變成藍(lán)色，寬度從 100px 增加到 200px。

2. 常見問題：使用駝峰命名

在 JavaScript 中，CSS 屬性名通常需要使用駝峰式命名。比如，background-color 在 JavaScript 中需要寫成 backgroundColor，而 font-size 則要寫成 fontSize。這是因?yàn)?style 屬性遵循 JavaScript 的命名規(guī)則。

3. 操作多個(gè)樣式

通過 style 屬性，我們可以對(duì)單個(gè)樣式進(jìn)行操作，但如果需要批量修改多個(gè)樣式，直接使用 style 進(jìn)行設(shè)置可能會(huì)顯得冗余。對(duì)于這種情況，使用 className 或 classList 來批量管理樣式會(huì)更加高效。

box.style.cssText = 'width: 300px; height: 300px; background-color: green;';

在上面的代碼中，通過 cssText 可以一次性設(shè)置多個(gè) CSS 樣式。

到此這篇關(guān)于JavaScript DOM節(jié)點(diǎn)操作詳解的文章就介紹到這了,更多相關(guān)js dom節(jié)點(diǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

JavaScript DOM節(jié)點(diǎn)操作方法詳解

目錄

一、什么是節(jié)點(diǎn)

二、節(jié)點(diǎn)類型

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

2、屬性節(jié)點(diǎn)

3、文本節(jié)點(diǎn)

4、節(jié)點(diǎn)類型、節(jié)點(diǎn)名字、節(jié)點(diǎn)值

4.1、節(jié)點(diǎn)類型

4.2、節(jié)點(diǎn)名字

4.3、節(jié)點(diǎn)值

三、通過文檔對(duì)象方法獲取節(jié)點(diǎn)

1、通過id屬性獲取節(jié)點(diǎn)

2、通過標(biāo)簽名字獲取節(jié)點(diǎn)

3、通過類名獲取節(jié)點(diǎn)

4、通過name屬性獲取節(jié)點(diǎn)

四、通過層級(jí)關(guān)系獲取節(jié)點(diǎn)

1、子節(jié)點(diǎn)childNodes

2、父節(jié)點(diǎn)parentNode

3、兄弟節(jié)點(diǎn)

五、節(jié)點(diǎn)的其他操作

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

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

3、修改節(jié)點(diǎn)

六、JS操作CSS樣式

1. 直接使用 style 屬性設(shè)置樣式

2. 常見問題：使用駝峰命名

3. 操作多個(gè)樣式

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

JavaScript DOM節(jié)點(diǎn)操作方法詳解

目錄

一、什么是節(jié)點(diǎn)

二、節(jié)點(diǎn)類型

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

2、屬性節(jié)點(diǎn)

3、文本節(jié)點(diǎn)

4、節(jié)點(diǎn)類型、節(jié)點(diǎn)名字、節(jié)點(diǎn)值

4.1、節(jié)點(diǎn)類型

4.2、節(jié)點(diǎn)名字

4.3、節(jié)點(diǎn)值

三、通過文檔對(duì)象方法獲取節(jié)點(diǎn)

1、通過id屬性獲取節(jié)點(diǎn)

2、通過標(biāo)簽名字獲取節(jié)點(diǎn)

3、通過類名獲取節(jié)點(diǎn)

4、通過name屬性獲取節(jié)點(diǎn)

四、通過層級(jí)關(guān)系獲取節(jié)點(diǎn)

1、子節(jié)點(diǎn)childNodes

2、父節(jié)點(diǎn)parentNode

3、兄弟節(jié)點(diǎn)

五、節(jié)點(diǎn)的其他操作

1、添加節(jié)點(diǎn)

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

3、修改節(jié)點(diǎn)

六、JS操作CSS樣式

1. 直接使用 style 屬性設(shè)置樣式

2. 常見問題：使用駝峰命名

3. 操作多個(gè)樣式

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

二、節(jié)點(diǎn)類型

2、屬性節(jié)點(diǎn)

3、文本節(jié)點(diǎn)

4、節(jié)點(diǎn)類型、節(jié)點(diǎn)名字、節(jié)點(diǎn)值

4.1、節(jié)點(diǎn)類型

4.2、節(jié)點(diǎn)名字

4.3、節(jié)點(diǎn)值

三、通過文檔對(duì)象方法獲取節(jié)點(diǎn)

1、通過id屬性獲取節(jié)點(diǎn)

4、通過name屬性獲取節(jié)點(diǎn)

四、通過層級(jí)關(guān)系獲取節(jié)點(diǎn)

1、子節(jié)點(diǎn)childNodes

2、父節(jié)點(diǎn)parentNode

3、兄弟節(jié)點(diǎn)

五、節(jié)點(diǎn)的其他操作

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

3、修改節(jié)點(diǎn)