DOM节点基础详解篇

[zlluGitHub]

• DOM可以将任何HTML描绘成一个由多层节点构成的结构。节点分为12种不同类型，每种类型分别表示文档中不同的信息及标记。

• 每个节点都拥有各自的特点、数据和方法，也与其他节点存在某种关系。

• 节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。

• 在var nodeTagName = obj.nodeName.toLowerCase();中的.toLowerCase()的作用是将nodeName返回值变成小写。（一般nodeName的返回值为大写）

• 部分案例：

        <script>
		var divNode = document.getElementById("container");
		if (divNode.nodeType == 1){  //判断是否为元素节点
			alert("Node is an element.");
		}
		console.log(divNode.nodeName + "//" + divNode.nodeValue);
		var attrNode = divNode.attributes[1];  
		console.log(attrNode.nodeName + "//" + attrNode.nodeValue);
		var textNode = divNode.childNodes[0];  //获取第一个子元素节点
		console.log(textNode.nodeName + "//" + textNode.nodeValue);
		var commentNode = document.body.childNodes[1];
		console.log(commentNode.nodeName + "//" + commentNode.nodeValue);
		console.log(document.doctype.nodeName + "//" + document.doctype.nodeValue);
		var frag = document.createDocumentFragment();
		console.log(frag.nodeName + "/" + frag.nodeValue);
		if (divNode.nodeType == 1){
			alert("Node is an element.");
		}
	</script>

• 关于DOM更多 ，可以查看这位博友总结的dom笔记-《DOM探索之基础详解篇》，总结的很全面。或查看慕课网课程JavaScript进阶篇.