Вот немного HTML:

{amp}lt;ul{amp}gt; {amp}lt;li{amp}gt;lorem{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;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.{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;Susan{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;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.{amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; 

и JavaScript:

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

И браузер показывает эту ошибку:

firstItem.setAttribute не является функцией

Вам нужно сделать firstItem.setAttribute('class', 'complete'); потому что firstItem уже имеет один элемент в нем. Вам также необходимо изменить firstChild и lastChild на firstElementChild и lastElementChild чтобы вы могли использовать для setAttribute() метод 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; } 
 {amp}lt;ul{amp}gt; {amp}lt;li{amp}gt;lorem{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;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.{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;Susan{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;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.{amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; 

Я просто хотел бы добавить небольшой момент, который другие ответы не упоминают.

В следующем HTML:

 {amp}lt;ul{amp}gt; {amp}lt;li{amp}gt;some text{amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; 

firstChild из {amp}lt;ul{amp}gt; на самом деле является текстовым узлом (содержащим пробелы), а не узлом {amp}lt;li{amp}gt; . Это было бы не так, если бы HTML был:

 {amp}lt;ul{amp}gt;{amp}lt;li{amp}gt;some text{amp}lt;/li{amp}gt;{amp}lt;/ul{amp}gt; 

Во всяком случае, это причина, по которой firstElementChild или document.querySelector("ul {amp}gt; li") решают эту проблему; текстовый узел не рассматривается.