JavaScript中的document.querySelector()方法使用详解_Javascript

1. document.queryselector

document.queryselector 可以获取文档中的第一个匹配的元素。
这个函数返回匹配的元素（如果找到了匹配项），否则返回 null

1.1 语法：

const element = document.queryselector(selector);

1.2 示例

以下示例，包含根据标签名选择，类名选择，属性名等选择元素

<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>node-link tree</title>
  </head>

  <body>
    <div class="container">
      <h1>你好，2024！</h1>
      <h2>你好.冬天</h2>
      <p>龙马精神</p>
      <span class="first">龙年大吉</span>
      <p class="first">龙凤呈祥</p>
      <br />
      <a target="self">1.龙年行大运，祥瑞照门庭。岁月悠悠，情谊绵长，感恩有您相伴。愿您在新的一年里，如龙腾飞，事业兴旺；如龙入海，生活美满。祝您龙年吉祥如意！
      </a>
      <br>
      <a target="_blank">龙年到来，祥瑞满天。愿您如龙般矫健，事业腾飞；如龙鳞闪耀，生活美满。祝您龙年大吉，万事如意！
      </a>
    </div>
    <script>
      // 标签名为 p 的第一个元素
      document.queryselector("p").style.color = "red";
      // class="first" 的第一个元素:
      document.queryselector(".first").style.color = "green";
      //签名为 p，且class="first" 的第一个元素
      document.queryselector("p.first").style.background = "pink";

      //带target属性的第一个a元素
      document.queryselector("a[target]").style.background = "skyblue";
      //target属性为_blank的第一个a元素
      document.queryselector("a[target='_blank']").style.background = "skyblue";

      //多元素选择时，根据文档，哪个在前面就先匹配哪个
      document.queryselector("h1,h2").style.backgroundcolor = "yellow";
    </script>
  </body>
</html>

2.queryselectorall()

当页面中出现多个相同class标签(或者多个相同标签(比如多个div))时，如果你需要返回所有的元素，请使用 queryselectorall() 方法替代。

该方法返回所有满足条件的元素，结果是个nodelist集合。查找规则与前面所述一样。 ---->queryselectorall 得到一个伪数组 dom。

parentnode.queryselectorall()的结果是nodelist数组，但是又不是一般的js数组（array），所以也不能直接调用array的方法

<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>node-link tree</title>
  </head>

  <body>
    <div class="container">
      <p>龙马精神</p>
      <p class="first">龙凤呈祥</p>
    </div>
    <script>
    
      // 标签名为 p 的第一个元素
      var pall = document.queryselectorall("p")
      pall[0].style.color = 'pink'
      console.log(pall)
      
    </script>
  </body>
</html>

3.document.queryselector.bind和document.queryselectorall.bind

定义全局的变量，方便直接获取dom

<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>node-link tree</title>
  </head>

  <body>
    <div class="container">
      <p>龙马精神</p>
      <span class="first">龙年大吉</span>
      <p class="first">龙凤呈祥</p>
    </div>
    <script>
        var query = document.queryselector.bind(document);
        var query_tagname = query('p')
        console.log(query_tagname)
        query_tagname.style.color = 'red'
    </script>
  </body>
</html>