溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
JavaScript中的DOM是怎樣的，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。
其實就是操作 html 中的標簽的一些能力
我們可以操作哪些內(nèi)容
獲取一個元素
移除一個元素
創(chuàng)建一個元素
向頁面里面添加一個元素
給元素綁定一些事件
獲取元素的屬性
給元素添加一些 css 樣式
...
DOM 的核心對象就是 docuemnt 對象
document 對象是瀏覽器內(nèi)置的一個對象，里面存儲著專門用來操作元素的各種方法
DOM： 頁面中的標簽，我們通過 js 獲取到以后，就把這個對象叫做 DOM 對象
通過 js 代碼來獲取頁面中的標簽
獲取到以后我們就可以操作這些標簽了
getElementById 是通過標簽的 id 名稱來獲取標簽的
因為在一個頁面中 id 是唯一的，所以獲取到的就是一個元素
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box')
console.log(box) // <div></div> </script></body>
獲取到的就是頁面中的那個 id 為 box 的 div 標簽
getElementsByClassName 是用過標簽的 class 名稱來獲取標簽的
因為頁面中可能有多個元素的 class 名稱一樣，所以獲取到的是一組元素
哪怕你獲取的 class 只有一個，那也是獲取一組元素，只不過這一組中只有一個 DOM 元素而已
<body>
<div calss="box"></div>
<script>
var box = document.getElementsByClassName('box')
console.log(box) // [<div></div>] console.log(box[0]) // <div></div> </script></body>
獲取到的是一組元素，是一個長得和數(shù)組一樣的數(shù)據(jù)結(jié)構(gòu)，但是不是數(shù)組，是偽數(shù)組
這個一組數(shù)據(jù)也是按照索引排列的，所以我們想要準確的拿到這個 div，需要用索引來獲取
getElementsByTagName 是用過標簽的 標簽 名稱來獲取標簽的
因為頁面中可能有多個元素的 標簽 名稱一樣，所以獲取到的是一組元素
哪怕真的只有一個這個標簽名，那么也是獲取一組元素，只不過這一組中只有一個 DOM 元素而已
<body>
<div></div>
<script>
var box = document.getElementsByTagName('div')
console.log(box) // [<div></div>] console.log(box[0]) // <div></div> </script></body>
和 getElementsByClassName 一樣，獲取到的是一個長得很像數(shù)組的元素
必須要用索引才能得到準確的 DOM 元素
querySelector 是按照選擇器的方式來獲取元素
也就是說，按照我們寫 css 的時候的選擇器來獲取
這個方法只能獲取到一個元素，并且是頁面中第一個滿足條件的元素
console.log(document.querySelector('div')) // 獲取頁面中的第一個 div 元素 console.log(docuemnt.querySelector('.box')) // 獲取頁面中第一個有 box 類名的元素console.log(document.querySelector('#box')) // 獲取頁面中第一個 id 名為 box 的元素
querySelectorAll 是按照選擇器的方式來獲取元素
這個方法能獲取到所有滿足條件的元素，以一個偽數(shù)組的形式返回
console.log(document.querySelectorAll('div')) // 獲取頁面中的所有的 div 元素 console.log(docuemnt.querySelectorAll('.box')) // 獲取頁面中所有有 box 類名的元素
獲取到的是一組數(shù)據(jù)，也是需要用索引來獲取到準確的每一個 DOM 元素
通過我們各種獲取元素的方式獲取到頁面中的標簽以后
我們可以直接操作 DOM 元素的屬性，就能直接把效果展示在頁面上
獲取元素內(nèi)部的 HTML 結(jié)構(gòu)
<body>
<div>
<p>
<span>hello</span>
</p>
</div>
<script>
var div = document.querySelector('div')
console.log(div.innerHTML)
/* <p> <span>hello</span> </p> */
</script></body>
設(shè)置元素的內(nèi)容
<body>
<div></div>
<script>
var div = document.querySelector('div')
div.innerHTML = '<p>hello</p>'
</script></body>
設(shè)置完以后，頁面中的 div 元素里面就會嵌套一個 p 元素
獲取元素內(nèi)部的文本（只能獲取到文本內(nèi)容，獲取不到 html 標簽）
<body>
<div>
<p>
<span>hello</span>
</p>
</div>
<script>
var div = document.querySelector('div')
console.log(div.innerText) // hello </script></body>
可以設(shè)置元素內(nèi)部的文本
<body>
<div></div>
<script>
var div = document.querySelector('div')
div.innerText = '<p>hello</p>'
</script></body>
設(shè)置完畢以后，會把 <p>hello</p> 當作一個文本出現(xiàn)在 div 元素里面，而不會把 p 解析成標簽
獲取元素的某個屬性（包括自定義屬性）
<body>
<div a="100" class="box"></div>
<script>
var div = document.querySelector('div')
console.log(div.getAttribute('a')) // 100 console.log(div.getAttribute('class')) // box </script></body>
給元素設(shè)置一個屬性（包括自定義屬性）
<body>
<div></div>
<script>
var div = document.querySelector('div')
div.setAttribute('a', 100)
div.setAttribute('class', 'box')
console.log(div) // <div a="100" class="box"></div> </script></body>
直接移除元素的某個屬性
<body>
<div a="100" class="box"></div>
<script>
var div = document.querySelector('div')
div.removeAttribute('class')
console.log(div) // <div a="100"></div> </script></body>
專門用來給元素添加 css 樣式的
添加的都是行內(nèi)樣式
<body>
<div></div>
<script>
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，背景顏色是粉色
專門用來操作元素的 類名的
<body>
<div class="box"></div>
<script>
var div = document.querySelector('div')
console.log(div.className) // box </script></body>
也可以設(shè)置元素的類名，不過是全覆蓋式的操作
<body>
<div class="box"></div>
<script>
var div = document.querySelector('div')
div.className = 'test'
console.log(div) // <div class="test"></div> </script></body>
在設(shè)置的時候，不管之前有沒有類名，都會全部被設(shè)置的值覆蓋
看完上述內(nèi)容，你們掌握JavaScript中的DOM是怎樣的的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
