获取元素的方式
document.querySelector()和doucument.querySelectorAll()的区别
作用:
document.querySelector()获取文档中满足条件的第一个元素节点，返回的是整个标签
例:
获取第一个满足条件id节点document.querySelector('#id')
获取第一个满足条件class节点document.querySelector('.class')
获取第一个满足条件tag节点document.querySelector('tag')
document.querySelectorAll()获取文档中满足条件的所有元素节点,返回的是伪数组，获取的是伪数组，无法直接操作,必须通过下标才能操作，所以我们对伪数组进行遍历for和forEach
例:
获取所有满足条件id节点document.querySelectorAll('#id')
获取所有满足条件class节点document.querySelectorAll('.class')
获取所有满足条件tag节点document.querySelectorAll('tag')
区别:
一、
- document.querySelector()返回的是整个标签
- document.querySelectorAll()返回的是伪数组
二、
- document.querySelector()获取的元素可以直接操作
- document.querySelectorAll()获取的元素是一个伪数组，需要遍历进行操作
三、
- document.querySelector()获取不到的元素返回null
- document.querySelectorAll()获取不到元素返回一个空伪数组 注意:常见的报错
1、document.querySelector()获取元素不成功
不能够 读取 属性 使用 null 读取 style, 一般就是因为元素获取不成功，返回了null
2、
Cannot set properties of undefined (setting 'color'):不能使用undefined设置属性color， 因为document.querySelectorAll()返回的是伪数组它是一个对象,当你.style相等于访问里style当中的元素，如果找不到就返回undefined，然后你再用undefined设置属性color就会报错。
总结
- 访问一个未定义的对象： *** is not defined
- 访问一个对象不存在的属性，返回undefined
其他获取元素的方法
- document.getElementById()获取符合条件的第一个id元素
- document.getElementsByTagName()获取符合条件的tag标签，以伪数组的方式返回
- document.getElementsByClassName()获取符合条件的class，以伪数组的方式返回
属性的分类
一般来说属性有两种：内置属性、自定义属性
常规标签内置属性
- div p span： id class name style
- a: href
- img: src alt title
- input: type max min maxlength value id name class
设置和修改元素内容innerText和innerHTML
作用:
- innerText: 只关注内容, 不关注标签
- innerHTML：可以解析标签
使用场所:
- 如果要解析标签内容，就使用innerHTML,动态渲染、富文本框
- 不明确数据的安全性的情况下, 使用innerText
注意: innerText和innerHTML为标签设置标签之间的内容，针对于双标签而言
className和calssList的区别
一、className:会覆盖掉原来的类名 二、classList中有四种方法:
- add(在当前类添加一个或多个类名)
- remove(移除元素节点中的特定类名)
- toggle(元素节点中类名切换)
- contains(判断元素节点中类名是否存在，存在就返回true，否则返回false)；
className用于单类名修改和移除，如果有多类名在其中不推荐使用，因为会覆盖掉原来因有的类名从而造成样式破坏。
classList就比较灵活比较符合日常开发需求。
例如:
html和js
<body>
<button>添加一个字体大小样式</button>
<button class="second">移除一个字体大小样式</button>
<button>切换一个字体大小样式</button>
<button>判断元素是否有某个样式</button>
<p class="red">我是百变p元素</p>
<script>
let p = document.querySelector('p')
let btn1 = document.querySelector('button')
let btn2 = document.querySelector('.second')
let btn3 = document.querySelector('button:nth-of-type(3)')
let btn4 = document.querySelectorAll('button')[3]
btn1.addEventListener('click', function() {
// classList.add：在经之前的样式的基础之上新增一个新的样式类名，“不影响”元素之前的样式
// p.classList.add('新样式类名')
// 参数不用再添加.标记了，因为它只能对类名样式进行处理
p.classList.add('size50', 'underline')
})
btn2.addEventListener('click', function() {
// classList.remove:移除指定名称的样式，不影响元素其它的样式类名
p.classList.remove('size50')
})
btn3.addEventListener('click', function() {
// classList.toggle:切换元素的样式，如果没有就添加，如果有就移除
p.classList.toggle('size50')
})
btn4.addEventListener('click', function() {
// classList.contains:判断当前元素是否包含某个指定名称的样式，如果有就返回true,如果没有返回false
let flag = p.classList.contains('size50')
console.log(flag)
})
</script>
</body>
css
<style>
.red {
color: red;
}
.size50 {
font-size: 50px;
}
.underline {
text-decoration: underline;
}
</style>
