获取元素的索引/位置及其在 Javascript [DOM ] 中的名称

我尝试在容器中找到div 元素的索引位置和名称，但每当我尝试时，它都没有给我正确的输出。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="container">
<div>This is div</div>
<p>This is Paragraph</p>
<script>
let x = document.getElementById("container")
let y = x.childNodes;
for(let i =0; i < y.length ; i++)
{
if(y[i].nodeType == 2)
{
alert(y[i].nodeName);
}
}
</script>
</body>
</html>

2 个标签之间的空格键、新行和制表符被视为一个文本节点。所以在内部 DIV 之前有一个节点。同样，内部 DIV 和 P 元素之间有一个文本节点。

检查 for 循环中每个子节点的 'tagName' 属性也可以工作。文本节点没有"标记名称"属性。

<div id="container">
<div>This is div</div>
<p>This is Paragraph</p></div>
<script>
let x = document.getElementById("container")
let y = x.childNodes;
for(let i =0; i < y.length ; i++) {
if(y[i].tagName && (y[i].tagName.toUpperCase() == "DIV" || y[i].tagName.toUpperCase() == "P")) {
alert(i + ": " + y[i].innerHTML);
}
}

属性返回指定节点的节点类型(数字(。

如果节点是元素节点，则 nodeType 属性将返回 1。

如果节点是属性节点，则 nodeType 属性将返回 2。

如果节点是文本节点，则 nodeType 属性将返回 3。

如果节点是注释节点，则 nodeType 属性将返回 8。

let x = document.getElementById("container")
let y = x.childNodes;
for(let i =0; i < y.length ; i++)
{
if(y[i].nodeType == 1)
{
alert(y[i].nodeName);
}
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="container">
<div>This is div</div>
<p>This is Paragraph</p>
</div>
</body>
</html>

基于 MBadrian 的解决方案只要您设法获得 nodeName，您就可以根据节点的名称设置条件，现在如果您想获取特定节点，您可以获取其文本内容并基于此设置条件...... 下面的代码与 MBadrian答案相同我替换了节点名称的返回并返回了文本内容

let x = document.getElementById("container")
let y = x.childNodes;
for(let i =0; i < y.length ; i++)
{
console.log(y[i].nodeType)
if(y[i].nodeType == 1)
{
alert(y[i].textContent);
}
}

相关内容

最新更新

热门标签：