當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
JavaScript-操作DOM对象-获得dom节点
生活随笔
收集整理的這篇文章主要介紹了
JavaScript-操作DOM对象-获得dom节点
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
核心
瀏覽器網(wǎng)頁(yè)就是一個(gè)Dom樹形結(jié)構(gòu)！
- 更新： 更新Dom節(jié)點(diǎn)
- 遍歷dom節(jié)點(diǎn)：得到Dom節(jié)點(diǎn)
- 刪除： 刪除一個(gè)Dom節(jié)點(diǎn)
- 添加： 添加一個(gè)新的節(jié)點(diǎn)
要操作一個(gè)Dom節(jié)點(diǎn)，就必須要先獲得這個(gè)Dom節(jié)點(diǎn)
獲得dom節(jié)點(diǎn)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div id="father"><h1>標(biāo)題1</h1><h1>標(biāo)題2</h1><p id="p1">p1</p><p class="p2">p2</p> </div> <script>// 對(duì)應(yīng)css 選擇器let h1 = document.getElementsByTagName('h1')let p1 = document.getElementById('p1')let p2 = document.getElementsByClassName('p2')let father = document.getElementById('father')console.log(h1)console.log(p1)console.log(p2)console.log(father)// 獲取父節(jié)點(diǎn)下的所有子節(jié)點(diǎn)let childrens = father.childrenconsole.log(childrens)// 獲取父節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)console.log(father.firstChild)console.log(father.firstElementChild)// 獲取父節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)console.log(father.lastChild)console.log(father.lastElementChild) </script> </body> </html>https://www.bilibili.com/video/BV1JJ41177di?p=20
總結(jié)
以上是生活随笔為你收集整理的JavaScript-操作DOM对象-获得dom节点的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小程序开发(9)-之地图组件map、导航
- 下一篇： JavaScript-引入JavaScr