DOM中常見的節點操作方法
1.建立節點
a.建立元素節點:document.createElement("div");
b.建立文字節點:document.createNode("Hello world");
2.插入節點
a.在父元素中插入節點:parentNode.appendChild(newNode);
b.將節點插入到父元素之前:parentNode.insertBefore(newNode,positionNode);
3.獲取節點
a.獲取單個節點
1) document.getElementById();
2) document.querySelector();匹配指定css選擇器元素的第一個子元素
b.獲取多個元素
1) document.getElementsByTagName(); //返回一個物件陣列(準確的說是HTMLCollection集合)
2) document.getElementsByName(); //返回一個有相同name的陣列
3) document.getElementsByClassName(); 返回文件中所有指定類名的元素集合,作為 NodeList 物件
4) document.querySelectorAll();//匹配指定css選擇器元素的所有子元素
c.獲取父元素 ele.parentNode;
d.獲取子元素 ele.children;
e.獲取兄弟節點
1) ele.previousElementSibling;//上一個兄弟元素
2)ele.nextElementSibling//下一個兄弟元素
e.節點移除 parentNode.removeChild(childNode)
f.替換子元素 parentNode.replaceChild(newNode,oldNode)
g.複製元素 ele.cloneNode(boolean); boolean為true,同時複製子節點。
4.屬性操作
ele.setAttribute(name,value)//設定屬性
ele.getAttribute(name)//獲取元素的屬性
ele.removeAttribute(name)//移除屬性