setAttribute 不是函數

Question

這是一些HTML：

<ul>
  <li>lorem</li>
  <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque magnam expedita aspernatur suscipit ea ad nisi corporis sequi labore consequatur odit, impedit quia quisquam inventore, recusandae similique esse excepturi distinctio.</li>
  <li>Susan</li>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad vitae consequatur vel nostrum? Sunt, quas iure libero aut laborum facere unde quidem dolorem dicta, eaque, eveniet dolore harum iste deleniti.</li>
</ul>

和 JavaScript：

var text = document.getElementsByTagName('ul')[0];
var firstItem = text.firstChild;
var lastItem = text.lastChild;
firstItem.setAttribute('class', 'complete');

瀏覽器顯示此錯誤：

firstItem.setAttribute 不是函數

Answer 1

你需要做firstItem.setAttribute('class', 'complete'); 因為firstItem已經有一個元素。 您還需要將firstChild和lastChild更改為firstElementChild和lastElementChild以便您可以對它們使用setAttribute()方法：

 var text = document.getElementsByTagName('ul')[0]; var firstItem = text.firstElementChild; var lastItem = text.lastElementChild; firstItem.setAttribute('class', 'complete'); lastItem.setAttribute('class', 'done');

 .complete{ color: red; } .done { color: blue; }

 <ul> <li>lorem</li> <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque magnam expedita aspernatur suscipit ea ad nisi corporis sequi labore consequatur odit, impedit quia quisquam inventore, recusandae similique esse excepturi distinctio.</li> <li>Susan</li> <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad vitae consequatur vel nostrum? Sunt, quas iure libero aut laborum facere unde quidem dolorem dicta, eaque, eveniet dolore harum iste deleniti.</li> </ul>

Answer 2

我只想補充一點，其他答案沒有提到。

在以下 HTML 中：

<ul>
  <li>some text</li>
</ul>

... <ul>的firstChild實際上是一個文本節點（包含空格）而不是一個<li>節點。 如果 HTML 是：

<ul><li>some text</li></ul>

無論如何，這就是firstElementChild或document.querySelector("ul > li")解決這個問題的原因； 不考慮文本節點。