JS選擇器詳解

一、JS選擇器有哪些

JS選擇器是用來選取HTML元素的方法，常用的JS選擇器有以下幾種：

• document.getElementById()
• document.getElementsByTagName()
• document.getElementsByClassName()
• document.querySelector()
• document.querySelectorAll()

二、JS過濾選擇器

JS選擇器還可以根據一些屬性或者屬性值來過濾選取元素，例如：

  const links = document.querySelectorAll("a[href^='https://']");
  // 上面的選擇器選取的是所有鏈接（<a>標籤），並且鏈接地址（href屬性）以"https://"開頭的元素

三、JS選擇器not

JS選擇器還支持not過濾器，可以排除某些元素，例如：

  const notFirstLi = document.querySelectorAll("li:not(:first-child)");
  // 上面的選擇器選取的是所有li元素，但是排除了第一個子元素

四、JS選擇器正則匹配

JS選擇器還支持正則表達式作為選擇器，以匹配更靈活的選擇器，例如：

  const submitButtons = document.querySelectorAll("button[type^='submit|reset']");
  // 上面的選擇器選取的是所有button元素，且type屬性以"submit"或者"reset"開頭的元素

五、JS選擇器過濾器

JS選擇器還有很多過濾器來幫助我們選取更精確的元素，例如：

• :checked – 選取所有選中的輸入元素
• :disabled – 選取所有禁用的輸入元素
• :empty – 選取所有沒有子元素的元素
• :nth-child(n) – 選取所有在其父元素中的第n個子元素

六、JS選擇器框架

JS選擇器也可以在各種JS框架中使用，例如jQuery和React等

  // jQuery選擇器
  const paragraph = $("p");

  // React選擇器
  const element = <div className="container"></div>;
  const container = element.props.className === "container";

七、JS選擇器優先順序和權重

JS選擇器也支持優先順序和權重的概念，例如：

  // 上面的選擇器先選取ID為example的元素，再過濾選取class為active的元素
  const exampleActive = document.querySelectorAll("#example.active");

  // 上面的選擇器選取所有class為active的元素，並排除掉所有class為inactive的元素
  const activeNotInactive = document.querySelectorAll(".active:not(.inactive)");

八、JS選擇器使用

JS選擇器的使用非常靈活，可以根據我們的需要來選擇合適的選擇器進行選取元素，示例代碼如下：

  <div id="example">
    <h2 class="section-title">標題</h2>
    <p class="section-description">描述</p>
    <button class="btn btn-primary">按鈕</button>
  </div>

  const title = document.querySelector(".section-title");
  const description = document.querySelector(".section-description");
  const button = document.querySelector("button.btn-primary");

總之，JS選擇器是一個非常重要的概念，對於Web開發來說，學好JS選擇器能夠使我們的元素選取更加靈活和高效。