Javascript之查找元素

api介绍

• document.getElementById - 根据 id 值查找一个元素

• [document|元素].querySelector - 根据选择器查找第一个匹配元素

• [document|元素].querySelectorAll - 根据选择器查找所有匹配元素

案例

<div>
    <div class="title">学生列表</div>
    <div class="thead">
        <div class="row bold">
            <div class="col">编号</div>
            <div class="col">姓名</div>
            <div class="col">性别</div>
            <div class="col">年龄</div>
        </div>
    </div>
    <div class="tbody">
        <div class="row">
            <div class="col">1</div>
            <div class="col">张三</div>
            <div class="col">男</div>
            <div class="col">18</div>
        </div>
    </div>
</div>

document.querySelector('.title'); // 找到 <div class="title">学生列表</div>

document.querySelector('.col'); // 找到 <div class="col">编号</div>

document.querySelectorAll('.col');

/*
  找到的是一个集合
  <div class="col">编号</div>
  <div class="col">姓名</div>
  <div class="col">性别</div>
  <div class="col">年龄</div>
  <div class="col">1</div>
  <div class="col">张三</div>
  <div class="col">男</div>
  <div class="col">18</div>
*/

const thead = document.querySelector('.thead');

// 只在 thead 元素范围内找
thead.querySelectorAll('.col');

/*
  找到的是一个集合
  <div class="col">编号</div>
  <div class="col">姓名</div>
  <div class="col">性别</div>
  <div class="col">年龄</div>
*/

注意：类选择器前面都需要加上“.”

根据 id 属性查找

document.getElementById("id值")

document.querySelector("#id值")

可以看到前者操作还是比较方便的