如何選擇某些其他標簽內的標簽

Question

我想選擇頁面上所有<“ code”>標記內的所有<“ a”>標記，以便對它們進行計數，並且我想使用JavaScript進行此操作。如何執行此操作？

我嘗試使用document.getElementsByTagName（“ code”）。getElementsByTagName（“ a”）; 和document.getElementsByTagName（“ code”）。querySelectorAll（“ a”）;和 但這似乎不起作用

document.getElementsByTagName("code").getElementsByTagName("a");

VM1278：1未被捕獲的TypeError：document.getElementsByTagName（...）。getElementsByTagName不是位於：1：39的函數

Answer 1

您可以使用.querySelectorAll(selectors) 。

 const matches = document.querySelectorAll('code a'); console.log(matches); 

 <code> <a>Test</a> <p>Other tag</p> <a>Example</a> </code> 

Answer 2

您需要遍歷初始元素搜索，因為它會返回元素的HTMLCollection：

var elements = document.getElementsByTagName("code");
var all = [];
for(var i = 0; i < elements.length; i++){
    var tempElements = elements[i].getElementsByTagName("a");
    all = [...tempElements, ...all];
}

Answer 3

嘗試以下方法：

document.querySelectorAll('code a').length

querySelector和querySelectorAll函數接受類似CSS的DOM選擇器，並分別返回節點或NodeList。

看到：

• https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
• https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Answer 4

您可以使用

document.querySelector("code > a");

Answer 5

您可以這樣做：

 var anchors = document.getElementById("thediv").getElementsByTagName("a"); alert("The Div has " + anchors.length + " links in it"); 

 <div id="thediv"> <a href="#">link 1</a> <a href="#">link 2</a> <a href="#">link 3</a> </div>