Question

这是一个代码片段，试图提醒第二个孩子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>

Answer 1

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

＆＃13;

<!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>

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 2

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);
 }

以下是Updated Fiddle

Answer 3

我建议你使用childnodes概念和索引，但是它也会计算新的行字符作为子节点。（的document.getElementById（ “I”）的childNodes [4]）的console.log;

试图在javascript中警告第二个孩子的innerhtml

3 个答案: