<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>node Type</title>
</head>
<body>
<!--nodeType, nodeName, nodeValue实验-->
<div id="container">这是一个元素节点</div>
<script>
var divNode = document.getElementById('container');
//获取元素节点
console.log(divNode.nodeName + '/' + divNode.nodeValue);
if (divNode.nodeType == 1){
console.log('Node is an element.');
}
/*if (divNode.nodeType == Node.ELEMENT_NODE){
console.log('Node is an element.');
}*/
//获取属性节点 attributes保存了元素的所有属性
var attrNode = divNode.attributes[0];
console.log(attrNode.nodeName + '/' + attrNode.nodeValue);
if (attrNode.nodeType == 2){
console.log('Node is an attr.')
}
/*if (attrNode.nodeType == Node.ATTRIBUTE_NODE){
console.log('Node is an attr.');
}*/
//获取文本节点 childNodes获取父元素所有的子元素
var textNode = divNode.childNodes[0];
console.log(textNode.nodeName + '/' + textNode.nodeValue);
if (textNode.nodeType == 3){
console.log('Node is a text.')
}
/*if (attrNode.nodeType == Node.TEXT_NODE){
console.log('Node is a text.');
}*/
//获取注释节点 body第一个子元素是空白节点，注释节点是第二个
var commentNode = document.body.childNodes[1];
console.log(commentNode.nodeName + '/' + commentNode.nodeValue);
if (commentNode.nodeType == 8){
console.log('Node is a comment.')
}
/*if (commentNode.nodeType == Node.COMMENT_NODE){
console.log('Node is a comment.');
}*/
//获取文档类型节点，直接写到控制台
console.log(document.doctype.nodeName + '/' + document.doctype.nodeValue);
if (document.doctype.nodeType == 10){
console.log('Node is a DoctypeText.')
}
/*if (document.doctype.nodeType == Node.DOCUMENT_TYPE_NODE){
console.log('Node is a DoctypeText.');
}*/
//获取文档片段节点
var frag = document.createDocumentFragment();
console.log(frag.nodeName + '/' + frag.nodeValue);
if (frag.nodeType == 11){
console.log('Node is a DocumentFragment.')
}
/*if (commentNode.nodeType == Node.COMMENT_FRAGMENT_NODE){
console.log('Node is a DocumentFragment.');
}*/
</script>
</body>
</html>