JavaScript学习笔记（二）DOM文档对象模型

最新推荐文章于 2024-11-07 17:01:30 发布

没有胡萝卜的兔子

最新推荐文章于 2024-11-07 17:01:30 发布

阅读量296

点赞数

分类专栏：网络安全学习笔记文章标签： js javascript

本文链接：https://blog.youkuaiyun.com/weixin_44197106/article/details/111241116

版权

网络安全学习笔记专栏收录该内容

4 篇文章

订阅专栏

本文主要介绍了DOM（Document Object Model）的基本概念，包括文档、对象和模型的含义，以及节点的概念和类型，如文档节点、元素节点、属性节点和文本节点。此外，还探讨了JavaScript如何通过DOM操作网页，并讲解了事件和事件处理方式，如结构和行为耦合的不推荐做法，以及通过绑定响应函数来处理事件的方法。最后，列举了通过`document`对象获取元素节点的常用方法，如`getElementById()`、`getElementsByTagName()`和`getElementByName()`。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM简介

DOM全称Document Object Model文档对象模型
JS中通过DOM来对HTML文档进行操作，只要理解了DOM就可以随心所欲地操作WEB页面
文档：表示整个HTML网页文档
对象：表示将网页中的每一个部分都转换为了一个对象
模型：使用模型来表示对象之间的关系，方便我们获取对象

一个基本的模型，通过树状图可以体现节点与节点之间的关系
在这里插入图片描述

1.html

<html>
	<head>
		<title>网页的标题</title>
	</head>
	<body>
		<a.href=“1.html”>超链接</a>
	</body>
</html>

节点：Node——构成HTML文档最基本的单元
节点Node是构成我们网页最基本的组成部分，网页中的每一个部分都可以称为是一个节点。比如：html标签、属性、文本、注释、整个文档等都是一个节点。虽然都是节点，但是他们实际上的具体类型是不同的，标签我们称为元素节点，属性称为属性节点，文本称为文本节点，，文档称为文档节点。节点的类型不同，属性和方法也都不尽相同。
文档节点：整个HTML文档
元素节点：HTML文档中的HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容

<p id=“pId”（属性节点）>This is a paragraph（文本节点）</p>（元素节点）

在这里插入图片描述

事件：
事件就是文档或浏览器窗口中发生的一些特定的交互瞬间，JavaScript与HTML之间的交互是通过事件实现的。对于Web应用来说，有下面这些代表性的事件：点击某个元素，将鼠标移动至某个元素上方，按下键盘上某个键等等。
我们可以在事件对应的属性中设置一些js代码，这样当事件被触发时，这些代码将会被执行。这种写法我们称为结构和行为耦合，不方便维护，所以不推荐使用。
例：

<botton id=“btn” onclick=“alert(‘警告’)”>按钮</botton>

表现为：当点击按钮时，弹出警告
我们可以为按钮的对应事件绑定处理函数的形式来相应事件，这样当事件被触发时，其对应的函数会被调用。像这种为单击事件绑定的函数，我们称之为单机响应函数。

//获取按钮对象
var btn = document.getElementById(“btn”);
//绑定一个单击事件
btn.onclick = function(){
	alert(“警告”);
}

获取元素节点:（通过document对象调用）
1.getElementById() 通过id属性获取一个元素节点对象
2.getElementByTagName() 通过标签名获取一组元素节点对象
3.getElementByName() 通过name属性获取一组元素节点对象