javascript - 使用填充标签数组中的文本 我是 JavaScript 新手，所以我不确定要搜索哪些关键字才能找到我的具体答案。在此先感谢您的帮助。 我需要li在a href. nav这些将滚动到 4 个不同的部分main。 我已经创建了每个li和a href. 我现在需要通过从

Question

我是 JavaScript 新手，所以我不确定要搜索哪些关键字才能找到我的具体答案。在此先感谢您的帮助。

我需要li在a href. nav这些将滚动到 4 个不同的部分main。
我已经创建了每个li和a href.
我现在需要通过从元素 创建一个数组来h2从每个a元素中获取文本，但现在我意识到我可以使用前一个数组中的 outerHTML。 如何获取文本，或从 sectionIds 数组访问 outerHTML 属性？lih2
h2

//creates a element and assigns to  listItemHref
const listItemHref = document.createElement('a');
//assigns #nav_list or ul to variable navList
const navList = document.querySelector('#nav_list');
//creates array from id's in section elements
const sectionIds = Array.from(document.getElementsByTagName('section'));
//creates array of h2
const sectionH2 = Array.from(document.getElementsByTagName('h2'));  

for (section of sectionIds){
    //creates a <li> element for each section name
    const listItem = document.createElement('li');
    //creates an <a> element for each section name
    const listItemHref = document.createElement('a');
    //sets the "href" for each <a> element
    listItemHref.setAttribute("href", "#" + section.id);
    listItem.setAttribute("class", "line_item");
    listItem.appendChild(listItemHref);
    navList.appendChild(listItem);
}

//code to take h2 text and insert into a tag text
for (heading of sectionH2){
    // ? not sure 
}

<header class="page_header" id="home">
  <h1>Resume</h1>
    <!--each li is created using JavaScript-->
  <nav class="nav_menu">
      <ul id="nav_list">
    <li class="line_item">
      <a href="#education"></a></li>
    <li class="line_item">
      <a href="#my_projects"></a></li>
    <li class="line_item">
      <a href="#about"></a></li>
    <li class="line_item">      
      <a href="#contact"></a></li>
    </ul>
    </nav>
</header>
<main>
  <section id="education">
    <h2>My Education</h2>
  </section>
  <section id="my_projects">
    <h2>My Projects</h2>
  </section>
  <section id="about">
    <h2>About Me</h2>
  </section>
  <section id="contact">
    <h2>Contact Me</h2>
  </section>
</main>

Answer 1

如果我理解正确，您希望从每个 h2 标签中复制文本并将其放在锚标签内。您实际上不需要另一个循环来执行此操作。使用您的 HTML 代码，由于每个部分只有一个元素（h2），您可以使用以下方法简单地检索 h2 const h2 = section.firstElementChild：。

如果每个部分中还有其他元素但只有一个 h2，那么我建议使用 querySelector 函数。这使您可以更轻松地搜索元素。所以代替Array.from(document.getElementsByTagName('section'));, 你可以写document.querySelectorAll('section');. 然后在您的循环中，您可以使用以下命令搜索 h2：const h2 = section.querySelector('h2');

注意：要在 section 元素上使用 querySelector，还必须使用 querySelector 检索到 section 元素。

//creates a element and assigns to  listItemHref
const listItemHref = document.createElement('a');
//assigns #nav_list or ul to variable navList
const navList = document.querySelector('#nav_list');
//creates array from id's in section elements
const sections = document.querySelectorAll('section');

for (section of sections){
    //creates a <li> element for each section name
    const listItem = document.createElement('li');
    //creates an <a> element for each section name
    const listItemHref = document.createElement('a');
    //sets the "href" for each <a> element
    listItemHref.setAttribute("href", "#" + section.id);
    listItem.setAttribute("class", "line_item");
    listItem.appendChild(listItemHref);
    navList.appendChild(listItem);

    const h2 = section.querySelector('h2');
    listItemHref.innerText = h2.innerText;
}

<header class="page_header" id="home">
  <h1>Resume</h1>
    <!--each li is created using JavaScript-->
  <nav class="nav_menu">
    <ul id="nav_list">
    </ul>
  </nav>
</header>
<main>
  <section id="education">
    <h2>My Education</h2>
  </section>
  <section id="my_projects">
    <h2>My Projects</h2>
  </section>
  <section id="about">
    <h2>About Me</h2>
  </section>
  <section id="contact">
    <h2>Contact Me</h2>
  </section>
</main>

希望这有帮助！

Answer 2

您可以通过执行以下操作获取所有“h2”元素的文本：

section.querySelector('h2').outerText

此外，您需要将文本添加到每个“li”元素，如下所示：

const text = document.createTextNode(section.querySelector('h2').outerText);
listItemHref.appendChild(text);

这是一个有效的解决方案：

//creates a element and assigns to  listItemHref
const listItemHref = document.createElement('a');
//assigns #nav_list or ul to variable navList
const navList = document.querySelector('#nav_list');
//creates array from id's in section elements
const sectionIds = Array.from(document.getElementsByTagName('section'));

for (section of sectionIds){

    const listItem = document.createElement('li');
    //creates an <a> element for each section name
    const listItemHref = document.createElement('a');
    const text = document.createTextNode(section.querySelector('h2').outerText);
    listItemHref.appendChild(text);
    //sets the "href" for each <a> element
    listItemHref.setAttribute("href", "#" + section.id);
    listItem.setAttribute("class", "line_item");
    listItem.appendChild(listItemHref);
    navList.appendChild(listItem);
   }

<header class="page_header" id="home">
  <h1>Resume</h1>
    <!--each li is created using JavaScript-->
  <nav class="nav_menu">
      <ul id="nav_list">
        
     </ul>
    </nav>
</header>
<main>
  <section id="education">
    <h2>My Education</h2>
  </section>
  <section id="my_projects">
    <h2>My Projects</h2>
  </section>
  <section id="about">
    <h2>About Me</h2>
  </section>
  <section id="contact">
    <h2>Contact Me</h2>
  </section>
</main>