前端获取div里面的标签_web前端教程JavaScript学习笔记DOM
web前端教程JavaScript學(xué)習(xí)筆記 DOM一DOM（Document Object Model）： 文檔對象模型
其實(shí)就是操作 html 中的標(biāo)簽的一些能力
我們可以操作哪些內(nèi)容
獲取一個(gè)元素
移除一個(gè)元素
創(chuàng)建一個(gè)元素
向頁面里面添加一個(gè)元素
給元素綁定一些事件
獲取元素的屬性
給元素添加一些 css 樣式
...
DOM 的核心對象就是 docuemnt 對象
document 對象是瀏覽器內(nèi)置的一個(gè)對象，里面存儲著專門用來操作元素的各種方法
DOM： 頁面中的標(biāo)簽，我們通過 js 獲取到以后，就把這個(gè)對象叫做 DOM 對象
獲取一個(gè)元素
- 通過 js 代碼來獲取頁面中的標(biāo)簽
- 獲取到以后我們就可以操作這些標(biāo)簽了
- getElementById 是通過標(biāo)簽的 id 名稱來獲取標(biāo)簽的
- 因?yàn)樵谝粋€(gè)頁面中 id 是唯一的，所以獲取到的就是一個(gè)元素
getElementById
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box')
console.log(box) // <div></div> </script></body>
- 獲取到的就是頁面中的那個(gè) id 為 box 的 div 標(biāo)簽
- getElementsByClassName 是用過標(biāo)簽的 class 名稱來獲取標(biāo)簽的
- 因?yàn)轫撁嬷锌赡苡卸鄠€(gè)元素的 class 名稱一樣，所以獲取到的是一組元素
- 哪怕你獲取的 class 只有一個(gè)，那也是獲取一組元素，只不過這一組中只有一個(gè) DOM 元素而已
getElementsByClassName
<body>
<div calss="box"></div>
<script>
var box = document.getElementsByClassName('box')
console.log(box) // [<div></div>] console.log(box[0]) // <div></div> </script></body>
- 獲取到的是一組元素，是一個(gè)長得和數(shù)組一樣的數(shù)據(jù)結(jié)構(gòu)，但是不是數(shù)組，是偽數(shù)組
- 這個(gè)一組數(shù)據(jù)也是按照索引排列的，所以我們想要準(zhǔn)確的拿到這個(gè) div，需要用索引來獲取
- getElementsByTagName 是用過標(biāo)簽的 標(biāo)簽 名稱來獲取標(biāo)簽的
- 因?yàn)轫撁嬷锌赡苡卸鄠€(gè)元素的 標(biāo)簽 名稱一樣，所以獲取到的是一組元素
- 哪怕真的只有一個(gè)這個(gè)標(biāo)簽名，那么也是獲取一組元素，只不過這一組中只有一個(gè) DOM 元素而已
getElementsByTagName
<body>
<div></div>
<script>
var box = document.getElementsByTagName('div')
console.log(box) // [<div></div>] console.log(box[0]) // <div></div> </script></body>
- 和 getElementsByClassName 一樣，獲取到的是一個(gè)長得很像數(shù)組的元素
- 必須要用索引才能得到準(zhǔn)確的 DOM 元素
- querySelector 是按照選擇器的方式來獲取元素
- 也就是說，按照我們寫 css 的時(shí)候的選擇器來獲取
- 這個(gè)方法只能獲取到一個(gè)元素，并且是頁面中第一個(gè)滿足條件的元素
querySelector
console.log(document.querySelector('div')) // 獲取頁面中的第一個(gè) div 元素 console.log(docuemnt.querySelector('.box')) // 獲取頁面中第一個(gè)有 box 類名的元素console.log(document.querySelector('#box')) // 獲取頁面中第一個(gè) id 名為 box 的元素
querySelectorAll
- querySelectorAll 是按照選擇器的方式來獲取元素
- 這個(gè)方法能獲取到所有滿足條件的元素，以一個(gè)偽數(shù)組的形式返回
console.log(document.querySelectorAll('div')) // 獲取頁面中的所有的 div 元素 console.log(docuemnt.querySelectorAll('.box')) // 獲取頁面中所有有 box 類名的元素
- 獲取到的是一組數(shù)據(jù)，也是需要用索引來獲取到準(zhǔn)確的每一個(gè) DOM 元素
- 通過我們各種獲取元素的方式獲取到頁面中的標(biāo)簽以后
- 我們可以直接操作 DOM 元素的屬性，就能直接把效果展示在頁面上
- 獲取元素內(nèi)部的 HTML 結(jié)構(gòu)
操作屬性
innerHTML
<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 元素里面就會(huì)嵌套一個(gè) p 元素
- 獲取元素內(nèi)部的文本（只能獲取到文本內(nèi)容，獲取不到 html 標(biāo)簽）
innerText
<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è)置完畢以后，會(huì)把 <p>hello</p> 當(dāng)作一個(gè)文本出現(xiàn)在 div 元素里面，而不會(huì)把 p 解析成標(biāo)簽
- 獲取元素的某個(gè)屬性（包括自定義屬性）
getAttribute
<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>
setAttribute
- 給元素設(shè)置一個(gè)屬性（包括自定義屬性）
<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>
removeAttribute
- 直接移除元素的某個(gè)屬性
<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>
style
- 專門用來給元素添加 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 就會(huì)變成一個(gè)寬高都是100，背景顏色是粉色
- 專門用來操作元素的 類名的
className
<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í)候，不管之前有沒有類名，都會(huì)全部被設(shè)置的值覆蓋
總結(jié)
以上是生活随笔為你收集整理的前端获取div里面的标签_web前端教程JavaScript学习笔记DOM的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 香农定理和奈奎斯特定理区别_「中考复习」
- 下一篇： springboot nacos配置中心