如何創(chuàng)建一個函數(shù) `generateSelector` 來生成 DOM 元素的 CSS 選擇器路徑？-魔扣目錄

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

假設(shè)您想要更改網(wǎng)站上的一個特定元素。但你怎么知道要使用哪個選擇器呢？這就是我們的generateSelector 函數(shù)發(fā)揮作用的地方！此函數(shù)將獲取網(wǎng)站上的特定元素，并為我們提供可用于更改它的選擇器。

了解 CSS 選擇器

在我們深入研究generateSelector函數(shù)的創(chuàng)建之前，了解什么是CSS選擇器及其操作背后的原理至關(guān)重要。

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

示例

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

元素，并將顏色的樣式屬性分配為紅色 –

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

登錄后復(fù)制

示例

CSS規(guī)則中的p是選擇器。 CSS 選擇器可能比元素的標(biāo)簽名稱復(fù)雜得多。它們可用于根據(jù)元素的類、ID、屬性值等來選擇元素。例如 –

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

登錄后復(fù)制

此 CSS 規(guī)則選擇 ID 為“main-header”的元素，并向其應(yīng)用“backgroundcolor: blue”樣式。

創(chuàng)建generateSelector函數(shù)

介紹了 CSS 選擇器的概念（CSS 選擇器是一種識別和定位網(wǎng)頁中特定元素以實(shí)現(xiàn)樣式設(shè)計的方法），我們現(xiàn)在可以繼續(xù)創(chuàng)建generateSelector 函數(shù)。該函數(shù)將接受 DOM（文檔對象模型）元素作為輸入，作為回報，它將提供該特定元素的 CSS 選擇器路徑。

語法

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

登錄后復(fù)制

首先，我們將啟動一個稱為“選擇器”的空數(shù)組。該數(shù)組將充當(dāng)我們在遍歷和檢查其祖先元素時為給定 DOM 元素生成的選擇器的容器。

語法

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

登錄后復(fù)制

當(dāng)我們迭代每個祖先時，我們將為它生成一個選擇器。我們首先檢查該元素是否為 <html> 元素。如果是，我們將把字符串“html”添加到選擇器變量

對于所有其他元素，我們將檢查該元素是否有 ID。如果是，我們將使用 ID 作為選擇器。如果沒有，我們將使用元素的標(biāo)簽名稱及其類名稱作為選擇器。

語法

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

登錄后復(fù)制

生成選擇器后，我們將其添加到選擇器數(shù)組中，并通過將 element 設(shè)置為等于 element.parentNode 來移動到下一個祖先。

語法

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

登錄后復(fù)制

最后，我們將使用 join() 方法連接選擇器數(shù)組中的所有選擇器，并將生成的 CSS 選擇器路徑作為字符串返回。

語法

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

登錄后復(fù)制

使用generateSelector函數(shù)

現(xiàn)在我們已經(jīng)實(shí)現(xiàn)了generateSelector函數(shù)，讓我們看看如何在實(shí)踐中使用它。

例如，假設(shè)您有以下 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>

登錄后復(fù)制

需要注意的是，這只是一個示例，選擇器將根據(jù)您傳遞給函數(shù)的元素和 HTML 結(jié)構(gòu)而有所不同。

以上就是如何創(chuàng)建一個函數(shù) `generateSelector` 來生成 DOM 元素的 CSS 選擇器路徑？的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！