您現在的位置: 365建站網 > 365教程 > HTML DOM 教程 > HTML DOM 節點

HTML DOM 節點

此節有 135 人學習過     參與評論

HTML DOM 中,所有事物都是節點。DOM 是被視為節點樹的 HTML。

DOM 節點

根據 w3c 的 HTML DOM 標準,HTML 文檔中的所有內容都是節點:

  • 整個文檔是一個文檔節點
  • 每個 HTML 元素是元素節點
  • HTML 元素內的文本是文本節點
  • 每個 HTML 屬性是屬性節點
  • 注釋是注釋節點

HTML DOM 節點樹

HTML DOM 將 HTML 文檔視作樹結構。這種結構被稱為節點樹

HTML DOM Tree 實例

HTML DOM Node Tree

通過 HTML DOM,樹中的所有節點均可通過 JavaScript 進行訪問。所有 HTML 元素(節點)均可被修改,也可以創建或刪除節點。

節點父、子和同胞

節點樹中的節點彼此擁有層級關系。

父(parent)、子(child)和同胞(sibling)等術語用于描述這些關系。父節點擁有子節點。同級的子節點被稱為同胞(兄弟或姐妹)。

  • 在節點樹中,頂端節點被稱為根(root)
  • 每個節點都有父節點、除了根(它沒有父節點)
  • 一個節點可擁有任意數量的子
  • 同胞是擁有相同父節點的節點

下面的圖片展示了節點樹的一部分,以及節點之間的關系:

DOM 節點關系

請看下面的 HTML 片段:

<html>
  <head>
    <title>DOM 教程</title>
  </head>
  <body>
    <h1>DOM 第一課</h1>
    <p>Hello world!</p>
  </body>
</html>

從上面的 HTML 中:

  • <html> 節點沒有父節點;它是根節點
  • <head> 和 <body> 的父節點是 <html> 節點
  • 文本節點 "Hello world!" 的父節點是 <p> 節點

并且:

  • <html> 節點擁有兩個子節點:<head> 和 <body>
  • <head> 節點擁有一個子節點:<title> 節點
  • <title> 節點也擁有一個子節點:文本節點 "DOM 教程"
  • <h1> 和 <p> 節點是同胞節點,同時也是 <body> 的子節點

并且:

  • <head> 元素是 <html> 元素的首個子節點
  • <body> 元素是 <html> 元素的最后一個子節點
  • <h1> 元素是 <body> 元素的首個子節點
  • <p> 元素是 <body> 元素的最后一個子節點

警告!

DOM 處理中的常見錯誤是希望元素節點包含文本。

在本例中:<title>DOM 教程</title>,元素節點 <title>,包含值為 "DOM 教程" 的文本節點。

可通過節點的 innerHTML 屬性來訪問文本節點的值。

您將在稍后的章節中學習更多有關 innerHTML 屬性的知識。

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (135人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 成年网站未满十八禁视频| 青青草免费视频| A级日本乱理伦片免费入口| 啦啦啦电影免费观看在线高清| 香港经典三级| 色婷婷久久综合中文久久一本| 阳茎伸入女人的阳道免费视频| 同桌扒开我的内裤摸下面| 亚洲精品无码国产片| 相亲对象是强硬问题儿学生| 办公室小妖精真紧高H文| 苍老师免费av在线播放| 人成午夜高潮免费视频| 亚洲日韩av无码美腿丝袜| 成年无码av片在线观看| 秋霞无码av一区二区三区| 99热这里只有精品国产免费免费| 重庆护士门| zooskool| 女人自熨全过程直播| 大胆人gogo体艺术| 强制入侵完整版在线观看| 性之图吧国模私拍图| 国产gay高中生小鲜肉| 超短裙老师的太紧太小| 一本到高清视频不卡dvd日本| 东北少妇不带套对白| 欧美人禽杂交狂配| 被强奷从反抗到舒服的视频| 亚洲的天堂av无码| 哆啦a梦回来了视频在线播放| http://www.vampiresforreal.com