dom元素和class常用操作

创建

document.createElement()
document.createTextNode()

克隆

document.cloneNode()

删除

removeChild()

替换

replaceChild(newnode,oldnode)

插入

appendChild()
insertBefore()
把节点插入到父节点的某个兄弟节点的前面。所以他有两个参数，insertBefore(newItem,existingItem)
var newItem=document.createElement("LI")
var textnode=document.createTextNode("Water")
newItem.appendChild(textnode)
var list=document.getElementById("myList")
list.insertBefore(newItem,list.childNodes[1]);

插入前

Coffee
Tea

插入后

Water
Coffee
Tea

查找

document.getElementsByTagName()    //通过标签名称
document.getElementsByClassName()    //通过标签名称
document.getElementsByName()    //通过元素的Name属性的值
document.getElementById()    //通过元素Id，唯一性

querySelector() 获取单个元素
querySelectorAll() 获取多个元素

querySelector() 获取单个元素

如果有多个元素满足选择器，则只返回第一个

//通过 标签名 获取单个元素
var li1 = document.querySelector("li");
//通过 id 获取单个元素
var li2 = document.querySelector("#app");
//通过 class类名 获取单个元素
var li2 = document.querySelector(".two");

querySelectorAll() 获取多个元素

返回满足条件的元素数组

//通过 标签名 获取多个元素
var li1 = document.querySelector("li");
//通过 class类名 获取多个元素
var li2 = document.querySelector(".two");

Class操作

var dom = document.querySelector("#a");
//添加类newClass
dom.classList.add('newClass');
//删除类cla1
dom.classList.remove('cla1');
//判断是否有这个类
dom.classList.contains('cla1');
//如果没有这个类，就加上，有这个类，就去掉。
dom.classList.toggle('toggle')

来源：https://blog.csdn.net/ministech/article/details/98942779

标签

dom

var

queryselector