DOM文档对象模型

已于 2022-09-13 11:14:22 修改
阅读量745 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript
于 2022-09-13 10:53:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42839746/article/details/126828157
版权
本文详细介绍了DOM（文档对象模型），包括DOM对象的节点树结构，HTML元素的操作如获取、属性、样式、内容的修改，HTMLCollection和NodeList对象的区别，以及DOM节点的添加和删除。DOM是JavaScript操作HTML的重要工具，通过document对象和Element对象的方法，可以实现对HTML元素的全面控制。

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

@[TOC](这里写目录标题)
# 一、DOM对象简介
## 1、DOM：文档对象模型（Document Object Model，简称DOM）

一、DOM对象简介

1、DOM：文档对象模型（Document Object Model，简称DOM）

2、DOM HTML节点树：指的是DOM中为操作HTML文档提供的属性和方法，一个HTML文件可以看作是所有元素组成的一个节点树，各元素节点之间有级别的划分 。

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

HTML文档根据节点作用，分为标签节点、文本节点、属性节点和注释节点。

各节点之间的关系，又可分为以下几个方面：

根节点：<html>标签是整个文档的根节点，有且仅由一个。

子节点：指的是某一个节点的下级节点。

父节点：指的是某一个节点的上级节点。

兄弟节点：两个节点同属于一个父节点。

3、DOM对象的继承关系

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>

<body>

    <div id="Tom"></div>

    <script>

        var Tom = document.getElementById('Tom');

        console.log(Tom);         // 输出结果：<div id="Tom"></div>

        console.log(Tom.__proto__);   // 输出结果：HTMLDivElement { …… }

    </script>

</body>

</html>

从上面的代码中我们可以总结出以下三点：

（1）document和Element是两种不同类型的节点（Node）对象。

（2）它们不仅能够使用Node对象的一系列属性和方法完成节点操作。

（3）也可以使用特有的属性和方法完成不同类型节点的操作。

除了document和Element对象，还有其他几种类型的节点对象也继承Node对象，如文本（Text）、注释（Comment）等。

Node.属性名

值

相应的对象

说明

ELEMEN_NODE

1

Element

元素节点

ATTRIBUTE_NODE

2

Attr

属性节点

TEXT_NODE

3

Text

文本节点

COMMENT_NODE

8

Comment

注释节点

DOCUMENT_NODE

9

Document

文档节点

#二、HTML元素操作

##1、获取操作的元素（document对象的方法和属性、Element对象的方法和属性）

（1）document对象的方法和属性

document对象提供了一些用于查找元素的方法，利用这些方法可以根据元素的id、name和class属性以及标签名称的方式获取操作的元素。

方法

说明

document.getElementById()

返回对拥有指定id的第一个对象的引用

document.getElementsByName()

返回带有指定名称的对象集合

document.getElementsByTagName()

返回带有指定标签名的对象集合

document.getElementsByClassName()

返回带有指定类名的对象集合（不支持IE6~8）

温馨提示：除了document.getElementById()方法返回的是拥有指定id的元素外，其他方法返回的都是符合要求的一个集合。若要获取其中一个对象，可以通过下标的方式获取，默认从0开始。

document对象提供一些属性，可用于获取文档中的元素。例如，获取所有表单标签、图片标签等。

属性

说明

document.body

返回文档的body元素

document.documentElement

返回文档的html元素

document.forms

返回对文档中所有Form对象引用

document.images

返回对文档中所有Image对象引用

总结：document对象的body属性用于返回body元素。document对象的documentElement属性用于返回HTML文档的根节点html元素。

HTML5中为更方便获取操作的元素，为document对象新增了两个方法，分别为querySelector()和querySelectorAll()。

querySelector()方法用于返回文档中匹配到指定的元素或CSS选择器的第1个对象的引用。

querySelectorAll()方法用于返回文档中匹配到指定的元素或CSS选择器的对象集合。

由于这两个方法的使用方式相同，下面以document.querySelector()方法为例演示。

<script>

    console.log(document.querySelector('div'));        // 获取匹配到的第1个div

    console.log(document.querySelector('#box'));    // 获取id为box的第1个div

    console.log(document.querySelector('.bar'));      // 获取class为bar的第1个div

    console.log(document.querySelector('div[name]'));// 获取含有name属性的第1个div

    console.log(document.querySelector('div.bar'));// 获取文档中class为bar的第1个div

    console.log(document.querySelector('div#box'));// 获取文档中id为box的第1个div

</script>

（2）Element对象的方法和属性

