DOM即Document Object Model直译为文档对象模型,文档节点是整个文档树的根节点,它是文档中其他节点的父节点。DOM将HTML文档表达为树结构,把整个HTML代码看作文档节点,包含一个文档类型节点和一个元素节点html。
DOM将所有节点分为以下几类,包括节点类型、节点名称与节点属性:
在html代码中主要表示为:
下面具体在浏览器中演示一下,不知道为什么在谷歌浏览器中无法显示,这里用的是火狐。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nodeName,nodeValue</title>
</head>
<body>
<!--nodeName, nodeValue实验-->
<div id="container">这是一个元素节点</div>
<script>
//获取元素对象
var divNode = document.getElementById("container");
console.log(divNode.nodeName + "/" + divNode.nodeValue);
//获取元素对象的属性节点
var attrNode = divNode.attributes[0];
console.log(attrNode.nodeName + "/" + attrNode.nodeValue);
//获取元素对象的文本节点
var textNode = divNode.childNodes[0];
console.log(textNode.nodeName + "/" + textNode.nodeValue);
//获取body节点的第二个子节点,因为第一个子节点是空白
var commentNode = document.body.childNodes[1];
console.log(commentNode.nodeName + "/" + commentNode.nodeValue);
//获取DOCTYPE节点相关信息
console.log(document.doctype.nodeName + "/" + document.doctype.nodeValue);
//文档片段节点
var frag = document.createDocumentFragment();
console.log(frag.nodeName + "/" + frag.nodeValue);
</script>
</body>
</html>
在火狐浏览器中的控制台输出如下
注:多数内容来自慕课网