HTML5 获取DOM元素 操作类样式 以及自定义属性

一、获取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.定义：

规范：

1. data-开头
2. data-后必须有一个字符（多个单词使用-连接）
   建议：
3. 名称应该都使用小写 不要包含任何的大写字符
4. 名称中不要有任何的特殊字符
5. 名称不要使用纯数字

<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

web前端交流QQ群：327814892