在DOM操作中，元素对象也提供了获取某个元素内指定元素的方法，常用的两个方法分别为getElementsByClassName()和getElementsByTagName()。它们的使用方式与document对象中同名方法相同。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>



    <ul id="ul">

        <li>PHP</li>

        <li>JavaScript</li>

        <ul>

            <li>jQuery</li>

        </ul>

    </ul>

    <script>

        var lis = document.getElementById('ul').getElementsByTagName('li');

        console.log(lis);// 输出结果：(3) [li, li, li]

    </script>

</body>

</html>

元素对象还提供了children属性用来获取指定元素的子元素。例如，获取上述示例中ul的子元素。

    <script>

        var lis = document.getElementById('ul').children;

        console.log(lis);       // 输出结果：(3) [li, li, ul]

    </script>

元素对象的children属性返回的也是对象集合，若要获取其中一个对象，也需通过下标的方式获取，默认从0开始。

另外，document对象中也有children属性，它的第一个子元素通常是html元素。

##2、HTMLCollection对象

HTMLCollection对象：通过document对象或Element对象调用getElementsByClassName()方法、getElementsByTagName()方法、children属性等返回的对象集。

NodeList对象：document对象调用getElementsByName()方法在Chrome和FireFox浏览器中返回的是NodeList对象，IE11返回的是HTMLCollection对象。

HTMLCollection与NodeList对象的区别：HTMLCollection对象用于元素操作，NodeList对象用于节点操作。

温馨提示：对于getElementsByClassName()方法、getElementsByTagName()方法和children属性返回的集合中可以将id和name自动转换为一个属性。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HTMLCollection对象</title>

</head>

<body>

    <li id="test" name="test">test</li>

    <script>

        var lis1 = document.getElementsByTagName('li'); // 获取标签名为li的对象集合

        var test = document.getElementById('test');           // 获取id为test的li元素对象

        lis1.test === test;                         // 比较结果：true

        var lis2 = document.getElementsByName('test');   // 获取name名为test的对象集合

        lis1.test === lis2[0];                         // 比较结果：true

    </script>

</body>

</html>

##3、元素内容

可以利用DOM提供的属性和方法来对获取的元素内容进行操作。

分类

名称

说明

属性

innerHTML

设置或返回元素开始和结束标签之间的HTML

innerText

设置或返回元素中去除所有标签的内容

textContent

设置或者返回指定节点的文本内容

方法

document.write()

向文档写入指定的内容

document.writeln()

向文档写入指定的内容后并换行

属性属于Element对象，方法属于document对象。

innerHTML在使用时会保持编写的格式以及标签样式。

innerText则是去掉所有格式以及标签的纯文本内容。

textContent属性在去掉标签后会保留文本格式。

温馨提示：innerText属性在使用时可能会出现浏览器兼容的问题。因此，推荐在开发时尽可能的使用innerHTML获取或设置元素的文本内容。同时，innerHTML属性和document.write()方法在设置内容时有一定的区别，前者作用于指定的元素，后者则是重构整个HTML文档页面。因此，读者在开发中要根据实际的需要选择合适的实现方式

##4、元素属性

在DOM中，为了方便JavaScript获取、修改和遍历指定HTML元素的相关属性，提供了操作的属性和方法。

分类

名称

说明

属性

attributes

返回一个元素的属性集合

方法

setAttribute(name, value)

设置或者改变指定属性的值

getAttribute(name)

返回指定元素的属性值

removeAttribute(name)

从元素中删除指定的属性

利用attributes属性可以获取一个HTML元素的所有属性，以及所有属性的个数length。

##5、元素样式

通过元素属性的操作修改样式。

元素样式语法：style.属性名称。

要求：需要去掉CSS样式名里的中横线“-”，并将第二个英文首字母大写。

举例：设置背景颜色的background-color，在style属性操作中，需要修改为backgroundColor。

名称

说明

background

设置或返回元素的背景属性

backgroundColor

设置或返回元素的背景色

display

设置或返回元素的显示类型

height

设置或返回元素的高度

left

设置或返回定位元素的左部位置

listStyleType

设置或返回列表项标记的类型

overflow

设置或返回如何处理呈现在元素框外面的内容

textAlign

设置或返回文本的水平对齐方式

textDecoration

设置或返回文本的修饰

textIndent

设置或返回文本第一行的缩进

transform

向元素应用2D或3D转换

    <div id="box"></div>

    <script>

        var ele = document.getElementById('box'); // 获取元素对象

        ele.style.width = '100px';

        ele.style.height = '100px';

        ele.style.backgroundColor = 'blue';

        ele.style.transform = 'rotate(7deg)';

    </script>

