Question

这是演示代码所以我只想按照用户单击按钮时显示h3标签中锚的内部文本的模式。

我的代码

＆＃13;

 var a = document.getElementById('btn');
 var b = a.previousSibling.firstChild.innerText;
 alert(b);

＆＃13;

<div class="box">
  <p>This is a paragraph</p>
  <h3><a href="#"> Heading </a> </h3>
  <button id="btn">Click Me</button>
</div>

＆＃13;

我得到了这个：

Error is Cannot read property 'innerText' of null

Answer 1

您需要使用previousElementSibling代替

var a = document.getElementById('btn');
var b = a.previousElementSibling.firstChild.innerText;
console.log(b);

<div class="box">
  <p>This is a paragraph</p>
  <h3><a href="#">Heading</a></h3>
  <button id="btn">Click Me</button>
</div>

Answer 2

我通过消除按钮和结束</h3>标记之间的空格来让你的样本在这里工作：https://jsfiddle.net/shggo1x4/

<div class="box">
   <p> This is a paragraph </p><h3><a href="#"> Heading </a></h3><button id="btn"> Click Me</button>
</div>

var a = document.getElementById('btn') ; 
var b = a.previousSibling.firstChild.innerText;
alert(b) ;

previousSibling认为空格是一个文本节点，所以@dippas说，使用 previousElementSibling 属性。

Answer 3

试试这个，

<div class="box">
  <p>This is a paragraph</p>
  <h3><a href="#">Heading</a></h3>
  <button id="btn">Click Me</button>
</div>


var a = document.getElementById('btn') ; 
var b = a.previousElementSibling.firstChild.innerText ;
alert(b);

为什么previousSibling无法正常工作？

3 个答案: