初探DOM（文档对象模型）

最新推荐文章于 2024-09-01 13:33:34 发布

会飞的咸鱼cc

最新推荐文章于 2024-09-01 13:33:34 发布

阅读量289

点赞数 1

分类专栏： JS 文章标签： JS DOM javascript Document

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

DOM

（文档对象模型(Document Object Model)）

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

节点类型

index.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);
		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);
	</script>
</body>
</html>

input:

DIV/null  nodeName-nodeValue.html:12:3
id/container  nodeName-nodeValue.html:14:3
#text/这是一个元素节点  nodeName-nodeValue.html:16:3
#comment/nodeName, nodeValue实验  nodeName-nodeValue.html:18:3
html/null  nodeName-nodeValue.html:19:3
#document-fragment/null  nodeName-nodeValue.html:21:3

------------------------------------------

Document对象的属性

Document对象的方法

会飞的咸鱼cc

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初探DOM（文档对象模型）

DOM（文档对象模型(Document Object Model)）文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape
复制链接

扫一扫

专栏目录