document.getElementById并使用id名称

Question

我在HTML代码中有以下内容：

<section id="main-content">
    <header>
        <h1 id="page-title">Why Are There No Arab Democracies?</h1>
    </header>

要检索page-title的内容，我尝试使用以下内容：

document.getElementById("page-title")[0].InnerText

document.getElementsByTagName("h1")[0].getElementById("page-title")[0].InnerText

每次我收到错误。

Answer 1

请改用此类document.getElementById();。您还应该使用.textContent来查找元素的文本。

在按ID查找元素时不必使用[0]的原因是因为getElementById返回一个元素，因为HTML中只有一个元素具有命名ID。

alert(document.getElementById("page-title").textContent);

<section id="main-content">
  <header>
    <h1 id="page-title">Why Are There No Arab Democracies?</h1>
  </header>
</section>

Answer 2

当你抓住多个元素时会使用

[0]。你想从列表中选择第一个元素。

例如：如果您的网页有多个<p>而您执行了getElementByTagName('p')，那么您需要使用[0]来访问所有捕获元素列表中的第一个元素。

<p>Hello</p><p>hi</p>

然后

alert(document.getElementsByTagName("P")[0].innerHTML); ## this alerts "Hello"

回答你的问题：

＆＃13;

＆＃13;

alert(document.getElementById('page-title').innerHTML);

＆＃13;

<section id="main-content">

  <header>
    <h1 id="page-title">Why Are There No Arab Democracies?</h1>

  </header>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 3

document.getElementById("page-title").innerText

你只抓取一个元素，所以不需要[0]