百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

一次性搞定JS的DOM操作 js domcontentloaded

liuian 2024-12-30 05:16 42 浏览

一.什么是DOM

我们知道，无论是现在的开发框架（底层还是操作DOM）还是传统的开发都离不开DOM的操作，所以了解和学习DOM是必须的，也是成为一个全面的前端开发的必备知识和内容，那接下来我们就来看下什么是DOM，DOM的全称文档对象模型，DOM的本质就是让我们通过JS来对页面的元素进行操作的一套浏览器提供的API，它的实现方式是将页面所有的内容表示为可以修改的对象，下面就是我们比较常见的几个元素在DOM中的对应关系：

  1. 比如document.documentElment对应的是html元素；
  2. 比如document.body对应的是body元素；
  3. 比如document.head对应的是head元素；
js复制代码var bodyEl = document.body
var htmlEl = document.documentElement
var headEl = document.head
console.log(bodyEl, htmlEl, headEl);

二.认识DOM Tree

既然认识了DOM那么就很有必要了解下一个概念DOM树，一个页面不只有html head body还有很多子元素，在html结构中最终会形成一个树结构，在抽象成DOM对象的时候，它会形成一个树结构，我们称之为DOM Tree下图就是一个普通的DOM Tree首先这个树的根部就是DOCUMENT然后其次是HTML节点,之后就是其他元素节点和元素，这样就形成了一棵树的形状，这样就形成了一棵DOM树。

DOM的学习顺序：DOM中有很多的API，在学习DOM的时候建议通过一下顺序学习。

  1. DOM元素之间的关系。
  2. 获取DOM元素。
  3. DOM的节点type tag content。
  4. DOM节点的attributes properies等等。
  5. DOM节点的创建，插入，克隆，删除。
  6. DOM节点的样式，类。
  7. DOM元素/window的大小，滚动，坐标。

三.DOM的整体架构

既然我们已经理解了DOM的本质是什么样的东西，那么我们来从DOM的整体架构上来了解DOM，DOM相当于是JavaScript和HTML，CSS之间的桥梁，通过浏览器提供给我们的API，我们可以对元素及其其中的内容做任何事情，DOM之间是有继承关系的，他们的继承关系如下。

document对象：Document节点表示整个载入的网页，它的实例是全局的document对象：

  1. 对DOM的所有操作都是从document对象开始的。
  2. 它是DOM的入口点，可以从document开始去访问任何节点元素。

对于最顶层的html head body元素，我们可以直接在document对象中获取到：

  1. html元素：=document.documentElement
  2. body元素：=document.body
  3. head元素：=document.head
  4. 文档声明：<!DOCTYPE html>=document.doctyp

四.节点，元素导航

当我们获取一个节点后，可以通过这个节点获取其他元素的节点，我们称之为节点之间的导航，节点的内容包含的很多，注释也是节点，但是我们需要理解元素和节点的区别，元素仅仅包含HTML元素。

  1. 父节点：parentNode
  2. 前兄弟节点：previousSibling
  3. 后兄弟节点：nextSibling
  4. 子节点：childNodes
  5. 第一个子节点：fristChild
  6. 最后一个子节点：lastChild

当我们获取了一个元素，我们就可以通过这个元素获取其他的元素，这就是元素之间的导航。

  1. 父元素：parentElement
  2. 前兄弟节点：previousElementSibling
  3. 后兄弟节点：nextElementSibling
  4. 子节点：children
  5. 第一个子节点：firstElementChild
  6. 第二个子节点：lastElementChild

五.获取元素的方法

当元素彼此相邻的时候，DOM导航属性非常有用，但是在实际开发中，我们希望可以任意的获取到某一个元素，DOM为我们提供了获取元素的方法：

在开发中我们最常用的是querySelector和querySelectorAll两个获取元素的方法,getElementById一般用来在一些低版本浏览器进行一些兼容。

六.Node节点的属性

节点的属性-nodeType：目前我们已经可以获取节点了，接下来我们看一下节点中有哪些常见的属性，以下是节点的常用属性：

节点的属性-nodeName，tagName

  1. nodeName:获取节点的名字，是为任意的Node定义的；
  2. tagName:获取元素的标签名词，属性仅适用于Element节点；

节点属性-innerHTML，textContent

  1. innerHTML属性，将元素中的HTML获取为字符串的形式，设置元素中的内容。
  2. outerHTML属性，包含元素的完整HTML，innerHTML加上元素本身。
  3. textContent属性，仅仅获取元素的文本内容。

innerHTML和textContent的区别：

  1. 使用innerHTML，我们将其作为HTML插入，带有所有HTML标签
  2. 使用textContent，我们将其作为文本插入，所有符号均按字面意义处理。

节点的属性-nodeValue：用于获取非元素节点的文本内容。

元素节点的其他属性：

  1. hidden属性：也是一个全局属性，可以用于设置元素隐藏
  2. value属性：input select textarea的value
  3. href属性：<a href="...">的href
  4. id属性：所有的元素的id特性(attribute)的值

七.元素的特性attribute

