使用Javascript / JQuery获取具有id和类名的所有html标签（父标签和子标签）
[英]Get all html tags(parent and child tags) with id and class name with Javascript/JQuery
问题描述
Does anybody knows how can I get all the HTML tags that exist in a page? 
有人知道如何获取页面中存在的所有HTML标记吗？
var items = document.getElementsByTagName("*"); var items = document.getElementsByTagName（“ *”）;
This will get all the tags, but my requirement is 这将获取所有标签，但是我的要求是
- get a first parent tag and all the child tags under it 获取第一个父标签及其下的所有子标签
- get the next parent tag and all the child tags under it and so on 获取下一个父标记及其下的所有子标记，依此类推
I need to get the tags in a kind of tree-structure. 我需要以一种树状结构来获取标签。 Prefer to do that with Javascript or JQuery. 最好使用Javascript或JQuery做到这一点。
For example: 例如：
<html>
<head>
<title>Example Page</title>
</head>
<body id="x" class="something">
<h1 style="somestyle">Blabla</h1>
<div id="id">
<table id="formid">
<tr>
<td id="1"></td>
<td id="2"></td>
</tr>
</table>
</div>
</body>
</html>
Should Return: 应该返回：
html HTML
- head->title 头戴式>标题
- body-->h1,(div-->table-->tr-->td,td) 体 - > H1，（DIV - >表 - > TR - > TD，TD）
2 个解决方案
解决方案1
0 已采纳 2017-08-07 13:28:45
document.documentElement is the root of the tree ( html ). document.documentElement是树的根（ html ）。 You can then get all of its child elements via children ( childNodes would include non-Element children), and get their descendants in document order using querySelectorAll("*") : 然后，您可以通过children获取其所有子级元素（ childNodes将包括非元素子级），并使用querySelectorAll("*")以文档顺序获取其后代：
var results = Array.prototype.map.call(
document.documentElement.children,
function(element) {
return element.querySelectorAll("*");
});
results will be an array with an entry for each direct child of the html element, where each element is a NodeList . results将是一个数组，其中包含html元素的每个直接子项的条目，其中每个元素都是NodeList 。 If you want an array of arrays, you can use Array.from on the result of querySelectorAll (polyfilling it if necessary, as it's relatively new). 如果需要数组数组，则可以在querySelectorAll的结果上使用Array.from （必要时Array.from进行Array.from ，因为它相对较新）。
Of course there are a dozen ways to spin this. 当然，有十多种方法可以解决这个问题。 For instance, an array of objects instead: 例如，对象数组代替：
var results = Array.prototype.map.call(
document.documentElement.children,
function(element) {
return {
element: element,
descendants: Array.from(element.querySelectorAll("*"))
};
});
解决方案2
0
This function may help you. 此功能可能对您有帮助。 If you are using it on server side, create a DTO with key and value as attibute as String datatype. 如果在服务器端使用它，请创建一个DTO，其键和值与String数据类型一样。 You can choose body or html as base. 您可以选择body或html作为基础。
function myFunction() {
var c = document.body.children;
var txt = "";
var i;
var ListOfMap=[];
for (i = 0; i < c.length; i++) {
var map={};
var key=c[i].tagName;
//console.log("key::::"+key);
// console.log("value::::"+document.getElementsByTagName(c[i].tagName)[0].textContent);
if(key !== 'undefined' && typeof key !== undefined){
map.key=c[i].tagName;
map.value=document.getElementsByTagName(c[i].tagName)[0].textContent;
txt=txt+ document.getElementsByTagName(c[i].tagName)[0].textContent+"</br>";
}
ListOfMap.push(map);
}
document.getElementById("demo").innerHTML = txt;
console.log(JSON.stringify(ListOfMap));
return ListOfMap;
}
Working example: https://plnkr.co/edit/5FIbffmTZ3xkRG5GCBhK?p=preview 工作示例： https : //plnkr.co/edit/5FIbffmTZ3xkRG5GCBhK?p=preview
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.