查找:
getElementById("id");
getElementsByTagName("element");
getElementsByClassName("class");
getElementsByName("name");
querySelector("img.button");//返回与该模式匹配的第一个元素
querySelectorAll(".selected");//返回的是所有匹配的元素,一个NodeList的实例
创建:
createElement("element");
createDocumentFragment();//创建文本片段
createTextNode("text");//创建新文本节点
innerHTML
添加和插入:
someNode.appendChild(newNode);//用于向childNodes列表的末尾添加一个节点
someNode.insertBefore(newNode,someNode.firstChild);//插入到someNode节点第一个孩子节点的前面
//如何在某个子节点的后面插入节点
function insertAfter(newNode,targetNode){
let parentNode=targetNode.parentNode;
//父节点的第一个孩子节点和最后一个孩子节点为firstChild和lastChlid
if(parentNode.lastChild==targetNode){
parentNode.appendChild(newNode);
}else{
//前一个同胞兄弟节点和后一个同胞兄弟节点为previousSibling和nextSibling
parentNode.insertBefore(newNode,targetNode.nextSibling);
}
}
移除、替换和复制
someNode.removeChild(someNode.firstChild);//移除
someNode.replaceChild(newNode,someNode.firstChild);//替换
cloneNode(true);//复制
//html
<ul id="myList"><li>1</li><li>2</li><li>3</li></ul>
//javascript
var myList=document.getElementById("myList");
console.log(myList.childNodes.length);//3
var cloneList=myList.cloneNode(true);
console.log(cloneList.childNodes.length);//3