JS学习之路系列总结四象阵（此文犹如武林之中的易筋经，是你驰骋IT界的武功心法，学会JS五大阵法就学会了JS，博主建议先学三才阵）

Posted 2020-10-10

四象阵法: 增加 删除 改变 查找 【为了便于记忆，减少占用大脑内存，我命名为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 【返回类名的个数】