一、获取DOM元素
1.获取满足条件的第一个元素
document.querySelector(选择器)
2.获取满足条件的所有元素
document.querySelectorAll(选择器)
<ul>
<li id="apple" data-name="apple">苹果</li>
<li>橘子</li>
<li class="banana">香蕉</li>
<li>柚子</li>
</ul>
let li = document.querySelector('li') // 获取苹果li
let li = document.querySelector('#apple') // 获取苹果Li
let li = document.querySelector('.banana') // 获取香蕉li
let li = document.querySelectorAll('li') // 获取所有li
console.log(li)
二、操作类样式
- 添加类:.classList.add(类名)
- 移除类:.classList.remove(类名)
- 切换类:.classList.toggle(类名)
- 判断类:.classList.contains(类名)
- 获取类:.classList.item(类下标)
<style>
.red {
color: red;
}
.green {
color: green;
}
</style>
<ul>
<li id="apple" data-name="apple">苹果</li>
<li>橘子</li>
<li class="banana">香蕉</li>
<li>柚子</li>
</ul>
// 添加类
li.classList.add('red')
li.classList.add('green')
// 移除类
li.classList.remove('red')
// 切换类
li.classList.toggle('red')
// 判断是否包含类,返回true/false
li.classList.contains('red')
// 获取类样式 参数为类的下标
let a = li.classList.item(0)
console.log(a)
三、自定义属性
1.定义:
规范:
- data-开头
- data-后必须有一个字符(多个单词使用-连接)
建议: - 名称应该都使用小写 不要包含任何的大写字符
- 名称中不要有任何的特殊字符
- 名称不要使用纯数字
<li id="apple" data-name="apple">苹果</li>
<li id="banana" data-fruits-name="banana">香蕉</li>
2.获取自定义属性值
<li id="apple" data-name="apple">苹果</li>
<li id="banana" data-fruits-name="banana">香蕉</li>
let apple = li.dataset['name']
console.log(apple) // apple
let banana = li.dataset['fruitsName']
console.log(banana) // apple