一篇文章帶你了解JavaScript htmldom 導航
回復“前端”即可獲贈前端相關學習資料
使用HTML DOM,可以使用節(jié)點關系來導航"節(jié)點樹"。
一、DOM 節(jié)點
在一個HTML文檔都是一個節(jié)點,The entire document is a document node 每個HTML元素是元素節(jié)點 在HTML元素的文本是文本節(jié)點 每一個HTML屬性是一個屬性節(jié)點 所有注釋都是注釋節(jié)點。
使用HTML DOM, 在節(jié)點樹的所有節(jié)點可以通過JavaScript訪問。可以創(chuàng)建新節(jié)點,并可以修改或刪除所有節(jié)點。
1. 節(jié)點關系
節(jié)點樹中的節(jié)點彼此具有層次關系。
2. 子節(jié)點和節(jié)點值
在DOM處理中常見的錯誤就是認為一個元素節(jié)點包含文本。
<title id="demo">DOM Tutorialtitle>元素節(jié)點 (在上面的實例中) 不包含文本。
它包含有值的文本節(jié)點 "DOM Tutorial"。
該文本節(jié)點的值可以通過節(jié)點的innerHTML屬性訪問。
var myTitle = document.getElementById("demo").innerHTML;訪問innerHTML屬性訪問和訪問第一個子節(jié)點值相同:
var myTitle = document.getElementById("demo").firstChild.nodeValue;訪問第一個子節(jié)點也可以這樣做:
var myTitle = document.getElementById("demo").childNodes[0].nodeValue;實例1:
查詢元素的文本,并且拷貝它到元素。
<html lang="en"><head><meta charset="UTF-8"><title>項目title>head><body style="background-color: aqua;"><h1 id="id01">My First Pageh1><p id="id02">p><script>document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;script>body>html>

實例2:
<html lang="en"><head><meta charset="UTF-8"><title>項目title>head><body style="background-color: aqua;"><h1 id="id01">My First Pageh1><p id="id02">p><script>document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;script>body>html>

實例3 :
<html lang="en"><head><meta charset="UTF-8"><title>項目title>head><body style="background-color: aqua;"><h1 id="id01">My First Pageh1><p id="id02">Hello!p><script>document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;script>body>html>

二、DOM 根節(jié)點
有兩個特殊屬性允許訪問完整文檔:
document.body - 文檔主體
<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 - 完整的文檔
<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.documentElementb> property.p>div><script>alert(document.documentElement.innerHTML);script>body>html>

1. nodeName 屬性
nodeName屬性指定一個節(jié)點的名稱,nodeName 是只讀的。
nodeName 是只讀的。
nodeName 一個元素節(jié)點的節(jié)點名稱和標簽名稱相同。
一個屬性節(jié)點的節(jié)點名稱是屬性名。
一個文本節(jié)點的nodeName總是 #text。
文檔的節(jié)點名稱總是 #document。
<h1 id="id01">My First Pageh1><p id="id02">p><script>document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;script>

注意:
nodeName總是包含HTML元素的大寫標簽名稱。
2. nodeValue 屬性
nodeValue 屬性指定節(jié)點的值。素節(jié)點的節(jié)點值是 undefined,文本節(jié)點的節(jié)點是文本本身,屬性節(jié)點的節(jié)點值是屬性值。
3. nodeType 屬性
nodeType 屬性返回節(jié)點類型. nodeType 是只讀的。
<script>document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;script>

三、總結
本文基于JavaScript,介紹了頁面上htmldom 導航的節(jié)點。節(jié)點和節(jié)點之間的關系,采用生動的比喻進行講解。以及根節(jié)點的屬性進行了詳細講解。通過豐富的案例,運行效果圖的展示。希望能幫助讀者更好的學習。
使用JavaScript 語言,方便大家更好理解,希望對大家的學習有幫助。
-------------------?End?-------------------
往期精彩文章推薦:

歡迎大家點贊,留言,轉發(fā),轉載,感謝大家的相伴與支持
想加入前端學習群請在后臺回復【入群】
萬水千山總是情,點個【在看】行不行
