DOM初學者導航問題

在這段代碼中，我只是試圖定位第二個無序列表中的最後一個li標籤，並將'balsamic vinegar'文本替換爲'kale'，將最後一個項目的文本內容打印到p標籤 - 'stuff'，以及更改將class =「cool」的屬性添加到它。DOM初學者導航問題

目前只是在練習和及彼DOM導航的感覺，任何幫助，將不勝感激

<!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>

來源

2017-07-02 ProxyStudent

使用錯誤消息 - 他們在那裏幫助你！看看如果你運行你的代碼片段，它說'lastItem.setAttribute不是一個函數'。因爲我們知道'setAttribute'是一個真正的函數，所以'lastItem'可能有問題。因此，第一步調試：在聲明該var後立即嘗試添加'console.log（lastItem）'，並查看它返回的內容。 – jack

嘗試'lastElementChild'而不是'lastChild' –

請注意* lastChild *可能是元素，文本節點，註釋等。文本節點不會實現像* setAttribute *這樣的元素API方法。 – RobG

的document.getElementById（「項目」）。childNode [3] .setAttribute（「類」，「酷」）; 這應該可以改變班級屬性

來源

2017-07-02 23:17:47

DOM初學者導航問題

回答

相關問題