如何從父 div 獲取特定子元素的內部元素 - selenium javascript

Question

<div class="A">
  <svg> ... </svg>
  <button> 
    <svg> ... </svg>
  </button>
  <svg> ... </svg>
</div>
<div class="A">
  <svg> ... </svg>
  <button> 
    <svg> ... </svg>
  </button>
  <svg> ... </svg>
</div>

我需要在第二個div 中檢索button元素的svg元素。 有人可以幫我弄這個嗎？

Answer 1

您可以使用querySelectorAll 。

 // find all DIVs with class a const allDivsWithClassA = document.querySelectorAll(".a"); // get the second element const secondDiv = [...allDivsWithClassA][1]; // find its svg wrapped by button const svgWrappedByButton = secondDiv.querySelector("button > svg"); console.log(svgWrappedByButton);

 <div class="a"> <svg></svg> <button> <svg></svg> </button> <svg></svg> </div> <div class="a"> <svg></svg> <button> <svg></svg> </button> <svg></svg> </div>

Answer 2

試試這個 xpath：

(//div/button)[2]/*[name()='svg']

請注意括號的用法，因此您 select 是頁面上 //div/button 的第二個實例。

另請參閱此答案： https://stackoverflow.com/a/3371935/1387701

Answer 3

如果您使用的是 xpat h，那么您應該指定 svg 作為名稱：

這給出了第二個元素，即按鈕的 svg 元素和 div 的子元素

(//div/button/*[name()='svg'])[2]

如果您使用的是 css 您可以直接使用

這會找到第二個孩子的div，然后找到按鈕的svg

   div:nth-child(2)>button>svg

Answer 4

首先，您必須為第二個 div 提供一個 ID。 樣式將保持與您在 class 中已有的樣式相同，ID 將使獲取元素更容易。 然后試試這個。

 function getSVG(){ // I dont know what Id you'll give it so I named it ParentID var parent = document.querySelector("#ParentID"); var getSvg = parent.querySelectorAll("svg"); console.log(getDivs); }