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

更新時間：2024年06月22日 10:00:42 作者：口袋の的天空

HTML的DOM querySelector()方法可以不需要額外的jQuery等支持,也可以方便的獲取DOM元素,語法跟jQuery類似,這篇文章主要給大家介紹了關(guān)于JavaScript中document.querySelector()方法使用的相關(guān)資料,需要的朋友可以參考下

1. document.querySelector

document.querySelector 可以獲取文檔中的第一個匹配的元素。
這個函數(shù)返回匹配的元素（如果找到了匹配項），否則返回 null

1.1 語法：

const element = document.querySelector(selector);

1.2 示例

以下示例，包含根據(jù)標簽名選擇，類名選擇，屬性名等選擇元素

<!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.龍年行大運，祥瑞照門庭。歲月悠悠，情誼綿長，感恩有您相伴。愿您在新的一年里，如龍騰飛，事業(yè)興旺；如龍入海，生活美滿。祝您龍年吉祥如意！
      </a>
      <br>
      <a target="_blank">龍年到來，祥瑞滿天。愿您如龍般矯健，事業(yè)騰飛；如龍鱗閃耀，生活美滿。祝您龍年大吉，萬事如意！
      </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";

      //多元素選擇時，根據(jù)文檔，哪個在前面就先匹配哪個
      document.querySelector("h1,h2").style.backgroundColor = "yellow";
    </script>
  </body>
</html>

2.querySelectorAll()

當頁面中出現(xiàn)多個相同class標簽(或者多個相同標簽(比如多個div))時，如果你需要返回所有的元素，請使用 querySelectorAll() 方法替代。

該方法返回所有滿足條件的元素，結(jié)果是個nodeList集合。查找規(guī)則與前面所述一樣。 ---->querySelectorAll 得到一個偽數(shù)組 DOM。

ParentNode.querySelectorAll()的結(jié)果是NodeList數(shù)組，但是又不是一般的js數(shù)組（Array），所以也不能直接調(diào)用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>

附：使用document.querySelector()搜索時,點‘.‘和井號‘#‘的用法

document.querySelector()用于選擇文檔中的元素，你可以根據(jù)元素的類型（標簽名div/span）、類名(class)、或 id 來進行選擇。在使用時，可以根據(jù)以下規(guī)則來確定何時使用點 (`.`) 和何時使用井號 (`#`)：

1. 使用點 (`.`)：

當你希望選擇具有特定類名的元素時，使用點。

例如，`document.querySelector('.classname')` 會選擇具有指定類名的元素。

例如，<div class="box"></div> ，你可以使用 `document.querySelector('.box')` 來選擇它。

2. 使用井號 (`#`)：

當你希望選擇具有特定 id 的元素時，使用井號。

例如，`document.querySelector('#elementId')` 會選擇具有指定 id 的元素。

例如， <div id="myDiv"></div>，你可以使用 `document.querySelector('#myDiv')` 來選擇它。

3. 使用標簽名：

如果你想選擇特定類型的元素，只需提供標簽名即可。

例如，`document.querySelector('div')` 會選擇頁面上的第一個 `<div>` 元素。

這不需要點 (`.`) 或井號 (`#`) 前綴。

總之，前綴點 (`.`) 用于選擇類名，前綴井號 (`#`) 用于選擇 id，而不使用前綴時用于選擇標簽名。根據(jù)需要選擇適當?shù)那熬Y，以便準確地選擇目標元素。

總結(jié)

到此這篇關(guān)于JavaScript中document.querySelector()方法使用詳解的文章就介紹到這了,更多相關(guān)js document.querySelector()方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: