原生JS如何查询一个元素的class，增加一个class，删除一个class

JavaScript019

原生JS如何查询一个元素的class，增加一个class，删除一个class,第1张

document.getElementById("myDIV").className

document.getElementById("myDIV").className.indexOf('firstClass')

或者

document.getElementById("myDIV").classList.contains('firstClass')

document.getElementById("myDIV").classList.add("firstClass")

document.getElementById("myDIV").classList.add("firstClass", "secondClass", "thirdClass")

document.getElementById("myDIV").classList.remove("firstClass")

document.getElementById("myDIV").classList.remove("firstClass", "secondClass", "thirdClass")

js通过class属性删除节点用法实现：

比如有test.html，div的结构如下：

<div class="columns" id="columns">

<div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>

<div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>

<div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>

<div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>

<div name="columnClear" class="contentClear" id="columnClear"></div>

</div>

可以通过class属性来删除指定的节点：

js常用方法：element.parentNode.removeChild(element)

或者直接定义删除的js方法：

function removeElementsByClass(className){

var elements = document.getElementsByClassName(className)

while(elements.length >0){

elements[0].parentNode.removeChild(elements[0])

}

}

这样只要传入class名，就可以删除这个class相关的子节点了。

<div class="abc">点我删除</div>

<script>

window.onload=function(){

   var abc=document.getElementsByClassName("abc")[0]

   abc.onclick=function(){

      this.parentNode.removeChild(this)

   }

}

</script>