JavaScript学习笔记(第七章—DOM)

最新推荐文章于 2022-11-25 15:09:35 发布

李yufei

最新推荐文章于 2022-11-25 15:09:35 发布

阅读量634

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/RuanLiyufei/article/details/103449266

版权

JavaScript学习笔记(第七章—DOM)1、DOM对象简介1.1 什么事DOM对象DOM(Document Object Model 文档对象模型)可以完成HTML和XML文档的操作，在JavaScript中利用DOM操作HTML和CSS样式是最常用的样式之一。DOM对JavaScript是一种可操作HTML文档得重要手段。利用DOM可完成对HTML文档内所有元素的获取、访问、标签属性...

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

JavaScript学习笔记(第七章—DOM)

1、DOM对象简介
1.1 什么事DOM对象
DOM(Document Object Model 文档对象模型)可以完成HTML和XML文档的操作，在JavaScript中利用DOM操作HTML和CSS样式是最常用的样式之一。DOM对JavaScript是一种可操作HTML文档得重要手段。利用DOM可完成对HTML文档内所有元素的获取、访问、标签属性和样式的设置等操作。

1.2 DOM HTML 节点树
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
1、整个文档是一个文档节点
2、每个 HTML 元素是元素节点
3、HTML 元素内的文本是文本节点
4、每个 HTML 属性是属性节点
5、注释是注释节点
下面以、、节点为例进行介绍
（1）根节点：标签是整个文档的根节点，有且仅有一个。
（2）子节点：指的是某个节点的下级节点，例如·和节点是节点的子节点。
（3）父节点：指的是某个节点的上级节点，例如是和body的父节点
（4）兄弟节点：两个节点同属于一个父节点，例如和互为兄弟节点

一个HTML文件可以看作是所有元素组成的一个节点树，各元素节点之间有级别的划分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试</title>
	</head>
	<body>
		<a herf='#'>链接</a>
		<p>段落.......</p>
	</body>
</html>

1.3 DOM对象的继承关系
在JavaScript中要对网页中的元素进行操作，可以利用document对象的getElementById()方法实现，下列代码test表示要操作的对象，test对象是HTMLDivElement构造函数的实例。通过控制台查看对象的原型，可以得到DOM对象之间的继承关系。

<div id="test"></div>
		<script type="text/javascript">
			var test

最低0.47元/天解锁文章

李yufei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记(第七章—DOM)

JavaScript学习笔记(第七章—DOM)1、DOM对象简介1.1 什么事DOM对象DOM(Document Object Model 文档对象模型)可以完成HTML和XML文档的操作，在JavaScript中利用DOM操作HTML和CSS样式是最常用的样式之一。DOM对JavaScript是一种可操作HTML文档得重要手段。利用DOM可完成对HTML文档内所有元素的获取、访问、标签属性...
复制链接

扫一扫