試圖解析標記元素

Question

我想解析一個網頁與JavaScript目標列表<li>沒有類。

<ul id="cartItems"> 
    <li class="heading"> 
    <li>...</li> 
    <li>...</li> 
    <li>...</li> 
    <li>...</li> 
</ul> 

Answer 1

使用querySelectorAll讓所有li元素沒有一個類。

var liWithoutClass = document.querySelectorAll('#cartItems > li:not([class])'); 
 

 
console.log(liWithoutClass); 
 

 
document.write(liWithoutClass[0].textContent); // Output the first li 
 
document.write('<br />' + liWithoutClass[3].textContent); // Output the last li

<ul id="cartItems"> 
 
    <li class="heading">Heading</li> 
 
    <li>Element 1</li> 
 
    <li>Element 2</li> 
 
    <li>Element 3</li> 
 
    <li>Element 4</li> 
 
</ul>

Answer 2

var elems = document.querySelector(".heading"); 
 
    console.log(elems); 
 
//Now we strip the class out like this: 
 
    elems.setAttribute(class, "none"); 
 
//Now we display the updated values below 
 
console.log(elems); 
 
// This won't work in Stack's editor, so you'll have to validate it against the page you want. 
 
//Now, just grab the entire element by id from the page as below: 
 

 
var updatedContent = document.getElementById("cartItems"); 
 
console.log(updatedContent); 
 
//Again, stack's editor is limited, but overall this should work fine on your page.

<ul id="cartItems"> 
 
     <li class="heading"> 
 
     <li>item 1</li> 
 
     <li>item 2</li> 
 
     <li>item 3</li> 
 
     <li>item 4</li> 
 
    </ul>