Question

在此代码中，我只是尝试将第二个无序列表中的最后一个li标记作为目标，并替换“香醋”中的文本＆＃39;到＆＃39;羽衣甘蓝＆＃39;，将最后一项的文字内容打印到p标签 - ＆＃39; stuff＆＃39; ，以及更改添加class =＆＃34; cool＆＃34;的属性。它。

目前正在练习并获得DOM导航的感觉，任何帮助将不胜感激

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <style>
    #items li {
      width: 400px;
      list-style: none;
      padding: 10px 0px;
      border-top: 1px solid black;
      border-bottom: 1px solid black;
      border-right: 1px solid black;
    }
    
    .cool {
      background-color: aqua;
    }
    
    .hot {
      background-color: crimson;
    }
    
    .warm {
      background-color: green;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="navContainer">
      <ul id="sideBar">
        <a href="LandingPage.html">
          <li>Home</li>
        </a>
        <li id="dropdown">Applications
          <div class="dropdown-content">
            <a href="CalculatorPageApp.html">Simple Calculator</a>
            <a href="ToDoListApp.html">Link 2</a>
            <a href="#">Link 3</a>
          </div>
          <li>
            <a href="Survey.html">
              <li>Survey</li>
            </a>
            <a href="Calendar.html">
              <li>Calendar</li>
            </a>
            <a href="Contact.html">
              <li>Contact Us</li>
            </a>
      </ul>
      <!--- end of sidebar -->
    </div>
    <!--- end of side container -->
    <h1 id="header">List King</h1>
    <h2>Buy groceries</h2>
    <ul id="items">
      <li id="one" class="hot"><em>fresh</em>figs</li>
      <li id="two" class="hot">pine nuts</li>
      <li id="three" class="hot">honey</li>
      <li id="four">balsamic vinegar</li>
    </ul>
    <p id="thing">hi</p>
  </div>
  <!---End wrapper --->
  <script>
    var stuff = document.getElementById('thing');
    var startItem = document.getElementsByTagName('ul')[1];
    var lastItem = startItem.lastChild;
    var text = lastItem.nodeValue;
    stuff.textContent = text;

    text.replace('balsamic vinegar', 'kale');
    
    lastItem.setAttribute('class','cool');
  </script>
</body>

</html>

＆＃13;

Answer 1

的document.getElementById（＆＃34;项目＆＃34）。childNode [3] .setAttribute（＆＃34;类＆＃34;＆＃34;凉爽＆＃34）; 这应该可以改变类属性

DOM初学者导航问题

1 个答案: