试图在 JavaScript 中提醒第二个孩子的 innerhtml

trying to alert the secondchild's innerhtml in javascript

本文关键字：第二个 孩子 innerhtml JavaScript      更新时间：2023-09-26

这是一个代码片段，它试图提醒第二个孩子innerhtml.但它没有显示任何内容。这是小提琴https://jsfiddle.net/user1989/3cbzahfo/6/

<!DOCTYPE html>
<html>
<head>
<script>
function iclick() {
  alert(document.getElementById("i").secondChild.innerHTML);
}
</script>
</head>
<body>
<div id="i" >
  <p>second</p>
  <p>fourth</p>
  <p>sixth</p>
  <div id="ii" onclick="iiclick()">The first child</div>
</div>
<button onclick="iclick()">Trythis</button>
</body>
</html>

secondChild 不是有效的属性，您可以使用 children 并使用索引

<!DOCTYPE html>
<html>
<head>
  <script>
    function iclick() {
      alert(document.getElementById("i").children[1].innerHTML);
    }
  </script>
</head>
<body>
  <div id="i">
    <p>second</p>
    <p>fourth</p>
    <p>sixth</p>
    <div id="ii" onclick="iiclick()">The first child</div>
  </div>
  <button onclick="iclick()">Trythis</button>
</body>
</html>

如果您只需要 p 标记，请使用 getElementsByTagName() 

<!DOCTYPE html>
<html>
<head>
  <script>
    function iclick() {
      alert(document.getElementById("i").getElementsByTagName('p')[1].innerHTML);
    }
  </script>
</head>
<body>
  <div id="i">
    <p>second</p>
    <p>fourth</p>
    <p>sixth</p>
    <div id="ii" onclick="iiclick()">The first child</div>
  </div>
  <button onclick="iclick()">Trythis</button>
</body>
</html>

function iclick(){
alert(document.getElementById("i").getElementsByTagName('p')[1].innerHTML);
}
<div id="i" >
<p>second</p>
<p>fourth</p>
<p>sixth</p>
<div id="ii" onclick="iiclick()">The first child</div></div>
<button onclick="iclick()">Trythis</button>

secondChild不是有效的属性。getElementsByTagName() 方法返回文档中具有指定标记名称的所有元素的集合，作为NodeList object 。

NodeList object表示节点的集合。可以通过索引号访问节点。指数从 0 开始。

试试这个：

 function iclick(){
 alert(document.getElementById("i").getElementsByTagName('p')[1].innerHTML);
 }

这是更新的小提琴

我建议你使用子节点的概念和索引，但是它也会将换行符计为子节点。console.log（document.getElementById（"i"）.childNodes[4]）;

相关文章：