获取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>

获取元素的其他方法

  1. id获取元素

    语法:document.getElementById('id值')

    返回值:一个元素对象

  2. 标签名获取元素

    语法:getElementsByTagName('标签名')

    返回值:标签名匹配的NodeList 对象集合 是个伪数组

  3. 类名获取元素

    语法:document.getElementsByClassName('类名')

    返回值:与类名匹配的NodeList 对象集合 是个伪数组

  4. 获得body

    document.body

  5. 获得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选择器')

posted @   丫丫learning  阅读(68)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
点击右上角即可分享
微信分享提示