试图解析标记元素

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>