getElementsByClassName 如何通过链接获取 html 元素？

Question

 var classname = document.getElementsByClassName("tag")[0]; var classname = document.getElementsByClassName("tag"); var i = 0; while (i < classname.length) { console.log(classname[i].innerText); i++ }

 <div class="container" style="display:none"> <div id="tagBall1" class="tagBall"> <a href='/tags.php?/While/' class="tag">While</a> <a href='/tags.php?/return/' class="tag">return</a> <a href='/tags.php?/htaccess/' class="tag">htaccess</a> <a href='/tags.php?/' class="tag">CSS</a> <a href='/tags.php?/' class="tag">algorithm</a> <a href='/tags.php?/let/' class="tag">let</a> <a href='/tags.php?/SEO/' class="tag">SEO</a> </div> <p class="tag">2021.1.25</p> </div>

I want to get the class element of a tag, but I get the result that it loses its link. How can I avoid it losing its link

Answer 1

To select all links just select all the a tags. Then filter out whichever has your classes and then just get the href (or the links) by using a map.

var aTags = document.getElementsByTagName("a")
var tagsWithYourClass = aTags.filter(tag=> tag.matches('.tag') )
var links = tagsWithYourClass.map(tag=> tag.getAttribute("href"))

Otherwise better way is

var aTags = document.querySelectorAll("a.tag").map(tag=>tag.href)