　　好程式設計師web 前端培訓JavaScript 學習筆記 DOM一DOM （ Document Object Model ）：文件物件模型

Java3

　　其實就是操作 html 中的標籤的一些能力

　　我們可以操作哪些內容

　　獲取一個元素

　　移除一個元素

　　建立一個元素

　　向頁面裡面新增一個元素

　　給元素繫結一些事件

　　獲取元素的屬性

　　給元素新增一些 css 樣式

　　...

　　DOM 的核心物件就是 docuemnt 物件

　　document 物件是瀏覽器內建的一個物件，裡面儲存著專門用來操作元素的各種方法

　　DOM ：頁面中的標籤，我們透過 js 獲取到以後，就把這個物件叫做 DOM 物件

獲取一個元素

透過 js 程式碼來獲取頁面中的標籤
獲取到以後我們就可以操作這些標籤了
getElementById 是透過標籤的 id 名稱來獲取標籤的
因為在一個頁面中 id 是唯一的，所以獲取到的就是一個元素

getElementById

<body>

var box = document.getElementById('box')

console.log(box) // <div></div> </script></body>

獲取到的就是頁面中的那個 id 為 box 的 div 標籤
getElementsByClassName 是用過標籤的 class 名稱來獲取標籤的
因為頁面中可能有多個元素的 class 名稱一樣，所以獲取到的是一組元素
哪怕你獲取的 class 只有一個，那也是獲取一組元素，只不過這一組中只有一個 DOM 元素而已

getElementsByClassName

<body>

var box = document.getElementsByClassName('box')

console.log(box) // [<div></div>] console.log(box[0]) // <div></div> </script></body>

獲取到的是一組元素，是一個長得和陣列一樣的資料結構，但是不是陣列，是偽陣列
這個一組資料也是按照索引排列的，所以我們想要準確的拿到這個 div，需要用索引來獲取
getElementsByTagName 是用過標籤的標籤名稱來獲取標籤的
因為頁面中可能有多個元素的標籤名稱一樣，所以獲取到的是一組元素
哪怕真的只有一個這個標籤名，那麼也是獲取一組元素，只不過這一組中只有一個 DOM 元素而已

getElementsByTagName

<body>

var box = document.getElementsByTagName('div')

console.log(box) // [<div></div>] console.log(box[0]) // <div></div> </script></body>

和 getElementsByClassName 一樣，獲取到的是一個長得很像陣列的元素
必須要用索引才能得到準確的 DOM 元素
querySelector 是按照選擇器的方式來獲取元素
也就是說，按照我們寫 css 的時候的選擇器來獲取
這個方法只能獲取到一個元素，並且是頁面中第一個滿足條件的元素

querySelector

console.log(document.querySelector('div')) // 獲取頁面中的第一個 div 元素 console.log(docuemnt.querySelector('.box')) // 獲取頁面中第一個有 box 類名的元素console.log(document.querySelector('#box')) // 獲取頁面中第一個 id 名為 box 的元素

querySelectorAll

querySelectorAll 是按照選擇器的方式來獲取元素
這個方法能獲取到所有滿足條件的元素，以一個偽陣列的形式返回

console.log(document.querySelectorAll('div')) // 獲取頁面中的所有的 div 元素 console.log(docuemnt.querySelectorAll('.box')) // 獲取頁面中所有有 box 類名的元素

獲取到的是一組資料，也是需要用索引來獲取到準確的每一個 DOM 元素
透過我們各種獲取元素的方式獲取到頁面中的標籤以後
我們可以直接操作 DOM 元素的屬性，就能直接把效果展示在頁面上
獲取元素內部的 HTML 結構

操作屬性

innerHTML

<body>

<div>

<p>

<span>hello</span>

</p>

</div>

var div = document.querySelector('div')

console.log(div.innerHTML)

/* <p> <span>hello</span> </p> */

</script></body>

設定元素的內容

<body>

var div = document.querySelector('div')

div.innerHTML = '<p>hello</p>'

</script></body>

設定完以後，頁面中的 div 元素裡面就會巢狀一個 p 元素
獲取元素內部的文字（只能獲取到文字內容，獲取不到 html 標籤）

innerText

<body>

<div>

<p>

<span>hello</span>

</p>

</div>

var div = document.querySelector('div')

console.log(div.innerText) // hello </script></body>

可以設定元素內部的文字

<body>

var div = document.querySelector('div')

div.innerText = '<p>hello</p>'

</script></body>

設定完畢以後，會把 <p>hello</p> 當作一個文字出現在 div 元素裡面，而不會把 p 解析成標籤
獲取元素的某個屬性（包括自定義屬性）

getAttribute

<body>

var div = document.querySelector('div')

console.log(div.getAttribute('a')) // 100 console.log(div.getAttribute('class')) // box </script></body>

setAttribute

給元素設定一個屬性（包括自定義屬性）

<body>

var div = document.querySelector('div')

div.setAttribute('a', 100)

div.setAttribute('class', 'box')

console.log(div) // <div a="100" class="box"></div> </script></body>

removeAttribute

直接移除元素的某個屬性

<body>

var div = document.querySelector('div')

div.removeAttribute('class')

console.log(div) // <div a="100"></div> </script></body>

style

專門用來給元素新增 css 樣式的
新增的都是行內樣式

<body>

var div = document.querySelector('div')

div.style.width = "100px"

div.style.height = "100px"

div.style.backgroundColor = "pink"

console.log(div)

// <div style="width: 100px; height: 100px; background-color: pink;"></div> </script></body>

頁面中的 div 就會變成一個寬高都是100，背景顏色是粉色
專門用來操作元素的類名的

className

<body>

var div = document.querySelector('div')

console.log(div.className) // box </script></body>

也可以設定元素的類名，不過是全覆蓋式的操作

<body>

var div = document.querySelector('div')

div.className = 'test'

console.log(div) // <div class="test"></div> </script></body>

在設定的時候，不管之前有沒有類名，都會全部被設定的值覆蓋

好程式設計師web前端培訓JavaScript學習筆記DOM

獲取一個元素

getElementById

getElementsByClassName

getElementsByTagName

querySelector

querySelectorAll

操作屬性

innerHTML

innerText

getAttribute

setAttribute

removeAttribute

style

className

相關文章