js DOM模型常用方法复盘梳理

        大家好,我是资深前端之路,今天主要是在对常用的js基础知识进行复盘,回顾下最基础的知识,不断打地基。今天主要回顾的知识是以下几个内容:

1、什么是DOM

        定义:文档对象模型,操作html标签的能力,其中document是Dom的内置的对象,所以又称为dom对象。

2、获取元素

        id获取:document.getElementById;当获取到是返回值是一个对象;未获取到返回null。

        class获取:document.getElementsByClassName。返回值是一个空的对象,以及长度。注意改获取方式返回的是多个对象。

        选择器获取:document.querySelector。返回值是一个对象,如果不存在,返回null。 

        标签获取:document.getElementsByTagName 。返回值是一个空的对象,以及长度。注意改获取方式返回的是多个对象。

3、操作元素

        操作属性

        setAttribute:设置元素的属性值。setAttribute(属性名,属性值)。如果该属性不存在,会新增一个同名属性。

        removeAttribute:移除属性。removeAttribute(属性名)。

        dataset:代表对象上的data-属性。主要的特点是直观,方便。

        delete:来删除dataset属性,如 delete box.dataset.id。

        操作文本

        innerHTML:获取对象的子级html内容,在赋值值也可以设置到标签内容。

        innerText:获取对象的子级的所有文本内容,不包含html标签。注意赋值时,也只能赋值到文本内容,不能修改标签。

        value:只有标签标签内部有value。同时可以读取和赋值。

        操作样式

        style:结尾为.号时,只能获取行内样式,css中的样式获取不到。其它的样式可以用[]中括号加属性名,再或者使用驼峰写法来获取。如box.style.backgroundColor。

        getComputedStyle:获取指定对象节点所有的样式。getComputedStyle("#id"),注意使用时有版本兼容性问题。尽量少用。

        操作元素类名

        主要是用来批量的修改类名,修改整体的样式。

        className:设置类名。没有就添加一个类名,如果存在,就修改原来的类名。

        classList:设置类名。如果有相同的类名,会自动的去重。

        calssList.remove:移除类名,注意在使用时,需要一个个进行移除。

        toggle:判断样式是否存在,如果存在就切换,不如不存在就添加。

4、获取节点        

        dom节点一共分为三大类:元素节点、属性节点、文本节点。

        元素节点:标签对应的元素的html就是元素节点。

        属性节点:属性对应的节点。注意没有所谓的父子关系。

        文本节点:文本内容对应的的内容就是文本节点。通过innerText获取到的节点,包含换行和空格。

        document是根节点,html是根元素节点。

        注意:注释的内容也是一个节点,定义为注释节点,在文本中不显示出来。

        获取的方法:

        children:获取节点内所有的文本节点。

        childNodes:获取节点内的所有子元素节点。包含文本节点、元素节点、注释节点。

        firstChild:获取节点内第一个子文本节点。

        firstElementChild:获取节点内第一个子元素的元素节点。

        lastChild:获取节点内最后一个子文本节点。

        lastElementChild:获取节点内最后一个子元素节点。

        previousSibling:获取上一个兄弟文本节点。

        previousElementSibling:获取上一个兄弟元素节点。

        nextSibling:获取下一个兄弟文本节点。

        nextElementSibling:获取下一个兄弟元素节点。

        parentNode和parentElement:都是一样的获取的都是元素节点。

5、操作节点

        操作无非就是:增删改查(CRUD)。

        createElement:创建一个元素节点,createElement(标签名称)。

        appendChild:在节点内末尾追加一个节点。

        insertBefore:在节点前追加一个节点。insertBefore(插入的内容,插入的位置前面)。

        removeChild:移除一个节点的子元素节点,removeChild(删除的节点)。

        remove:删除自己,不仅仅删除子元素节点,也删除节点本身。

        replaceChild:替换子元素节点。

        cloneNode:克隆节点。cloneNode(是否克隆后代),默认为false,当传参数true时,就会克隆子元素文本。

 6、节点的属性

        dom节点分为三大类,各一个类都有个字的属性值,这个属性值可以看下表。

节点类型nodeTypenodeNamenodeValue
元素节点1大写标签名null
属性节点2属性名属性值
文本节点3#text文本内容

   

7、归纳总结    

        今天主要回顾了什么是dom节点,dom节点的类型,如何修改不同类型的dom节点以及如何删除dom节点。整个逻辑分为dom是什么、dom如何使用运用两部分。以后还会整理更多关于js的基础知识,喜欢的朋友帮忙点赞+关注哟!  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/460.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

什么是XXE攻击?如何进行防护

安全性很难做到正确,即使在当今具有安全意识的世界中,也存在一些严重的漏洞,例如 XML 外部实体 (XXE),它们被忽视并最终成为破坏的原因。 XML 外部实体 (XXE) 攻击是一种计算机安全漏洞,通常存在于 Web 应用程序中&…

单字符 和 宽字符

#define PI 3.14 //产生新类型 typedef 3.14 PI单字符,一个字节存储,宽字符,二个字节存储。sizeof(L"abc")8 size("abc")4typedef unsigned short wchar_t; chartypedef wchar_t WCHAR; typedef char CHAR;WCHAR* p …

SpringBoot 项目Docker部署三种方式

一种:直接拷贝jar到服务器部署 1.增加docker配置文件 新建Dockerfile文件,负责Docker的配置 FROM openjdk:21#ENV timezone RUN /bin/cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime \&& echo Asia/Shanghai >/etc/timezone# WORKD…

项目活动图

关键路径: 从开始到结束的所有路径中,时间最长的一条为关键路径。(特点:在关键路径上,所有任务的松弛时间都为0); 松弛时间: 最晚开始时间 – 最早开始时间; 所有的路…

