HTML DOM 节点
生活随笔
收集整理的這篇文章主要介紹了
HTML DOM 节点
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
在 HTML DOM 中，所有事物都是節(jié)點。DOM 是被視為節(jié)點樹的 HTML。
DOM 節(jié)點
根據(jù) W3C 的 HTML DOM 標準，HTML 文檔中的所有內(nèi)容都是節(jié)點：
- 整個文檔是一個文檔節(jié)點
- 每個 HTML 元素是元素節(jié)點
- HTML 元素內(nèi)的文本是文本節(jié)點
- 每個 HTML 屬性是屬性節(jié)點
- 注釋是注釋節(jié)點
HTML DOM 節(jié)點樹
HTML DOM 將 HTML 文檔視作樹結(jié)構(gòu)。這種結(jié)構(gòu)被稱為節(jié)點樹：
HTML DOM Tree 實例
通過 HTML DOM，樹中的所有節(jié)點均可通過 JavaScript 進行訪問。所有 HTML 元素（節(jié)點）均可被修改，也可以創(chuàng)建或刪除節(jié)點。
節(jié)點父、子和同胞
節(jié)點樹中的節(jié)點彼此擁有層級關(guān)系。
父（parent）、子（child）和同胞（sibling）等術(shù)語用于描述這些關(guān)系。父節(jié)點擁有子節(jié)點。同級的子節(jié)點被稱為同胞（兄弟或姐妹）。
- 在節(jié)點樹中，頂端節(jié)點被稱為根（root）
- 每個節(jié)點都有父節(jié)點、除了根（它沒有父節(jié)點）
- 一個節(jié)點可擁有任意數(shù)量的子
- 同胞是擁有相同父節(jié)點的節(jié)點
下面的圖片展示了節(jié)點樹的一部分，以及節(jié)點之間的關(guān)系：
請看下面的 HTML 片段：
<html><head><title>DOM 教程</title></head><body><h1>DOM 第一課</h1><p>Hello world!</p></body> </html>從上面的 HTML 中：
- <html> 節(jié)點沒有父節(jié)點；它是根節(jié)點
- <head> 和 <body> 的父節(jié)點是 <html> 節(jié)點
- 文本節(jié)點 "Hello world!" 的父節(jié)點是 <p> 節(jié)點
并且：
- <html> 節(jié)點擁有兩個子節(jié)點：<head> 和 <body>
- <head> 節(jié)點擁有一個子節(jié)點：<title> 節(jié)點
- <title> 節(jié)點也擁有一個子節(jié)點：文本節(jié)點 "DOM 教程"
- <h1> 和 <p> 節(jié)點是同胞節(jié)點，同時也是 <body> 的子節(jié)點
并且：
- <head> 元素是 <html> 元素的首個子節(jié)點
- <body> 元素是 <html> 元素的最后一個子節(jié)點
- <h1> 元素是 <body> 元素的首個子節(jié)點
- <p> 元素是 <body> 元素的最后一個子節(jié)點
總結(jié)
以上是生活随笔為你收集整理的HTML DOM 节点的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Javascript创建节点
- 下一篇： HTML DOM 方法