如何选择某些其他标签内的标签

Question

I want to select all the <"a"> tags on a page that are inside all the <"code"> tags on the page so I can count them, and I want to do this using JavaScript.. how can I do this?

I tried using document.getElementsByTagName("code").getElementsByTagName("a"); and document.getElementsByTagName("code").querySelectorAll("a"); but it doesn t seem to work

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

VM1278:1 Uncaught TypeError: document.getElementsByTagName(...).getElementsByTagName is not a function at :1:39

Answer 1

You can use .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

You need to loop through the initial element search, since it returns an HTMLCollection of elements:

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

Try this instead:

document.querySelectorAll('code a').length

The querySelector and querySelectorAll functions accept CSS-like DOM selectors and return a node or NodeList, respectively.

See:

• 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

you can do it like this:

 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>