第三章：JavaScript操作DOM对象

最新推荐文章于 2024-08-27 21:01:56 发布

w就是不秃

最新推荐文章于 2024-08-27 21:01:56 发布

阅读量120

点赞数

分类专栏： JavaScript&JQuery 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/NoKris/article/details/126498652

版权

本文详细介绍了JavaScript操作DOM对象，包括节点关系、访问节点、节点信息、重点讲述操作节点的属性、创建和插入节点、删除和替换节点、操作节点样式以及获取元素的样式和位置的方法。内容涵盖通用的DOM遍历技巧和属性修改实例。

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

第三章：JavaScript操作DOM对象

**DOM：**Document Object Model（文档对象模型）,它主要分为三个部分：DOM Core，HTML-DOM，CSS-DOM。

在这里插入图片描述

节点关系

我们要操作DOM也就是节点，那我们要知道节点的关系，节点关系其实和二叉树是一样的，有父节点，兄弟节点，子节点。

HTML的结构就是这样的document是整个HTML文件的内容，里面包含html节点。如下图一致。
在这里插入图片描述

一，访问节点

直接访问

我们在BOM的时候学到了几个访问Document的方法：

getElementById()

getElementByName()

getElementByTagName()

这是直接定位到指定的节点，那么还有一种方法是根据层级，一层一层的遍历到我们想要的节点。

根据层次关系访问节点

想遍历节点层级，我们就要学习一些新的方法帮助我们去遍历。

属性名称	描述
parentNode	返回节点的父节点
childNodes	返回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild	返回节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点

用上面的方式可能获得的并不是我们所想要的元素，因为每个浏览器的规则不同，所以我们也有不同的方式。

属性名称	描述
firstElementChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	下一个节点
previousElementSibling	上一个节点

通用方式写法

oNext = oParent.nextElementSibling || oParent.nextSibling

oPre = oParent.previousElementSibling || oParent.previousSibling

oFirst = oParent. firstElementChild || oParent.firstChild

oLast = oParent.lastElementChild || oParent.lastChild

使用通用方式就可以不用在考虑拿到的是不是我们想要的节点了。

二，节点信息

我获得了节点，那么怎么访问节点信息呢？我们先认识几个名词

nodeName：节点名称

nodeValue：节点值

nodeType：节点类型

nodeType返回值对照表：

节点类型	NodeType值
元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9

三，操作节点（重点）

我们可以操作节点的很多东西，如下：

操作节点的属性

创建和插入节点

删除和替换节点

操作节点样式

获取元素的样式

1.操作节点的属性

主要方法:

getAttribute(“属性名”)

setAttribute(“属性名”,“属性值”)

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置属性值

最低0.47元/天解锁文章

w就是不秃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第三章：JavaScript操作DOM对象

**DOM：**Document Object Model（文档对象模型）,它主要分为三个部分：DOM Core，HTML-DOM，CSS-DOM。我们要操作DOM也就是节点，那我们要知道节点的关系，节点关系其实和二叉树是一样的，有父节点，兄弟节点，子节点。 HTML的结构就是这样的document是整个HTML文件的内容，里面包含html节点。如下图一致。直接访问我们在BOM的时候学到了几个访问Document的方法：这是直接定位到指定的节点，那么还有一种方法是根据层级，一层一层的
复制链接

扫一扫

专栏目录