回復「前端」即可獲贈前端相關學習資料
使用HTML DOM，可以使用節點關係來導航"節點樹"。
一、DOM 節點在一個HTML文檔都是一個節點，The entire document is a document node 每個HTML元素是元素節點 在HTML元素的文本是文本節點 每一個HTML屬性是一個屬性節點 所有注釋都是注釋節點。
使用HTML DOM, 在節點樹的所有節點可以通過JavaScript訪問。可以創建新節點，並可以修改或刪除所有節點。
1. 節點關係節點樹中的節點彼此具有層次關係。
2. 子節點和節點值在DOM處理中常見的錯誤就是認為一個元素節點包含文本。
<title id="demo">DOM Tutorial</title>元素節點<title> (在上面的實例中) 不包含文本。
它包含有值的文本節點 "DOM Tutorial"。
該文本節點的值可以通過節點的innerHTML屬性訪問。
var myTitle = document.getElementById("demo").innerHTML;訪問innerHTML屬性訪問和訪問第一個子節點值相同:
var myTitle = document.getElementById("demo").firstChild.nodeValue;訪問第一個子節點也可以這樣做:
var myTitle = document.getElementById("demo").childNodes[0].nodeValue;實例1：
查詢<h1>元素的文本，並且拷貝它到<p>元素。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>項目</title></head><body style="background-color: aqua;">
<h1 id="id01">My First Page</h1><p id="id02"></p>
<script>document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;</script>
</body></html>實例2：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>項目</title></head><body style="background-color: aqua;">
<h1 id="id01">My First Page</h1> <p id="id02"></p>
<script> document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;</script>
</body></html>實例3 ：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>項目</title></head><body style="background-color: aqua;"> <h1 id="id01">My First Page</h1> <p id="id02">Hello!</p>
<script> document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;</script>
</body></html>二、DOM 根節點有兩個特殊屬性允許訪問完整文檔:
document.body - 文檔主體
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>項目</title></head><body style="background-color: aqua;">
<h1 id="id01">我的第一個頁面</h1><p id="id02"></p>
<script>document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;</script>
</body></html>document.documentElement - 完整的文檔
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>項目</title> </head> <body style="background-color: aqua;"> <p>Hello World!</p> <div> <p>The DOM is very useful!</p> <p>This example demonstrates the <b>document.documentElement</b> property.</p> </div>
<script> alert(document.documentElement.innerHTML);</script>
</body></html>1. nodeName 屬性nodeName屬性指定一個節點的名稱，nodeName 是只讀的。
nodeName 是只讀的。
nodeName 一個元素節點的節點名稱和標籤名稱相同。
一個屬性節點的節點名稱是屬性名。
一個文本節點的nodeName總是 #text。
文檔的節點名稱總是 #document。
<h1 id="id01">My First Page</h1><p id="id02"></p>
<script>document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;</script>注意:
nodeName總是包含HTML元素的大寫標籤名稱。
2. nodeValue 屬性nodeValue 屬性指定節點的值。素節點的節點值是 undefined，文本節點的節點是文本本身，屬性節點的節點值是屬性值。
3. nodeType 屬性nodeType 屬性返回節點類型. nodeType 是只讀的。
<script>document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;</script>三、總結本文基於JavaScript，介紹了頁面上htmldom 導航的節點。節點和節點之間的關係，採用生動的比喻進行講解。以及根節點的屬性進行了詳細講解。通過豐富的案例，運行效果圖的展示。希望能幫助讀者更好的學習。
使用JavaScript 語言，方便大家更好理解，希望對大家的學習有幫助。
------------------- End -------------------
往期精彩文章推薦：
歡迎大家點讚，留言，轉發，轉載，感謝大家的相伴與支持
想加入前端學習群請在後臺回復【入群】
萬水千山總是情，點個【在看】行不行