DOM简述

最新推荐文章于 2024-09-13 08:33:26 发布

余意.40

最新推荐文章于 2024-09-13 08:33:26 发布

阅读量303

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_71917459/article/details/126107821

版权

本文详细介绍了DOM（文档对象模型），包括DOM树的概念，以及通过ID、name和标签名查找DOM元素的方法。文章还展示了如何改变DOM属性，如修改元素的href、title和innerHTML，并演示了使用onmouseover和onmouseout事件处理鼠标经过和离开元素时的行为。

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

一、DOM是什么？

DOM全拼为Document Object Model（文档对象模型）它是一种与平台和语言无关的应用程序接口(API)，它可以动态地访问程序和脚本，更新其内容、结构和 www 文档的风格(目前，HTML 和 XML 文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。
所有html标签中的属性及属性值均可以通过DOM来操作【获取、改变、删除】

二、DOM树

在这里插入图片描述
DOM树: 内存中保存一个网页中所有内容的树型结构。

三、查找dom元素的方式

1.通过id名找到元素

document.getElementById("id属性值");

2.通过name属性找到元素

document.getElementsByName("name属性值");

3.通过标签名来查找元素

document.getElementsByTagName("标签名");

四、改变dom属性的方法

<body>
		<a href="http://www.sohu.com" title="sohu" id="link">搜狐</a>
		<script type="text/javascript">
			window.onload = function(){
				var linkObj = document.getElementById("link");
				//改变Dom属性
				linkObj.href = "http://www.baidu.com";
				linkObj.title = "baidu";
				linkObj.innerHTML = "百度"
				linkObj.className = "link"
				console.log(linkObj.href,linkObj.title,linkObj.innerHTML,linkObj.className);
			}
		</script>
	</body>

五、DOM操作属性–鼠标经过与滑离

<body>
		<script type="text/javascript">
			function horse() {    //onmouseover   鼠标经过
				var picObj = document.getElementById("pic");
				picObj.src = "图片路径"
			}

			function dog() {    //onmouseout      鼠标滑离
				var picObj = document.getElementById("pic");
				picObj.src = "图片路径"
			}
		</script>
		<img src="图片路径" onmouseover="horse()" onmouseout="dog()" id="pic">
	</body>