DOM汇总

节点名称

html标签名称，默认都是大写的。toLowerCase()将大写字母转换成小写。

			var test = document.getElementById("test");
			console.log(test);
			
			console.log(test.nodeName);
			
			if (test.nodeName.toLowerCase() == "div"){
				console.log("yes");
			} else {
				console.log("no");
			}

获取元素方法

getElementById 通过ID获取
getElementByName 通过特性name获取
getElementByClassName 通过css样式获取(class)
getElementByTagName 通过标签名称获取

querySelector

获取符合条件的对象

var testa = document.querySelector("#test");
console.log(testa);

获取符合条件的所有元素，一个list

var testb = document.querySelectorAll("#test div");
			console.log(testb);

兄弟节点

console.log(bro.previousSibling);
console.log(bro.nextSibling);

DOM操作

创建元素

var testLi = document.createElement("li");
			testLi.innerHTML ="aaaaaaaaaaaaaa";
			
			console.log(testLi);

增加元素

必须是一个HTMLelement对象

			//增加元素
			var testUl = document.getElementById("testul");
			console.log(testUl);
			testUl.appendChild(testLi);
			
			var testp = document.getElementById("aa");
			console.log(testp);
			testp.appendChild(testLi);

插入元素

			//插入元素
			var testp = document.getElementById("aa");
			var testUl = document.getElementById("testul");
			
			var testP = document.createElement("p");
			testP.innerHTML ="aaaaaaaaaaaaaa";
			
			console.log(testP);
			
			console.log(testUl.childNodes[1]);
			testp.insertBefore(testP,testp.childNodes[1]);

删除元素

			//删除元素
			
			testp.removeChild(testP);

完整的HTML实验文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p id="aa"> Hello World!</p>
		
		<ul id="testul">
			
			<li>abc</li>
		</ul>
		
		<script>
			
			//创建元素
			var testLi = document.createElement("li");
			testLi.innerHTML ="aaaaaaaaaaaaaa";
			
			console.log(testLi);
			
			
			//增加元素
			var testUl = document.getElementById("testul");
			console.log(testUl);
			testUl.appendChild(testLi);
			
			/*var testp = document.getElementById("aa");
			console.log(testp);
			testp.appendChild(testLi);*/
			
			
			//插入元素
			var testp = document.getElementById("aa");
			var testUl = document.getElementById("testul");
			
			var testP = document.createElement("p");
			testP.innerHTML ="aaaaaaaaaaaaaa";
			
			console.log(testP);
			
			console.log(testUl.childNodes[1]);
			testp.insertBefore(testP,testp.childNodes[1]);
			
			
			//删除元素
			
			testp.removeChild(testP);
			
		</script>
	</body>
</html>