DOM的常用操作

查找：

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