选择符Selectors API

1. querySelector()

  • 返回匹配指定CSS选择器的第一个元素
// 第一个class是bar的元素
document.querySelector(".bar").style.backgroundColor = "red";
// 第一个class是bar或者foo的元素
document.querySelector(".bar, .foo").style.backgroundColor = "red";
// 第一个class是同时有bar和foo的元素
document.querySelector(".bar.foo").style.backgroundColor = "red";
  • 替代document.getElementById()

2. querySelectorAll()

  • 返回NodeList对象
  • 替代document.getElementsByClassName()

3. matchesSelector()

  • 返回是否匹配选择符【有兼容性问题，Chrome支持webkitMatchesSelector()】
  • 替代ele.className === "bar foo"

4. 实例(阿里前端面试题)

  • 页面上有一个表格，列表的每一行有一个删除按钮，点击后可以删除该行，请用原生javascript对按钮的删除批量事件
<html>
<head>
  <title>表格</title>
  <style> #table { width: 600px; background: #fff; margin: 0; padding: 0; } .item { display: flex; text-align: left; list-style-type: none; width: 600px; height: 20px; line-height: 20px; font-size: 14px; border-bottom: 1px solid #999999; } .content { padding-left: 10px; width: 400px; } .btn { width: 200px; text-align: center; } </style>
</head>
<body>
  <ul id="table">
    <li class="item"><span class="content">Item1</span><a class="J_Btn btn" href="javascript:void(0);">x</a></li>
    <li class="item"><span class="content">Item2</span><a class="J_Btn btn" href="javascript:void(0);">x</a></li>
    <li class="item"><span class="content">Item3</span><a class="J_Btn btn" href="javascript:void(0);">x</a></li>
  </ul>
  <script> // 方法一: var buttons = document.querySelectorAll(".J_Btn.btn"); for(let i = 0; i < buttons.length; i++){ buttons[i].addEventListener("click", function(e){ e.target.parentNode.remove(); }) } // 方法二： var table = document.querySelector("#table"); table.addEventListener("click", function(e){ if(e.target.webkitMatchesSelector(".J_Btn.btn")){ e.target.parentNode.remove(); } }) </script>
</body>
</html>