四象阵法: 增加 删除 改变 查找 【为了便于记忆,减少占用大脑内存,我命名为JS心法为:道阵法,两仪阵法,三才阵法,四象阵法,五行阵法,只需记住阵法的关键字,即可搜索大脑中相应的内容,学会JS五大阵法即可学会JS】
DOM操作增删该查 (Document文档 Object对象 Model模型)
增加节点:
var div=document.createElement("div");
var text=document.createTextNode("我是文本节点");
fatherNode.appChild(childNode);【在fatherNode元素内部添加childNode】
fatherNode.insertBefore(insertNode,targetNode);【在fatherNode元素内部添加childNode】
node.cloneNode(ture);【true复制node节点及其子节点,false只复制node节点,不填时默认为false,复制img标签时可以用false】
删除节点:
fatherNode.removeChild(childNode);【删除fatherNode元素内部节点childNode】
改变节点:
fatherNode.replaceChild(replaceNode,targetNode);【如果replaceNode是已存在节点,会把target删除,把replaceNode放在此处】
查找:
var idSelector=document.getElementById("#selector");
var tagSelector=document.getElementsByTagName("div");
var tagSelector=idSelector.getElementsByTagName("div");【只选择idSelector的div】
H5元素选择器
var classSelector=document.getElementsByClassName(".selector")【支持IE9 】
var query=document.querySelector("#selector") 【支持CS中所有的选择器】【支持IE8 】【返回第一个匹配的元素】
var queryAll=document.querySelectorAll(".selector")【支持CS中所有的选择器】【支持IE8 】【返回所有匹配的节点列表nodeList类数组】
【classList系列 IE9 支持】
classList.add("class1,class2.....") 【添加一个或多个类名】
classList.remove("class1,class2.....") 【删除一个或多个类名】
classList.toggel("class") 【切换类名】
classList.contains("class") 【判断类名是否存在,存在未true,不存在为false】
clasList.item(index) 【返回指定索引的类名】
classList.length 【返回类名的个数】