JavaScript 7—DOM
阿新 • • 發佈：2020-07-29
DOM全稱Document Object Model文件物件模型。JS中通過DOM來對HTML文件進行操作。只要理解了DOM就可以隨心所欲地操作web頁面
- Document（文件）- 整個的HTML網頁文件
- Object（物件）-將網頁中的每一個部分都轉換為了一個物件
- Model（模型）-使用模型來表示物件之間的關係，這樣方便我們獲取物件
節點
節點Node ,是構成我們網頁的最基本的組成部分，網頁中的每一個部分都可以稱為是一個節點。比如: html標籤、 屬性、文字、註釋、整個文件等都是一個節點。
雖然都是節點,但是實際上他們的具體型別是不同的。比如:標籤我們稱為元素節點屬性稱為屬性節點、文字稱為文字節點文件稱為文件節點。節點的型別不同,屬性和方法也都不盡相同。
常用節點分為四類
- 文件節點：整個HTML文件
- 元素節點：HTML文件中的HTML標籤
- 屬性節點：元素的屬性
- 文字節點：HTML標籤中的文字內容
節點的屬性
| nodeName | nodeType | nodeValue | |
| 文件節點 | #document | 9 | null |
| 元素節點 | 標籤名 | 1 | null |
| 屬性節點 | 屬性名 | 2 | 屬性值 |
| 文字節點 | #text | 3 | 文字內容 |
Dom簡介
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn">我是一個按鈕</button> <script type="text/javascript"> /* 瀏覽器已經為我們提供了 文件節點物件 這個物件是window屬性 可以在頁面中直接使用，文件節點代表的是整個網頁 */ console.log(document);//object HTMLDocument //獲取到button物件var btn = document.getElementById("btn"); console.log(btn);//object HTMLButtonElement //修改按鈕的文字 console.log(btn.innerHTML);//我是一個按鈕 btn.innerHTML = "I am Button."; </script> </body> </html>