DOM节点的nodeType和nodeValue

以下便是常用的一些节点类型。数值常量和字符常量便是节点的nodeType属性

节点类型 数值常量 字符常量
Element(元素节点) 1 ELEMENT_NODE
Attr(属性节点) 2 ATTRBUTE_NODE
Text(文本节点) 3 TEXT_NODE
Comment(注释节点) 8 COMMNET_NODE
Document(文档节点) 9 DOCUMENT_NODE
DocumentType(文档类型节点) 10 DOCUMENT_TYPE_NODE
DocumentFragment(文档片段节点) 11 DOCUMENT_FRAGMENT_NODE

实际上为了照顾各浏览器的兼容性,在需要判断节点类型的时候,都是判断该节点的nodeType属性是否等于某个节点的数值常量

var divNode = document.getElementById("container");
//以下写法并不通用,可能存在兼容性问题,因为不是所有浏览器都内置了Node对象
if(divNode.nodeType == Node.ELEMENT_NODE){
    alert("Element node");
}
//所以要采取使用数值变量来判断
if(divNode.nodeType == 1){
    alert("Element node");
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>nodeType, nodeValue</title>
</head>
<body>
    <!-- 这是一个注释 -->
	<div id="container">Hello World</div>
	<script type="text/javascript">
		var divNode = document.getElementById("container");
		console.log(divNode.nodeType + '/' + divNode.nodeValue);
		var textNode = divNode.childNodes[0];
		console.log(textNode.nodeType + '/' + textNode.nodeValue);
		var commentNode = document.body.childNodes[1];
		console.log(commentNode.nodeType + '/' + commentNode.nodeValue);
		console.log(document.doctype.nodeType + '/' + document.doctype.nodeValue);
		var attrNode = divNode.attributes[0];
		console.log(attrNode.nodeType + '/' + attrNode.nodeValue);
		var frag = document.createDocumentFragment();
		console.log(frag.nodeType + '/' + frag.nodeValue);
	</script>
</body>
</html>

以上是一段简单的HTML代码,那么这段代码中的 元素节点 便是如"<html>","<head>","<div>"这类的标签,要注意的是一对为一个节点。属性节点就是标签内的属性,例如div标签中的id属性。文本节点就是标签内或者标签与标签之间的字符内容,而且可以为空,所以标签与标签之间的空格(行)也是文本节点,例如<body>跟注释之间的空格就是一个文本节点,这也是为什么在上面的JS代码获取commentNode的时候要选取<body>子节点集中的第二个节点。注释节点就是HTML中的注释部分。文档类型节点就是代码开头的<!DOCTYPE html>部分,该节点的主要功能是告诉浏览器该文档是由哪个版本的HTML编写的。文档片段节点,也就是上面JS代码部分的frag变量,该节点由于其在插入HTML的过程中只会插入其子孙节点所以更类似于一个占位符,主要用于动态修改HTML元素。


猜你喜欢

转载自blog.csdn.net/hjc256/article/details/80825523