如何建立一個函數 `generateSelector` 來產生 DOM 元素的 CSS 選擇器路徑？-css教學-PHP中文網

首頁

web前端

css教學

如何建立一個函數 `generateSelector` 來產生 DOM 元素的 CSS 選擇器路徑？

王林

Sep 20, 2023 pm 06:17 PM

如何创建一个函数 `generateSelector` 来生成 DOM 元素的 CSS 选择器路径？

generateSelector 方法是一個有用的工具，用於確定網站特定部分（稱為 DOM 元素）的路徑。了解 CSS 選擇器的工作原理以及如何建立它們在各種情況下都非常有用，例如測試自動化或建立用於輕鬆選擇元素的快捷方式。我們將在本文中討論該函數的概念並提供如何使用它的清晰範例。

假設您想要更改網站上的一個特定元素。但你怎麼知道要使用哪個選擇器呢？這就是我們的generateSelector 函數發揮作用的地方！此函數將獲取網站上的特定元素，並為我們提供可用於更改它的選擇器。

了解 CSS 選擇器

在我們深入研究generateSelector函數的創建之前，了解什麼是CSS選擇器及其操作背後的原理至關重要。

CSS 選擇器是用來選擇頁面上需要樣式的 HTML 元素的模式。它們是 CSS 樣式表的一個基本面，作為將樣式應用到特定元素的一種手段。

範例

以下 CSS 規則利用選擇器來定位頁面上的所有

元素，並將顏色的樣式屬性指派為紅色 -

<!DOCTYPE html>
<html>
<head>
   <style>
      p {
         color: red;
      }
   </style>
</head>
<body>
   <p>This text will be red.</p>
</body> 
</html>

範例

CSS規則中的p是選擇器。 CSS 選擇器可能比元素的標籤名稱複雜得多。它們可用於根據元素的類別、ID、屬性值等來選擇元素。例如 -

<!DOCTYPE html>
<html>
<head>
   <style>
      #main-header {
         background-color: blue;
      }
   </style>
</head>
<body>
   <header id="main-header">
      <h1 id="My-website">My website</h1>
   </header>
   <!-- other content here -->
</body>
</html>

此 CSS 規則選擇 ID 為「main-header」的元素，並向其套用「backgroundcolor: blue」樣式。

建立generateSelector函數

介紹了 CSS 選擇器的概念（CSS 選擇器是一種識別和定位網頁中特定元素以實現樣式設計的方法），我們現在可以繼續建立generateSelector 函數。該函數將接受 DOM（文件物件模型）元素作為輸入，作為回報，它將提供該特定元素的 CSS 選擇器路徑。

文法

function generateSelector(element) {
   let selectors = [];
}

首先，我們將啟動一個稱為「選擇器」的空數組。這個陣列將充當我們在遍歷和檢查其祖先元素時為給定 DOM 元素生成的選擇器的容器。

文法

while (element) {
   let selector = '';
   if (element.tagName === 'HTML') {
      selector = 'html';
   }
}

當我們迭代每個祖先時，我們將為它產生一個選擇器。我們首先檢查該元素是否為元素。如果是，我們將把字串「html」加入到選擇器變數

對於所有其他元素，我們將檢查該元素是否有 ID。如果是，我們將使用 ID 作為選擇器。如果沒有，我們將使用元素的標籤名稱及其類別名稱作為選擇器。

文法

else {
   if (element.id) {
      selector = '#' + element.id;
   } else {
      selector = element.tagName.toLowerCase();
      if (element.className) {
         selector += '.' + element.className.replace(/\s+/g, '.');
      }
   }
}

產生選擇器後，我們將其新增至選擇器陣列中，並透過將 element 設定為等於 element.parentNode 來移至下一個祖先。

文法

selectors.unshift(selector);{
   element = element.parentNode;
}

最後，我們將使用 join() 方法連接選擇器陣列中的所有選擇器，並將產生的 CSS 選擇器路徑作為字串傳回。

文法

return selectors.join(' > ');{
}

使用generateSelector函數

現在我們已經實作了generateSelector函數，讓我們看看如何在實作中使用它。

例如，假設您有以下 HTML -

<!DOCTYPE html>
<html>
<body>
   <div id="myDiv">
      <p>Hello World</p>
   </div>
   <div id="result"></div>
   <script>
      function generateSelector(element) {
         let selectors = [];
         while (element) {
            let selector = '';
            if (element.id) {
               selector = '#' + element.id;
            } else {
               selector = element.tagName;
            }
            selectors.unshift(selector);
            element = element.parentNode;
         }
         return selectors.join(' > ');
      }
   </script>
   <script>
      window.onload = function(){
         
         // Select the <p> element and get its CSS selector path
         const p = document.querySelector("p");
         if(p!==null){
            const selector = generateSelector(p);
            document.getElementById("result").innerHTML = selector;
         }
         else{
            console.log("Error : Element not found");
         }
      }
   </script>
</body>
</html>

需要注意的是，這只是一個範例，選擇器將根據您傳遞給函數的元素和 HTML 結構而有所不同。

以上是如何建立一個函數 `generateSelector` 來產生 DOM 元素的 CSS 選擇器路徑？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除