JavaScript：DOM操作 - 簡介
阿新 • • 發佈：2021-08-12
在一個html頁面中，會使用很多標籤來規劃製作頁面。
每個標籤都有它存在的意義，如果我們想要動態的修改某個標籤的值。那我們就需要在頁面中查詢 到這個標籤元素
如何查詢到這個元素是個難題，W3C組織的工程師們，突然看到了一棵大樹。我要是想找到某一 片葉子，應該怎麼做？
“順藤摸瓜”，主樹幹有分支，每個分支還有許多小分支，只要把這個分支的結構整理清楚，任何一 片葉子都不是難事了
葉子和大樹的一些啟發，工程師們開會討論就定了這個理論“文件物件模型”。
文件物件模型，就是將頁面中所有的標籤元素都看成是一個物件（一片葉子），主樹幹定義為根節 點（根元素），所有的標籤都是從根元素延伸出去的，摸清結構，找到某個標籤就不再困難了
在節點樹中，頂端節點就是根節點（root）
每個節點都有父節點（除了根節點）
任何一個節點都可以擁有任意數量的子節點
同胞是擁有相同父節點的節點
<html> <head> <meta charset="utf-8"> <title>DOM 教程</title> </head> <body> <h1>第一節：HTML DOM</h1> <p>Hello world!</p> </body> </html>
從上面的 HTML 中：
<html>節點沒有父節點；它是根節點
<head> 和 <body>的父節點是<html> 節點
文字節點 "Hello world!" 的父節點是<p>節點
並且：
節點擁有兩個子節點： <head>和<body>
<head>節點擁有兩個子節點：<meta> 與 <title> 節點
<title>節點也擁有一個子節點：文字節點 "DOM 教程"
<h1>和<p>節點是同胞節點，同時也是<body> 的子節點
並且：
<head>元素是 <html>元素的首個子節點
<body>元素是 <html> 元素的最後一個子節點
<h1>元素是<body>元素的首個子節點
<p>元素是 <body>元素的最後一個子節點
js為我們提供了很多種方法來實現在頁面找查詢某個元素節點