1.DOM節點是什么?
在網頁中所有對象和內容都被稱為節點,如文檔、元素、文本、屬性、注釋等。節點(Node)是 DOM 最基本的單元,並派生出不同類型的節點,它們共同構成了文檔的樹形結構模型。
節點類型
根據 DOM 規范,整個文檔是一個文檔節點,每個標簽是一個元素節點,元素包含的文本是文本節點,元素的屬性是一個屬性節點,注釋屬於注釋節點,以此類推。
什么是元素節點、屬性節點、文本節點、文檔節點?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>節點屬性</title>
</head>
<body>
<ul>
<li>javascript</li>
<li>HTML/CSS</li>
<li>jQuery</li>
</ul>
<script type="text/javascript">
var con = document.getElementsByTagName("li");
for(var i=0;i<con.length;i++){
document.write(con[i].nodeName+"<br/>");
document.write(con[i].nodeValue+"<br/>");
document.write(con[i].nodeType+"<br/>");
}
</script>
</body>
</html>
1.元素節點:<html>、<body>、<li>等都是元素節點,即標簽。
2. 文本節點: 向用戶展示的內容,如<li>...</li>中的JavaScript、HTML/CSS、jQuery等文本。
3. 屬性節點:元素屬性,如<script>標簽的type="text/javascript"。
=====================================================================================================
節點關系
DOM 把文檔視為一棵樹形結構,也稱為節點數。節點之間的關系包括:上下父子關系、相鄰兄弟關系。簡單描述如下:
- 在節點樹中,最頂端節點為根節點。
- 除了根節點之外,每個節點都有一個父節點。
- 節點可以包含任何數量的子節點。
- 葉子時沒有子節點的節點。
- 同級節點是擁有相同父節點的節點。
-
- <! doctype html>
- <html>
- <head>
- <title>標准 DOM 示例</title>
- <meta charset="utf-8">
- </head>
- <body>
- <h1>標准 DOM</h1>
- <p>這是一份簡單的<strong>文檔對象模型</strong></p>
- <ul>
- <li>D 表示文檔,DOM 的結構基礎</li>
- <li>O 表示對象,DOM 的對象基礎</li>
- <li>M 表示模型,DOM 的方法基礎</li>
- </ul>
- </body>
- </html>
- 在上面的 HTML 結構中,首先是 DOCTYPE 文檔類型聲明,然后是 html 元素,網頁里所有元素都包含在這個元素里。從文檔結構看,html 元素既沒有父輩,也沒有兄弟。如果用樹來表示,這個 html 元素就是樹根,代表整個文檔。由 html 元素派生出 head 和 body 兩個子元素,它們屬於同一級別,且互不包含,可以稱之為兄弟關系。head 和 body 元素擁有共同的父元素 html,同時它們又是其他元素的父元素,擔保函的子元素不同。head 元素包含 title 元素,title 元素又包含文本節點“標准 DOM 示例”。body 元素包含 3 個子元素:h1、p 和 ul,它們是兄弟關系。如果繼續訪問,ul 元素也是一個父元素,它包含 3 個 li 子元素。整個文檔如果使用樹形結構表示,如下圖所示。使用樹形結構可以很直觀的把文檔結構中各個元素之間的關系表現出來。

