Day4:DOM文档对象模型1

最新推荐文章于 2024-08-20 16:48:16 发布

DemoCloud

最新推荐文章于 2024-08-20 16:48:16 发布

阅读量82

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_44621368/article/details/116998849

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

什么是DOM

DOM，全称是Document Object Model
在JS中通过DOM来对HTML来对HTML文档进行操作。所以DOM很重要
Document 文档
文档表示的就是整个HTML网页
Object 对象：
网页中的每个部分都可以转换为一个对象
Model 模型
使用模型表示对象之间的关系，方便获取对象

模型

文档

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

文档对应的模型
在这里插入图片描述
可以根据这个模型确定元素之间的关系，例如已知html节点，可以找到它的子孙节点。

节点

节点Node，是构成网页的最基本的组成部分，网页中每个部分都可以称为一个节点。
例如：html标签，属性id、class，文本txt，注释，整个文档等都是节点。
节点的类型：
文档节点：整个HTML文档
元素节点：html文档中的标签。html a input img 等等
属性节点：元素的属性。href，rel ，id，class，name等等
文本节点：HTML标签中的文本内容

节点的属性

nodeName
nodeType
nodeValue

文档节点（document）

文档节点document，代表的是整个HTML文档，网页中的所有节点都是它的子节点。
document对象作为window对象的属性存在的，我们不用获取可以直接使用。
通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象。

元素节点（Element）

HTML中的各种标签都是元素节点，这也是我们最常用的一个节点。
浏览器会将页面中所有的标签都转换为一个元素节点，我们可以通过document的方法来获取元素节点。
比如：
document.getElementById()
根据id属性值获取一个元素节点对象

文本节点（Text）

文本节点表示的是HTML标签以外的文本内容，任意非HTML的文本都是文本节点。
它包括可以字面解释的纯文本内容。
文本节点一般是作为元素节点的子节点存在的。
获取文本节点时，一般先要获取元素节点。在通过元素节点获取文本节点。
例如：
元素节点.firstChild;
获取元素节点的第一个子节点，一般为文本节点

属性节点（Attr）

属性节点表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。
可以通过元素节点来获取指定的属性节点。
例如：
元素节点.getAttributeNode(“属性名”);
注意：我们一般不使用属性节点

事件

事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间
JavaScript 与 HTML 之间的交互是通过事件实现的。
对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键，等等

获取元素节点

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

获取元素节点的子节点

通过具体的元素节点调用
getElementsByTagName()：方法，返回当前节点的指定标签名后代节点
childNodes：属性，表示当前节点的所有子节点
firstChild：属性，表示当前节点的第一个子节点
lastChild**;属性**，表示当前节点的最后一个子节点

获取父节点和兄弟节点

通过具体的节点调用
parentNode:属性，表示当前节点的父节点
previousSibling****属性，表示当前节点的前一个兄弟节点
nextSibling****属性，表示当前节点的后一个兄弟节点

元素节点的属性

获取，元素对象.属性名

element.value
element.id
element.className

设置，元素对象.属性名=新的值

element.value = “hello”
element.id = “id01”
element.className = “newClass"

其他属性

nodeValue:文本节点可以通过nodeValue属性获取和设置文本节点的内容

innerHTML: 元素节点通过该属性获取和设置标签内部的html代码

使用CSS选择器进行查询

querySelector()
querySelectorAll()
这两个方法都是用document对象来调用，两个方法使用相同，都是传递一个选择器字符串作为参数，方法会自动根据选择器字符串去网页中查找元素。
不同的地方是querySelector()只会返回找到的第一个元素，而querySelectorAll()会返回所有符合条件的元素。

节点的修改

这里的修改我们主要指对元素节点的操作。
创建节点 document.createElement(标签名)
删除节点 父节点.removeChild(子节点)
替换节点 父节点.replaceChild(新节点 , 旧节点)
插入节点
父节点.appendChild(子节点)
父节点.insertBefore(新节点 , 旧节点)

DemoCloud

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day4:DOM文档对象模型1

什么是DOMDOM，全称是Document Object Model在JS中通过DOM来对HTML来对HTML文档进行操作。所以DOM很重要Document 文档文档表示的就是整个HTML网页Object 对象：网页中的每个部分都可以转换为一个对象Model 模型使用模型表示对象之间的关系，方便获取对象模型文档<html> <head> <title>网页的标题</title> <head>
复制链接

扫一扫

专栏目录