溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“JavaScript中如何利用DOM節點獲取頁面元素”，內容詳細，步驟清晰，細節處理妥當，希望這篇“JavaScript中如何利用DOM節點獲取頁面元素”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
（1）獲取節點（包含文本節點、元素節點等所有節點）
1.parentNode:獲取父節點
2.childNodes：獲取子節點，通過索引值獲取各個子節點
3.firstChild：獲取父節點的第一個子節點
4.lastChild：獲取父節點的最后一個子節點
5.nextSibling：獲取子節點相鄰的下一個兄弟節點
6.previousSibling：獲取子節點相鄰的前一個兄弟節點
7.attributes:獲取屬性節點
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>由節點關系獲取元素</title>
<style>
</style>
</head>
<body>
<div name="div1">
<p name='p1'>文本節點</p>
<p>2</p>
<ul>
<li>3</li>
<li id="li4">4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<section>7</section>
<main><span>8</span><i>9</i></main>
<script>
//注意換行和空格也屬于結點，屬于文本節點，按節點關系訪問時需要考慮。屬性節點無須考慮。
//1. parentNode獲取div
console.log(document.querySelector('p').parentNode);
console.log(document.querySelector('p').parentNode.attributes[0]);
console.log(document.querySelector('p').parentNode.nodeName); //DIV
console.log(document.querySelector('p').parentNode.nodeValue); //null
console.log(document.querySelector('p').parentNode.nodeType); //1 元素節點
// 2.通過childNodes獲取第一個p
console.log(document.querySelector('div').childNodes[1]);
console.log(document.querySelector('div').childNodes[1].firstChild.nodeName);
console.log(document.querySelector('div').childNodes[1].firstChild.nodeType); //2 文本節點
console.log(document.querySelector('div').childNodes[1].firstChild.nodeValue);
// 3.firstChild獲取main中的第一個子節點
console.log(document.querySelector('main').firstChild);
// 4.lastChild獲取main中的最后一個子節點
console.log(document.querySelector('main').lastChild);
// 5.nextSibling獲取相鄰下一個兄弟元素
console.log(document.querySelector('#li4').nextSibling.nextSibling);
// 6.previousSibling獲取相鄰上一個兄弟元素
console.log(document.querySelector('#li4').previousSibling.previousSibling);
// 總結：除parentNode外，其他方法謹慎選擇，一旦代碼格式有變，就會出現錯誤
// 通過nodeName獲取節點名稱
//通過nodeValue獲取節點值
// 通過nodeType返回節點類型
</script>
</body>
</html>（2）獲取元素節點
1.parentElement:獲取父元素節點
2.children：獲取子元素節點，通過索引值獲取各個子元素節點
3.firstElementChild：獲取父級的第一個子元素節點
4.lastElementChild：獲取父級的最后一個子元素節點
5.nextElementSibling：獲取相鄰的下一個兄弟元素節點
6.previousElementSibling：獲取相鄰的前一個兄弟元素節點
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>獲取子元素節點</title>
</head>
<body>
<div>
<p>123</p>
<p>456</p>
<p>789</p>
</div>
<script>
//p標簽總體算一個節點，內部的“123”不算
console.log(document.querySelector('div').childNodes);
console.log(document.querySelector('div').childNodes.length);
// 獲取子元素節點
console.log(document.querySelector('div').children);
console.log(document.querySelector('div').children[1]);
console.log(document.querySelector('div').firstElementChild);
console.log(document.querySelector('div').firstElementChild.nextElementSibling);
console.log(document.querySelector('div').lastElementChild);
console.log(document.querySelector('div').lastElementChild.previousElementSibling);
console.log(document.querySelector('div').children[1].parentElement);
</script>
</body>
</html>讀到這里，這篇“JavaScript中如何利用DOM節點獲取頁面元素”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