我们知道一个元素除了有开始标签，结束标签，内容以外还有很多属性。

浏览器在进行解析HTML元素的时候，会将对应的attribute也创建出来放在对应的元素上面。

  1. 标准的attribute：某些attribute属性是标准的，比如id、class、href、type、value等；
  2. 非标准的attribute：某些attribute属性是自定义的，比如abc、age、height等；

对所有的attribute都支持的操作。

  1. elem.hasAttribute(name) — 检查特性是否存在。
  2. elem.getAttribute(name) — 获取这个特性值。
  3. elem.setAttribute(name, value) — 设置这个特性值。
  4. elem.removeAttribute(name) — 移除这个特性。
  5. attributes：attr对象的集合，具有name、value属性；

attribute具有以下属性：

  1. 它们的名字是大小写不敏感的（id 与 ID 相同）。
  2. 它们的值总是字符串类型的。

八.元素的属性property

对于标准的attribute，会在DOM对象上创建与其对应的property属性（对象中的属性叫做property）：

在大多数情况下，它们是相互作用的

  1. 改变property，通过attribute获取的值，会随着改变；
  2. 通过attribute操作修改，property的值会随着改变；
  3. 但是input的value修改只能通过attribute的方法；
  4. 除非特别情况，大多数情况下，设置、获取attribute，推荐使用property的方式，这是因为它默认情况下是有类型的；

HTML5的data-*自定义属性，那么它们也是可以在dataset属性中获取到的：

九.元素的class和style

有时候我们会通过JavaScript来动态修改样式，这个时候我们有两个选择：

  1. 选择一：在CSS中编写好对应的样式，动态的添加class；
  2. 选择二：动态的修改style属性；

开发中如何选择呢？

  1. 在大多数情况下，如果可以动态修改class完成某个功能，更推荐使用动态class；
  2. 如果对于某些情况，无法通过动态修改class（比如精准修改某个css属性的值），那么就可以修改style属性；

元素的className和classList：元素的class attribute，对应的property并非叫class，而是className：

  1. 这是因为JavaScript早期是不允许使用class这种关键字来作为对象的属性，所以DOM规范使用了className；
  2. 虽然现在JavaScript已经没有这样的限制，但是并不推荐，并且依然在使用className这个名称；
  3. 如果我们需要添加或者移除单个的class，那么可以使用classList属性。

elem.classList 是一个特殊的对象：

  1. elem.classList.add (class) ：添加一个类
  2. elem.classList.remove(class)：添加/移除类。
  3. elem.classList.toggle(class) ：如果类不存在就添加类，存在就移除它。
  4. elem.classList.contains(class)：检查给定类，返回 true/false。
  5. classList是可迭代对象，可以通过for of进行遍历。

元素的style属性：如果需要单独修改某一个CSS属性，那么可以通过style来操作：

  1. 对于多词（multi-word）属性，使用驼峰式 camelCase
  1. 多个样式的写法，我们需要使用cssText属性：

元素style的读取 - getComputedStyle，如果我们需要读取样式：

  1. 对于内联样式，是可以通过style.*的方式读取到的;
  2. 对于style、css文件中的样式，是读取不到的；

这个时候，我们可以通过getComputedStyle的全局函数来实现：

十.元素的常见操作

创建元素：我们进行元素的创建基本分为两个步骤

  1. 创建一个元素。
  2. 动态插入某个元素到DOM的某个位置。

插入元素：插入元素的方式如下

  1. node.append(...nodes or strings) —— 在 node 末尾 插入节点或字符串，
  2. node.prepend(...nodes or strings) —— 在 node 开头 插入节点或字符串，
  3. node.before(...nodes or strings) —— 在 node 前面 插入节点或字符串，
  4. node.after(...nodes or strings) —— 在 node 后面 插入节点或字符串，
  5. node.replaceWith(...nodes or strings) —— 将 node 替换为给定的节点或字符串。

移除和克隆元素：

  1. 移除元素我们可以调用元素本身的remove方法：
  1. 如果我们想要复制一个现有的元素，可以通过cloneNode方法，可以传入一个Boolean类型的值，来决定是否是深度克隆，深度克隆会克隆对应元素的子元素，否则不会；

旧的元素操作方法：很多时候我们也会看到很多旧的操作方法

  1. parentElem.appendChild(node)：在parentElem的父元素最后位置添加一个子元素
  2. parentElem.insertBefore(node, nextSibling)：在parentElem的nextSibling前面插入一个子元素；
  3. parentElem.replaceChild(node, oldChild)：在parentElem中，新元素替换之前的oldChild元素；
  4. parentElem.removeChild(node)：在parentElem中，移除某一个元素；

十一.元素的大小和滚动

十二.window的大小和滚动

十三.总结

DOM相关的内容到此就结束了，DOM的API有很多，但是其实我们并不需要全部记住，我们知道DOM在做什么事情就可以了，其实DOM就是一个沟通页面于JS的桥梁，我们使用DOM的基本思路就是，拿到对应元素对其进行修改，这个修改就是对元素的增删改查四种操作，其实很简单，当我们从更高的层次了解了DOM当我们遇到不懂的API或者需求的时候相应的查询就好~



