自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

一篇文章帶你了解JavaScript Htmldom 導航

作者： 前端進階者
開發(fā) 前端
在一個HTML文檔都是一個節(jié)點，The entire document is a document node 每個HTML元素是元素節(jié)點 在HTML元素的文本是文本節(jié)點 每一個HTML屬性是一個屬性節(jié)點 所有注釋都是注釋節(jié)點。

[[435200]]

使用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é)點包含文本。

  1. <title id="demo">DOM Tutorial</title> 

元素節(jié)點<title> (在上面的實例中) 不包含文本。

它包含有值的文本節(jié)點 "DOM Tutorial"。

該文本節(jié)點的值可以通過節(jié)點的innerHTML屬性訪問。

  1. var myTitle = document.getElementById("demo").firstChild.nodeValue; 

訪問innerHTML屬性訪問和訪問第一個子節(jié)點值相同:

  1. var myTitle = document.getElementById("demo").firstChild.nodeValue; 

訪問第一個子節(jié)點也可以這樣做:

  1. var myTitle = document.getElementById("demo").childNodes[0].nodeValue; 

實例1：

查詢<h1>元素的文本，并且拷貝它到<p>元素。

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4. <meta charset="UTF-8"> 
  5. <title>項目</title> 
  6. </head> 
  7. <body style="background-color: aqua;"> 
  8.  
  9. <h1 id="id01">My First Page</h1> 
  10. <p id="id02"></p> 
  11.  
  12. <script> 
  13. document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML; 
  14. </script> 
  15.  
  16. </body> 
  17. </html> 

實例2：

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4. <meta charset="UTF-8"> 
  5. <title>項目</title> 
  6. </head> 
  7. <body style="background-color: aqua;"> 
  8.  
  9.    <h1 id="id01">My First Page</h1> 
  10.     <p id="id02"></p> 
  11.  
  12.  <script> 
  13.   document.getElementById("id02").innerHTML =         document.getElementById("id01").firstChild.nodeValue; 
  14. </script> 
  15.  
  16. </body> 
  17. </html> 

實例3 ：

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4. <meta charset="UTF-8"> 
  5. <title>項目</title> 
  6. </head> 
  7. <body style="background-color: aqua;"> 
  8.    <h1 id="id01">My First Page</h1> 
  9.     <p id="id02">Hello!</p> 
  10.  
  11.    <script> 
  12.     document.getElementById("id02").innerHTML =       document.getElementById("id01").childNodes[0].nodeValue; 
  13. </script> 
  14.  
  15. </body> 
  16. </html> 

二、DOM 根節(jié)點

有兩個特殊屬性允許訪問完整文檔:

document.body - 文檔主體

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4. <meta charset="UTF-8"> 
  5. <title>項目</title> 
  6. </head> 
  7. <body style="background-color: aqua;"> 
  8.  
  9. <h1 id="id01">我的第一個頁面</h1> 
  10. <p id="id02"></p> 
  11.  
  12. <script> 
  13. document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue; 
  14. </script> 
  15.  
  16.  
  17. </body> 
  18. </html> 

document.documentElement - 完整的文檔

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3.   <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>項目</title> 
  6.   </head> 
  7.   <body style="background-color: aqua;"> 
  8.   <p>Hello World!</p> 
  9.   <div> 
  10.   <p>The DOM is very useful!</p> 
  11.    <p>This example demonstrates the <b>document.documentElement</b> property.</p> 
  12.   </div> 
  13.  
  14.   <script> 
  15.     alert(document.documentElement.innerHTML); 
  16. </script> 
  17.  
  18. </body> 
  19. </html> 

1. nodeName 屬性

nodeName屬性指定一個節(jié)點的名稱，nodeName 是只讀的。

nodeName 是只讀的。

nodeName 一個元素節(jié)點的節(jié)點名稱和標簽名稱相同。

一個屬性節(jié)點的節(jié)點名稱是屬性名。

一個文本節(jié)點的nodeName總是 #text。

文檔的節(jié)點名稱總是 #document。

  1. <h1 id="id01">My First Page</h1> 
  2. <p id="id02"></p> 
  3.  
  4. <script> 
  5. document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName; 
  6. </script> 

注意:

nodeName總是包含HTML元素的大寫標簽名稱。

2. nodeValue 屬性

nodeValue 屬性指定節(jié)點的值。素節(jié)點的節(jié)點值是 undefined，文本節(jié)點的節(jié)點是文本本身，屬性節(jié)點的節(jié)點值是屬性值。

3. nodeType 屬性

nodeType 屬性返回節(jié)點類型. nodeType 是只讀的。

  1. <script> 
  2. document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType; 
  3. </script> 

三、總結

本文基于JavaScript，介紹了頁面上htmldom 導航的節(jié)點。節(jié)點和節(jié)點之間的關系，采用生動的比喻進行講解。以及根節(jié)點的屬性進行了詳細講解。通過豐富的案例，運行效果圖的展示。希望能幫助讀者更好的學習。

 

使用JavaScript 語言，方便大家更好理解，希望對大家的學習有幫助。

 

責任編輯：武曉燕 來源： 前端進階學習交流
JavaScript導航HTML
相關推薦

2020-10-20 15:37:48

了解JavaScrip

2025-03-21 12:54:01

2021-11-26 11:10:07

JavaScript 節(jié)點導航

2023-06-01 17:10:12

HTMLJavaScript

2021-05-07 14:17:01

JavaScript元素網頁

2025-02-25 11:12:53

JavaScriptHTML元素CSS

2020-11-10 10:48:10

JavaScript屬性對象

2021-01-29 18:41:16

JavaScript函數語法

2021-02-02 18:39:05

JavaScript

2021-06-04 09:56:01

JavaScript 前端switch

2023-07-30 15:18:54

JavaScript屬性

2021-01-26 23:46:32

JavaScript數據結構前端

2021-03-09 14:04:01

JavaScriptCookie數據

2021-06-24 09:05:08

JavaScript日期前端

2023-09-06 14:57:46

JavaScript編程語言

2024-01-30 13:47:45

2024-04-19 14:23:52

SwitchJavaScript開發(fā)

2021-03-05 18:04:15

JavaScript循環(huán)代碼

2021-05-18 08:30:42

JavaScript 前端JavaScript時

2023-08-27 15:18:17

JavaScriptRegExp
點贊
收藏

51CTO技術棧公眾號