js基础-13-常见DOM操作

一，查找节点

document.getElementById ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个；
document.getElementsByClassName ：根据类名查找元素，多个类名用空格分隔，返回一个 HTMLCollection 。注意兼容性为IE9+（含）。另外，不仅仅是document，其它元素也支持 getElementsByClassName 方法；
document.getElementsByTagName ：根据标签查找元素， * 表示查询所有标签，返回一个 HTMLCollection 。
document.getElementsByName ：根据元素的name属性查找，返回一个 NodeList 。
document.querySelector ：返回单个Node，IE8+(含），如果匹配到多个结果，只返回第一个。
document.querySelectorAll ：返回一个 NodeList ，IE8+(含）。

二，创建新节点

createElement
创建元素：

var elem = document.createElement("div");
elem.id = 'test';
elem.style = 'color: red';
elem.innerHTML = '我是新创建的节点';
document.body.appendChild(elem);

通过 createElement 创建的元素并不属于 document 对象，它只是创建出来，并未添加到html文档中，要调用 appendChild 或 insertBefore 等方法将其添加到HTML文档中。

createTextNode
创建文本节点：

			var box=document.getElementsByClassName('box')[0]
			function createElementWithText(tagName,text){
    
    
				var node=document.createElement(tagName)
				var oTxt=document.createTextNode(text)
				node.appendChild(oTxt)
				return node
			}
			var newNode=createElementWithText("div","我是新创建的节点")
			box.appendChild(newNode)

cloneNode
克隆一个节点： node.cloneNode(true/false) ，它接收一个bool参数，用来表示是否复制子元素。

var box=document.getElementsByClassName('box')[0]
var from = document.getElementById("test");
var clone = from.cloneNode(true);
clone.id = "test2";
box.appendChild(clone);

三，插入节点

parent.appendChild(newNode)
parentNode.insertBefore(newNode, refNode);

四，替换节点

parent.replaceChild(newChild, oldChild);

五，移除节点

var deletedChild = parent.removeChild(node);
返回的是删除的子节点