Dom对象

最新推荐文章于 2024-10-30 19:10:39 发布

前端小新wxb

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量114

点赞数

分类专栏：笔记文章标签： javascript html5 jquery

本文链接：https://blog.csdn.net/Jaxson22/article/details/109724884

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了DOM（文档对象模型）的基本概念，它作为网页与脚本语言沟通的桥梁。示例代码展示了如何使用JavaScript获取HTML文档中的元素，并通过innerText属性获取节点文本。同时，对比了innerText与innerHTML的区别，强调了DOM方法的使用。最后提到了DOM对象与jQuery对象的差异，建议在编程时通过前缀区分两者。

摘要由CSDN通过智能技术生成

DOM对象:DOM是以层次结构组织的节点或信息片断的集合。文档对象模型（Document Object Model）是给HTML与XML文件使用的一组API。DOM的本质是建立网页与脚本语言或程序语言沟通的桥梁。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li><a href="#">超链接1</a></li>
			<li><a href="#">超链接2</a></li>
			<li><a href="#">超链接3</a></li>
		</ul>
		<script>
			var lis = document.getElementsByTagName('li');
			var firstli = lis [2];
			var text =firstli.innerText;
			console.log(text);
			
			
			
		</script>
	</body>
</html>

在此案例中,ul（无序列表）中嵌套了三个a标签（超链接标签）：

获取列表中的数据，此处用#来表示空内容，

innertext和innerHTML的区别:

1.innertext无法解析内容中含有标签的文本。即标签和文字原样输入。

2.innerhtml会解析内容中的标签。将文字和样式进行输出。

注意;DOM方法和jQuery方法中各自只能使用各自的方法：

var domObj = document.getElementById("id"); //DOM对象
var $obj = $("#id"); //jQuery对象;

方法：平时用到的jquery对象都是通过$()函数制造出来的，$()函数就是一个jquery对象的制造工厂.
建议:如果获取的对象是 jquery对象，那么在变量前面加上$,这样方便容易识别出哪些是jquery对象,例如:
var $variable = jquery对象;
如果获取的是dom对象，则定义如下:
var variable = dom对象

DOM;只能使用innertext和innerHTML。