解释Java中的容器化技术,如Docker和Kubernetes

容器化技术是近年来软件开发和运维领域的一项重大创新,它允许开发者将应用程序及其依赖项打包到一个轻量级、可移植的容器中,从而实现快速、一致和高效的部署。在Java开发中,Docker和Kubernetes是两种非常流行的容器化技术。 ### Docker Do…

2W 3KVDC 隔离单、双输出 DC/DC 电源模块——TPH 系列

TPH系列是一款2W,单、双输出隔离电源模块,特别适合板上只有一种电压而要求有正负电源的场合,工业级温度范围–40℃到105℃,在此温度范围内都可以稳定输出2W,并且效率非常高,高达86%,温升非常低&…

JavaSE进阶篇-面向对象程序设计

一、面向对象和面向过程的关系 1)面向过程:强调的是功能行为,以函数为最小单位,考虑怎么做; 2)面向对象:强调了具备功能的对象,以类/对象为最小单位,考虑谁来做。 总结…

虚拟机的网络模式

仅主机 仅用来与主机交互,使用的是VMnet1网卡,该模式无法链接互联网,只能与物理机通讯,如果ip不与物理机在同一个网段,那么也无法与物理机通讯 桥接模式 该模式下的虚拟机会链接VMnet0网卡,该网卡会直接桥接…

Python进阶编程 --- 3.闭包、装饰器、设计模式、多线程、网络编程、正则表达式、递归

文章目录 第三章:3.1 闭包3.2 装饰器语法糖写法 3.3 设计模式3.3.1 单例模式3.3.2 工厂模式 3.4 多线程3.4.1 进程、线程和并行执行3.4.2 多线程编程 3.5 网络编程3.5.1 Socket3.5.2 服务端开发3.5.3 客户端开发 3.6 正则表达式3.6.1 基础匹配3.6.2 元字符匹配单字符…

fopen/fwrite/fread/open/write/read的区别

fopen和Open,read和fread,write和fwrite有什么区别,很多人都会弄混了,而这经常会带来一些问题。所以在这里理清他们的关系是很有必要的。 open/read/write是Linux提供的系统调用,用户态的程序只能通过这些接口来访问文件系统层。而fopen/fread/fwrite是C库提供的文件读写接…

IT如何与业务双向奔赴,高效并驱共“盈”企业发展

随着经济和技术的飞速发展,在当前数字化时代中,如何进行有效的数字化转型、运用新技术,特别是让AI技术融入企业的具体业务场景、快速实现应用场景的落地、确保企业不落后于时代发展,是每一位CIO都会面临的一项挑战。 IT部门在企业…

springboot 载入自定义的yml文件转DTO

改进方法,直接spring注入 import cn.hutool.json.JSONUtil; import org.springframework.beans.factory.config.YamlMapFactoryBean; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import …

掌握Java异常处理:编写更健壮的应用程序

Java 异常处理机制是 Java 编程语言的核心特性之一,它为开发者提供了管理和处理运行时错误的有效方式。本文将深入探讨 Java 异常的类型、处理方法以及最佳实践,帮助你编写更健壮、可维护的 Java 应用程序。 1. 异常概念 异常是程序执行过程中出现的非正…

【强化学习的数学原理-赵世钰】课程笔记(十)Actor-Critic 方法

目录 一.最简单的 actor-critic(QAC):The simplest actor-critic (QAC) 二.Advantage actor-critic (A2C) 三.Off-policy actor-critic 方法 四. Deterministic actor critic(DPG) Actor-Critic 方法把基于 value 的方法,特别…

C语言中的控制语句(分支语句 if、switch、三目运算符)

程序执行的三大流程 顺序 : 从上向下, 顺序执行代码分支 : 根据条件判断, 决定执行代码的分支循环 : 让特定代码重复的执行 分支语句 条件语句用来根据不同的条件来执行不同的语句,C语言中常用的条件语句包括if语句和switch语句。 if 语句…

网络靶场实战-恶意程序自启动

简介 当恶意程序入侵目标为个人计算机时,相较于服务器,个人计算机对关机或重启操作更加频繁,关机时计算机所有的进程都会被结束,因此恶意程序需要配置自启动来使自己在每次开机时能够被运行。 本篇介绍一个恶意样本(b8090d7d12d…

Docker向harbor上传大镜像的413报错

文章目录 一、背景二、问题三、处理1.调整harbor相关大小2.正向代理的nginx参数 一、背景 最近遇到了个需求,某厂商的系统模块以容器模式部署在我们的内网环境中,厂商为我们提供了一个公网仓库,需要我们自己下载相关镜像。因此,获…

快速找到销售爆款!淘宝商品关键词搜索API接口为你开启财富之门

在如今的电商时代,淘宝作为中国最大的网络购物平台,吸引了数以亿计的用户。对于卖家而言,如何快速找到热销商品,成为其成功的关键。淘宝商品关键词搜索API接口就是为了满足这一需求而诞生的工具,联讯数据为卖家提供了全…

C# 动态加载dll

方式1 using System; using System.Reflection;class Program {static void Main(){string dllPath "path/to/your/library.dll"; // 替换为你的DLL文件路径Assembly myAssembly Assembly.LoadFile(dllPath);Type myType myAssembly.GetType("YourNamespace…

番外篇 | YOLOv8改进之在C2f中引入即插即用RepViTBlock模块 | CVPR2024清华RepViT

前言:Hello大家好,我是小哥谈。YOLOv8是一种基于深度学习的实时物体检测算法,其通过将物体检测任务转化为目标框回归问题,并使用卷积神经网络实现高效的特征提取和目标分类。然而,YOLOv8在处理一些复杂场景和小目标时可能存在一定的性能限制。为了克服YOLOv8的局限性,清华…