Question

我试图选择一个单击按钮的父元素，并找到该父元素的子元素文本，但是它返回undefined。

  var add = document.getElementById("add").parentElement.nodeName;

我发现了如何访问父元素的节点名称，但是我无法通过id选择它的子元素。

当前，我正在尝试获取所选元素和用户alert()的属性以显示它们，但是它无法正常工作。下面的代码是我目前拥有的：

window.onload = function(){ 
    add();
}
function add() {
  var add = document.querySelector(".add").parentNode;
  var id = document.querySelector(".id").innerHTML;
  var name = document.querySelector(".std").innerHTML;
  alert(id);
  alert(name);

}

<!DOCTYPE html>
<html>
<body>
  <table>
  	<tr>
    	<th>S.N.</th><th>Name</th><th>Action</th>
     </tr>
     <tr>
    	<td class='id'>1</td><td class='std'>Riya</td><td id='del'>DEL</td>
    </tr>
    <tr>
    	<td class='id'>2</td><td class='std'>Sonam</td><td class='add'>ADD</td>
    </tr>
  </table>
</body>
</html>

Answer 1

这里有两个问题：

选择单个元素时，应使用document.querySelector()，而不是用于选择多个元素的document.querySelectorAll()
应使用innerHTML字段代替innerHtml

请注意，document.querySelector()返回第一个选定元素（如果有），其中document.querySelectorAll()返回包含选定元素的NodeList。

这是一个有效的代码段：

window.onload = function(){ 
    add();
}
function add() {
  var add = document.getElementById("add").parentNode;

  /* Use querySelector for single element, and use innerHTML */
  var id = document.querySelector("#id").innerHTML;
  var name = document.querySelector("#std").innerHTML;

  alert(id);
  alert(name);

}

<!DOCTYPE html>
<html>
<body>
  <table>
  	<tr>
    	<th>S.N.</th><th>Name</th><th>Action</th>
     </tr>
     <tr>
    	<td id='sn'>1</td><td id='name'>Riya</td><td id='del'>DEL</td>
    </tr>
    <tr>
    	<td id='id'>2</td><td id='std'>Sonam</td><td id='add'>ADD</td>
    </tr>
  </table>
</body>
</html>

希望有帮助

Answer 2

id属性值在整个HTML中必须是唯一的。因此，如果您希望使用class使用相同标识符的多个元素，那么您还需要知道要定位的元素的索引。

访问this link以获得有关id属性的更多信息

您有一个错字，正确的属性是innerHTML而不是innerHtml，并且如前所述，您需要知道元素的索引

window.onload = function(){ 
    add();
}
function add() {
  var add = document.getElementById("add").parentNode;
  var id = document.querySelectorAll("#id")[0].innerHTML;
  var name = document.querySelectorAll("#std")[0].innerHTML;
  alert(id);
  alert(name);
}

<!DOCTYPE html>
<html>
<body>
  <table>
  	<tr>
    	<th>S.N.</th><th>Name</th><th>Action</th>
     </tr>
     <tr>
    	<td id='sn'>1</td><td id='name'>Riya</td><td id='del'>DEL</td>
    </tr>
    <tr>
    	<td id='id'>2</td><td id='std'>Sonam</td><td id='add'>ADD</td>
    </tr>
  </table>
</body>
</html>

JavaScript为父元素和子元素返回未定义的

2 个答案: