javascript
前端获取div里面的标签_web前端教程JavaScript学习笔记DOM
web前端教程JavaScript學習筆記 DOM一DOM（Document Object Model）： 文檔對象模型
其實就是操作 html 中的標簽的一些能力
我們可以操作哪些內容
獲取一個元素
移除一個元素
創建一個元素
向頁面里面添加一個元素
給元素綁定一些事件
獲取元素的屬性
給元素添加一些 css 樣式
...
DOM 的核心對象就是 docuemnt 對象
document 對象是瀏覽器內置的一個對象，里面存儲著專門用來操作元素的各種方法
DOM： 頁面中的標簽，我們通過 js 獲取到以后，就把這個對象叫做 DOM 對象
獲取一個元素
- 通過 js 代碼來獲取頁面中的標簽
- 獲取到以后我們就可以操作這些標簽了
- getElementById 是通過標簽的 id 名稱來獲取標簽的
- 因為在一個頁面中 id 是唯一的，所以獲取到的就是一個元素
getElementById
<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 元素而已
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>
- 獲取到的是一組元素，是一個長得和數組一樣的數據結構，但是不是數組，是偽數組
- 這個一組數據也是按照索引排列的，所以我們想要準確的拿到這個 div，需要用索引來獲取
- getElementsByTagName 是用過標簽的 標簽 名稱來獲取標簽的
- 因為頁面中可能有多個元素的 標簽 名稱一樣，所以獲取到的是一組元素
- 哪怕真的只有一個這個標簽名，那么也是獲取一組元素，只不過這一組中只有一個 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 一樣，獲取到的是一個長得很像數組的元素
- 必須要用索引才能得到準確的 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>
<script>
var div = document.querySelector('div')
console.log(div.innerHTML)
/* <p> <span>hello</span> </p> */
</script></body>
- 設置元素的內容
<body>
<div></div>
<script>
var div = document.querySelector('div')
div.innerHTML = '<p>hello</p>'
</script></body>
- 設置完以后，頁面中的 div 元素里面就會嵌套一個 p 元素
- 獲取元素內部的文本（只能獲取到文本內容，獲取不到 html 標簽）
innerText
<body>
<div>
<p>
<span>hello</span>
</p>
</div>
<script>
var div = document.querySelector('div')
console.log(div.innerText) // hello </script></body>
- 可以設置元素內部的文本
<body>
<div></div>
<script>
var div = document.querySelector('div')
div.innerText = '<p>hello</p>'
</script></body>
- 設置完畢以后，會把 <p>hello</p> 當作一個文本出現在 div 元素里面，而不會把 p 解析成標簽
- 獲取元素的某個屬性（包括自定義屬性）
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
- 給元素設置一個屬性（包括自定義屬性）
<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
- 直接移除元素的某個屬性
<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 樣式的
- 添加的都是行內樣式
<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，背景顏色是粉色
- 專門用來操作元素的 類名的
className
<body>
<div class="box"></div>
<script>
var div = document.querySelector('div')
console.log(div.className) // box </script></body>
- 也可以設置元素的類名，不過是全覆蓋式的操作
<body>
<div class="box"></div>
<script>
var div = document.querySelector('div')
div.className = 'test'
console.log(div) // <div class="test"></div> </script></body>
- 在設置的時候，不管之前有沒有類名，都會全部被設置的值覆蓋
總結
以上是生活随笔為你收集整理的前端获取div里面的标签_web前端教程JavaScript学习笔记DOM的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 香农定理和奈奎斯特定理区别_「中考复习」
- 下一篇： python为什么用linux_为何Py