Question

我正在尝试使用以下代码更改h1的文字

document.getElementById("wpbody-content").getElementsByClassName("wrap").getElementsByTagName('h1')[0].innerHTML = 'Application Forms';

以下是HTML代码

＆＃13;

<div id="wpbody-content">
  
  <div class="wrap">
    <h1>Text</h1>
  </div>

<div class="clear"></div></div>

＆＃13;

但它显示我跟随错误

TypeError: document.getElementById(...).getElementsByClassName(...).getElementsByTagName is not a function

Answer 1

getElementsByClassName()方法返回一个元素数组。你需要引用数组中的第一个wrap元素，就像你正确地为h1元素做的那样。：

document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].getElementsByTagName('h1')[0].innerHTML = 'Application Forms';

Answer 2

将getElementsByClassName("wrap")替换为getElementsByClassName("wrap")[0]

＆＃13;

    document.getElementById("wpbody-content")
        .getElementsByClassName("wrap")[0]
        .getElementsByTagName('h1')[0].innerHTML = 'Application Forms';

＆＃13;

<div id="wpbody-content">
    <div class="wrap">
         <h1>Text</h1>

    </div>
    <div class="clear"></div>
</div>

＆＃13;

Answer 3

尝试使用jQuery

     $('#wpbody-content .wrap h1').text('Application Forms');

Answer 4

jQuery是否可以接受？如果是这样的话很简单：

$('#wpbody-content .wrap h1').text('Application Forms');

Answer 5

如果文档中只有一个H1，也可以按标签名称查找元素：

document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].getElementsByTagName('h1')[0].innerHTML = 'Application Forms';

<div id="wpbody-content">
    <div class="wrap">
         <h1>Text</h1>

    </div>
    <div class="clear"></div>
</div>

Javascript更改h1文本

5 个答案: