获取DOM对象
DOM对象
概念:
浏览器根据html标签生成的 JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
DOM的核心思想
把网页内容当做对象来处理
获取DOM对象
根据CSS选择器来获取DOM元素
获取单个元素
语法: document.querySelector('css选择器')
参数:
包含一个或多个有效的CSS选择器 字符串
返回值:
CSS选择器匹配的第一个元素,一个 HTMLElement对象。
如果没有匹配到,则返回null。
<div id="c1">123</div> <div class="box">abc</div> <p>段落</p> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script> const div1 = document.querySelector('#c1') console.log(div1) const div2 = document.querySelector('.box') console.log(div2) const p = document.querySelector('p') console.log(p) const li = document.querySelector('ul li:nth-child(2)') console.log(li) const div3 = document.querySelector('div:nth-child(5)') console.log(div3) </script>
获取多个元素
语法 :document.querySelectorAll('css选择器')
参数:
包含一个或多个有效的CSS选择器 字符串
返回值:
CSS选择器匹配的NodeList 对象集合 是个伪数组
伪数组 有下标.legth属性 但不可以使用数组方法:增加/删除/修改
<div>1</div> <div>2</div> <div>3</div> <div>4</div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <div>hellow</div> <script> const divs = document.querySelectorAll('div') console.log(divs) for (let i = 0; i < divs.length; i++) { console.log(divs[i].innerText) } const lis = document.querySelectorAll('ul li') console.log(lis) </script>
注意
1.哪怕页面只有一个元素,返回的也是伪数组
2.灵活性
<h2>标题</h2> <div class="box"> <p>1</p> <p>2</p> <p>3</p> <p>5</p> </div> <p>p标签</p> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <script> // 注意 // 1.哪怕页面只有一个元素,返回的也是伪数组 const h2s = document.querySelectorAll('h2') // 2.灵活性 // 获取页面中所有p标签 const ps1 = document.querySelectorAll('p') console.log(ps1) // 获取.box中的p标签 // 法一 // const ps2 = document.querySelectorAll('.box p') // 法二 const div = document.querySelector('.box') const ps2 = div.querySelectorAll('p') for (let i = 0; i < ps2.length; i++) { console.log(ps2[i].innerText) } </script>
获取元素的其他方法
-
id获取元素
语法:document.getElementById('id值')
返回值:一个元素对象
-
标签名获取元素
语法:getElementsByTagName('标签名')
返回值:标签名匹配的NodeList 对象集合 是个伪数组
-
类名获取元素
语法:document.getElementsByClassName('类名')
返回值:与类名匹配的NodeList 对象集合 是个伪数组
-
获得body
document.body
-
获得html
document.documentElement
<div class="box">123</div> <div id="father">345</div> <p>标签</p> <script> // id获取元素 const div = document.getElementById('father') console.log(div) // 标签名获取元素 const divs = document.getElementsByTagName('div') console.log(divs) // 类名获取元素 const divs2 = document.getElementsByClassName('box') console.log(divs2) // body console.log(document.body) // html console.log(document.documentElement) </script>
目前常用:
document.querySelector('css选择器')
document.querySelectorAll('css选择器')
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性