1. 程式人生 > >JS學習之路系列總結四象陣(此文猶如武林之中的易筋經,是你馳騁IT界的武功心法,學會JS五大陣法就學會了JS,博主建議先學三才陣)

JS學習之路系列總結四象陣(此文猶如武林之中的易筋經,是你馳騁IT界的武功心法,學會JS五大陣法就學會了JS,博主建議先學三才陣)

元素 ins dom 命名 aslist element 多個 及其 nod


四象陣法: 增加 刪除 改變 查找 【為了便於記憶,減少占用大腦內存,我命名為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 【返回類名的個數】

JS學習之路系列總結四象陣(此文猶如武林之中的易筋經,是你馳騁IT界的武功心法,學會JS五大陣法就學會了JS,博主建議先學三才陣)