相关推荐

MySQL慢查询优化:从explain到索引，DBA手把手教你提升10倍性能

数据库性能是应用系统的生命线，而慢查询就像隐藏在系统中的定时炸弹。某电商平台曾因一条未优化的SQL导致订单系统响应时间从200ms飙升至8秒，最终引发用户投诉和订单流失。今天我们就来系统学习MySQL...

一文读懂SQL五大操作类别(DDL/DML/DQL/DCL/TCL)的基础语法

在SQL中，DDL、DML、DQL、DCL、TCL是按操作类型划分的五大核心语言类别，缩写及简介如下：DDL（DataDefinitionLanguage，数据定义语言）：用于定义和管理数据库结构...

闲来无事，学学Mysql增、删，改，查

Mysql增、删，改，查1“增”——添加数据1.1为表中所有字段添加数据1.1.1INSERT语句中指定所有字段名语法：INSERTINTO表名（字段名1，字段名2，…）VALUES（值1...

数据库:MySQL 高性能优化规范建议

数据库命令规范所有数据库对象名称必须使用小写字母并用下划线分割所有数据库对象名称禁止使用MySQL保留关键字（如果表名中包含关键字查询时，需要将其用单引号括起来）数据库对象的命名要能做到见名识意，...

下载工具合集_下载工具手机版

迅雷，在国内的下载地位还是很难撼动的，所需要用到的地方还挺多。缺点就是不开会员，软件会限速。EagleGet，全能下载管理器，支持HTTP(S)FTPMMSRTSP协议，也可以使用浏览器扩展检测...

mediamtx v1.15.2 更新详解:功能优化与问题修复

mediamtxv1.15.2已于2025年10月14日发布，本次更新在功能、性能优化以及问题修复方面带来了多项改进，同时也更新了部分依赖库并提升了安全性。以下为本次更新的详细内容：...

声学成像仪:泄露监测 “雷达” 方案开启精准防控

声学成像仪背景将声像图与阵列上配装的摄像实所拍的视频图像以透明的方式叠合在一起，就形成了可直观分析被测物产生状态。这种利用声学、电子学和信息处理等技术，变换成人眼可见的图像的技术可以帮助人们直观地认识...

最稳存储方案:两种方法将摄像头接入威联通Qu405，录像不再丢失

今年我家至少被4位邻居敲门，就是为了查监控！！！原因是小区内部监控很早就停止维护了，半夜老有小黄毛掰车门偷东西，还有闲的没事划车的，车主损失不小，我家很早就配备监控了，人来亮灯有一定威慑力，不过监控设...

离岗检测算法_离岗检查内容

一、研发背景如今社会许多岗位是严禁随意脱离岗位的，如塔台、保安室、监狱狱警监控室等等，因为此类行为可能会引起重大事故，而此类岗位监督管理又有一定困难，因此促生了智能视频识别系统的出现。二、产品概述及工...

消防安全通道占用检测报警系统_消防安全通道占用检测报警系统的作用

一、产品概述科缔欧消防安全通道占用检测报警系统，是创新行业智能监督管理方式、完善监管部门动态监控及预警预报体系的信息化手段，是实现平台远程监控由“人为监控”向“智能监控”转变的必要手段。产品致力于设...

外出住酒店、民宿如何使用手机检测隐藏的监控摄像头

最近，一个家庭在他们的民宿收到了一个大惊喜：客厅里有一个伪装成烟雾探测器的隐藏摄像头，监视着他们的一举一动。隐藏摄像头的存在如果您住在酒店或民宿，隐藏摄像头不应再是您的担忧。对于民宿，房东应报告所有可...

基于Tilera众核平台的流媒体流量发生系统的设计

曾帅，高宗彬，赵国锋（重庆邮电大学通信与信息工程学院，重庆400065）摘要：设计了一种基于Tilera众核平台高强度的流媒体流量发生系统架构，其主要包括：系统界面管理模块、服务承载模块和流媒体...

使用ffmpeg将rtsp流转流实现h5端播放

1.主要实现rtsp转tcp协议视频流播放ffmpeg下载安装（公认业界视频处理大佬）a、官网地址：www.ffmpeg.org/b、gitHub：github.com/FFmpeg/FFmp…c、推...

将摄像头视频流从Rtsp协议转为websocket协议

写在前面很多通过摄像头拿到的视频流格式都是Rtsp协议的，比如：海康威视摄像头。在现代的浏览器中，已经不支持直接播放Rtsp视频流，而且，海康威视提供的本身的webSdk3.3.0视频插件有很多...

华芸科技推出安全监控中心2.1 Beta测试版

全球独家支持hdmi在线实时监看摄像机画面，具单一、循环或同时监看四频道视频影像，可透过华芸专用红外线遥控器、airemote或是键盘鼠标进行操作，提供摄像机频道增购服务，满足用户弹性扩增频道需...

一周热门
最近发表
标签列表