HTML5新增的classList（只读）元素的类选择器列表。

若一个div元素的class值为“box header navlist title”，如何删除header？

HTML5解决方案：div元素对象.classList.toggle("header");

classList属性还提供了许多其他相关操作的方法和属性。

分类

名称

说明

属性

length

可以获取元素类名的个数

方法

add()

可以给元素添加类名，一次只能添加一个

remove()

可以将元素的类名删除，一次只能删除一个

toggle()

切换元素的样式，若元素之前没有指定名称的样式则添加，如果有则移除

item()

根据接收的数字索引参数，获取元素的类名

contains

判断元素是否包含指定名称的样式，若包含则返回true，否则返回false

##6、标签栏切换效果

<!DOCTYPE html>

<html>



<head>

    <meta charset="UTF-8">

    <title>标签栏切换效果</title>

    <style>

        .tab-box {

            width: 383px;

            margin: 10px;

            border: 1px solid #ccc;

            border-top: 2px solid #206F96;

        }



        .tab-head {

            height: 31px;

        }



        .tab-head-div {

            width: 95px;

            height: 30px;

            float: left;

            border-bottom: 1px solid #ccc;

            border-right: 1px solid #ccc;

            background: #206F96;

            line-height: 30px;

            text-align: center;

            cursor: pointer;

            color: #fff;

        }



        .tab-head .current {

            background: #fff;

            border-bottom: 1px solid #fff;

            color: #000;

        }



        .tab-head-r {

            border-right: 0;

        }



        .tab-body-div {

            display: none;

            margin: 20px 10px;

        }



        .tab-body .current {

            display: block;

        }

    </style>

</head>



<body>

    <div class="tab-box">

        <div class="tab-head">

            <div class="tab-head-div current">标签一</div>

            <div class="tab-head-div">标签二</div>

            <div class="tab-head-div">标签三</div>

            <div class="tab-head-div tab-head-r">标签四</div>

        </div>

        <!--jkdjfk?-->

        <div class="tab-body">

            <div class="tab-body-div current"> 1 </div>

            <div class="tab-body-div"> 2 </div>

            <div class="tab-body-div"> 3 </div>

            <div class="tab-body-div"> 4 </div>

        </div>

    </div>

    <script>

        // 获取标签栏的所有标签元素对象

        var tabs = document.getElementsByClassName('tab-head-div');

        // 获取标签栏的所有内容对象

        var divs = document.getElementsByClassName('tab-body-div');

        for (var i = 0; i < tabs.length; ++i) { // 遍历标签部分的元素对象

            tabs[i].onmouseover = function () { // 为标签元素对象添加鼠标滑过事件

                for (var i = 0; i < divs.length; ++i) { // 遍历标签栏的内容元素对象

                    if (tabs[i] == this) { // 显示当前鼠标滑过的li元素

                        divs[i].classList.add('current');

                        tabs[i].classList.add('current');

                    } else { // 隐藏其他li元素

                        divs[i].classList.remove('current');

                        tabs[i].classList.remove('current');

                    }

                }

            };

        }

    </script>

</body>

</html>

#三、DOM节点操作

##1、获取节点

由于HTML文档可以看做是一个节点树，因此，可以利用操作节点的方式操作HTML中的元素。

属性

说明

firstChild

访问当前节点的首个子节点

lastChild

访问当前节点的最后一个子节点

nodeName

访问当前节点名称

nodeValue

访问当前节点的值

nextSibiling

返回同一树层级中指定节点之后紧跟的节点

previousSibling

返回同一树层级中指定节点的前一个节点

parentNode

访问当前元素节点的父节点

childNodes

访问当前元素节点的所有子节点的集合

childNodes属性与children属性的区别：

相同点：都可以获取某元素的子元素。

不同点： childNodes属性用于节点操作，返回值中还会包括文本节点等其他类型的节点，是一个NodeList对象的集合。 children属性用于元素操作，返回的是HTMLCollection对象的集合

此外，由于document对象继承自Node节点对象，因此document对象也可以进行以上的节点操作。

    <script>

        // 访问document节点的第1个子节点

        document.firstChild;        // 访问结果：<!DOCTYPE html>

        // 访问document节点的第2个子节点

        document.firstChild.nextSibling;    // 访问结果：<html>……</html>

    </script>

##2、节点追加

在获取元素的节点后，还可以利用DOM提供的方法实现节点的添加，如创建一个li元素节点，为li元素节点创建一个文本节点等。

方法

说明

document.createElement()

创建元素节点

document.createTextNode()

创建文本节点

document.createAttribute()

创建属性节点

appendChild()

在指定元素的子节点列表的末尾添加一个节点

insertBefore()

为当前节点增加一个子节点（插入到指定子节点之前）

getAttributeNode()

返回指定名称的属性节点

setAttributeNode()  

设置或者改变指定名称的属性节点

create系列的方法是由document对象提供的，与Node对象无关。

##3、节点删除

语法：removeChild()和removeAttributeNode()方法实现。

返回值：是被移出的元素节点或属性节点。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>删除和替换节点</title>

    <style>

        * {
            padding: 0;
            margin: 0;
            font-size: 12px;
        }

        ul,li {
            list-style: none;
        }

        li {
            float: left;
            text-align: center;
            width: 140px;
        }

    </style>

</head>

<body>

    <ul>
        <li id="yao">
            <img src="https://z4a.net/images/2022/07/21/_.th.jpg" id="first">
            <p><input type="button" value="删除我吧" onclick="yao()"></p>
        </li>
        <li id="fawn">
            <img src="https://z4a.net/images/2022/07/21/_.th.jpg" id="second">
            <p><input type="button" value="换换我吧" onclick="fawn()"></p>
        </li>
    </ul>

</body>


<script type="text/javascript">
    yao = function () {
        document.getElementById("yao").onclick = function () {
            this.parentNode.removeChild(this);
        }
    }

    fawn = function () {
        document.getElementById("fawn").onclick = function () {
            this.parentNode.removeChild(this);
        }
    }

</script>


</html>
【教程】Yolov5目标跟踪检测整个流程
分享知识
02-13 7105
整个项目配置过程和教程讲解过程的录制视频，可搜索b站或西瓜视频up：杭漂一族小张。 这个专栏更新各种AI，以及各种有趣的教程，有兴趣的小伙伴可以订阅一下。 正题： 目标跟踪听名字顾名思义是用来检测跟踪目标物体的运动轨迹，通过其轨迹我们可以获取相应的数据。比如跟踪一条街道上的行人，可以检测当前路段通过的人流量，检测车辆，来统计车流量等等。 代码可以在github中搜索到，我们搜索下载量最高的就行。 首先需要下载Yolov5_DeepSort_Pytorch代码： GitHub - mikel-br
无脑008——yolov5目标检测全流程，训练自己的庞大数据集，半自动标注数据集
weixin_44298961的博客
07-21 5445
使用yolov5进行自己数据集的目标检测，以及使用yolov5自带的detect.py实现数据集的半自动标注
图解YOLO（You Only Look Once）目标检测（v1-v5）
weixin_71288092的博客
04-26 2927
YOLO属于深度学习经典检测方法中的单阶段（one - stage）类型，与两阶段（two - stage，如Faster - rcnn、Mask - Rcnn系列）方法相对。
YOLOv5实现目标识别全流程【超级详细！】
热门推荐
weixin_42377570的博客
01-16 6万+
在深度学习中，目标识别问题是我们所熟知的最经典最重要的问题之一。yolo可以说是目前最火的目标检测算法
利用yolov5完成目标检测详细过程
weixin_50744311的博客
04-06 1万+
文章目录源代码准备数据集使用官方数据集制作自己的数据集划分数据集写自己的配置文件聚类生成先验框修改配置文件训练测试 源代码 我所使用的是yolov5-v6.1版本，下载地址： yolov5-6.1代码 解压完成后，在Anaconda Prompt中进入代码所在文件夹，执行以下代码： pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple 它可以帮助我们安装所需要的依赖，并且不会重复安装 准备数据集 使用官方数
YOLOv5训练目标检测步骤
qq_42744739的博客
04-06 5283
YOLOv5训练目标检测步骤 一、数据的准备 使用精灵标注助手对图像进行标注，注意标签要用英文，导出PASCAL VOC数据格式； 二、数据的规范化 将数据导出的xml文件转成yolo需要的txt文件，转换的程序可以用下面网站的转换程序。 https://github.com/Ryo-Kawanami/xml2yolo 新建两个文件夹train,valid： 每个文件夹内包含： 这两个文件夹，images文夹放图片，lables文件夹放转换后的txt文件。 三、数据配置文件 和train,valid文件
YOLOV5的架构和工作流程
KWAIKUN的博客
10-24 5768
在网络训练中，网络在初始锚框的基础上输出预测框，进而和真实框groundtruth进行比对，计算两者差距，再反向更新，迭代网络参数。2.将特征图输入到head输出端当中，进行自上而下的融合，再进行自下而上的融合，然后会取几个特征层的图片进行检测。生成目标框，模型执行非极大值抑制去除重叠的目标框，保留最可信的目标框，完成目标检测结果的输出 ，采用GIoU_Loss做Bounding box的损失函数。骨干网络和基准网络的区别：骨干网络以提取原始图像的特征，包括多尺度的信息；提取一些通用的特征表示。
基于YOLOv5的旋转框目标检测：从Dota标注到模型训练与测试的完整流程
05-12
内容概要：本文详细介绍了基于YOLOv5的旋转框目标检测的完整流程，涵盖从Dota标注数据集格式转换为YOLOv5旋转标注格式、数据集路径修改、Anchor聚类及其修改、模型训练以及最终的测试与评价。通过这一系列步骤，可以...
基于YOLOv5的旋转框目标检测：从Dota标注到模型训练与测试的完整流程指南
04-28
内容概要：本文详细介绍了一个基于YOLOv5的旋转框目标检测项目，涵盖了从Dota标注数据集格式转换到模型训练与测试的完整流程。首先介绍了如何通过utils/cut2rotation.sh脚本将Dota标注数据集格式转换为YOLOv5的旋转...
【计算机视觉】YOLOv8数据集详解与高效目标检测模型训练：从数据获取到性能优化的全流程指南
最新发布
05-27
内容概要：本文详细介绍了YOLOv8数据集的结构、获取途径...阅读建议：本文内容详尽，涵盖了从数据集准备到模型优化的全流程，建议读者按照章节顺序逐步深入学习，同时结合实际项目进行实践操作，以加深理解和提高技能。
基于YOLOv5的旋转框目标检测：从标注转换到模型训练与测试的完整流程指南,基于YOLOv5的旋转框目标检测：DLOO402标注转换与训练全流程指南,DL00402-基于YOLOv5的旋转框目标检测
02-18
基于YOLOv5的旋转框目标检测：从标注转换到模型训练与测试的完整流程指南,基于YOLOv5的旋转框目标检测：DLOO402标注转换与训练全流程指南,DL00402-基于YOLOv5的旋转框目标检测 dota标注数据集格式转yolov5 rotation...
yolov5 模型流程图详解+注释
12-12
yolov5 模型流程图详解+注释
Yolov5目标检测实战指南：从数据标注到训练
"该教程详细介绍了如何使用yolov5进行目标检测，涵盖了从数据标注、数据训练到模型测试的全过程。提供了数据标注工具Labelimg的使用方法，数据集的结构要求，以及训练和测试阶段的代码配置和修改。此外，还提到了...
【yolov5】首次尝试目标检测利用prompt（完整操作流程）
freezing_00的博客
02-13 1109
目标检测学习
目标检测实战(五): 使用YOLOv5-7.0版本对图像进行目标检测完整版（从自定义数据集到测试验证的完整流程））
源的博客
09-07 8753
目标检测（Object Detection）是计算机视觉领域的一个重要研究方向，其主要任务是从图像或视频中识别并定位出感兴趣的目标对象。目标检测技术在许多实际应用中具有广泛的用途，如自动驾驶、视频监控、医学影像分析等。基于传统机器学习的方法和基于深度学习的方法。基于传统机器学习的方法：这些方法主要依赖于手工设计的特征提取器和分类器。常用的特征提取器包括SIFT、SURF、HOG等，而分类器则可以是支持向量机（SVM）、随机森林（Random Forest）、K-近邻（KNN）等。
yolov5算法-学习过程
weixin_47453139的博客
06-24 7275
这张图是在找工作前，回忆yolo系列的发展历程，进行梳理的图。内容可能有一些不准确的地方，请指出。
YOLOv5-v5.0模块流程图
Zomcxj的博客
08-10 5318
detect.py train.py test.py(v5.x版本为val.py)
yolov5 主要流程
weixin_75205835的博客
12-30 1117
带参数（只列出部分重要参数）：运行例子，在终端实现。带参数：到这里差不多啦，大家可以看一下专栏中的其他yolov5作品，里面有更加详细的区域介绍。专栏指路：yolov5 评价指标_yolov5评价指标-优快云博客yolov5 网络结构_yolov5头部网络-优快云博客yolov5 主要流程_yolov5网络流程-优快云博客。
深度学习目标检测YOLOV5的主要过程梳理和工程部署的具体手段
xiaochuideai的博客
03-07 1295
此篇文章作为制定YOLOV5从数据制作到实现工程部署的标准流程的前置内容，后续会更新更加详细和以具体工程需求为基础的实操流程说明。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值