Question

有没有办法知道页面中有多少不同的标签？例如HTML;身体; DIV; TD; DIV;可以算作4种不同的标签。

Answer 1

答案是肯定的：

const allTagNames = Array.from(   //cast the result to array to be able to use array's utilities  like "map"
      document.querySelectorAll('*') // select all elements in the page
   ).map(node => node.tagName) // get only the tagName

const allTagNamesWithoutDuplication = [...new Set(allTagNames)]  // Remove duplicated tagname

结果将是：

allTagNamesWithoutDuplication.length

＆＃13;

const distinctTags=() => {
      const allTagNames = Array.from(   
          document.querySelectorAll('*') 
       ).map(node => node.tagName.toLowerCase()) 
      
      return [...new Set(allTagNames)]
}


const result = distinctTags();

console.log(
    `this page contains ${result.length}  tags : `, result
   
)

＆＃13;

Answer 2

document有一个名为all的属性，列出了页面上找到的所有标签。其中每个都有tagName属性，这是没有尖括号的标记。它采用大写格式，但为简单起见，只需使用.toLowerCase() String method强制所有tagNames为小写。你可以循环浏览它，就像我在下面所示，在tagsFound数组中存储页面上尚未找到的任何标记。

var tagsFound= [];
for( var index = 0; index < document.all.length; index++ ) {
    if( tagsFound.indexOf(document.all[index].tagName.toLowerCase() == -1 ) {
        // Tag was not found before this
        tags.push(document.all[index].tagName.toLowerCase());
    }
}

然后，找到的唯一标签数量为

tagsFound.length

如何使用JS检查页面中存在多少个不同的标签？

2 个答案: