深入理解 JavaScript DOM 操作

一、DOM 操作分类

(一)元素查找

  1. 根据 ID 值查找:getElementById(),返回符合条件的第一个对象。
        var aa = document.getElementById("aa");console.log(aa);
  1. 根据类名查找:getElementsByClassName(),返回符合条件的对象组成的数组。
        var arr = document.getElementsByClassName("aa");console.log(arr);
  1. 根据元素名称查找:getElementsByTagName(),返回符合条件组成的数组。
        var arr = document.getElementsByTagName("div");console.log(arr);console.log(arr.length);
  1. 根据选择器查找:querySelector()返回符合条件的第一个对象;querySelectorAll()返回所有符合条件的对象组成的数组。
        var obj = document.querySelector(".aa");console.log(obj);var allObjs = document.querySelectorAll(".aa");console.log(allObjs);

(二)关系查找

  1. 找父亲:parentElementparentNode
        var childElement = document.querySelector(".child");var parent = childElement.parentElement;console.log(parent);
  1. 找孩子:childNodeschildren
        var parentElement = document.querySelector(".parent");var childNodes = parentElement.childNodes;console.log(childNodes);var children = parentElement.children;console.log(children);
  1. 第一个孩子:firstChild
        var parentElement = document.querySelector(".parent");var firstChild = parentElement.firstChild;console.log(firstChild);
  1. 最后一个孩子:lastChildlastElementChild
        var parentElement = document.querySelector(".parent");var lastChild = parentElement.lastChild;console.log(lastChild);var lastElementChild = parentElement.lastElementChild;console.log(lastElementChild);
  1. 找上一个元素:previousElementSiblingpreviousSibling
        var currentElement = document.querySelector(".current");var previousElement = currentElement.previousElementSibling;console.log(previousElement);var previousSibling = currentElement.previousSibling;console.log(previousSibling);
  1. 找下一个元素:nextElementSiblingnextSibling
        var currentElement = document.querySelector(".current");var nextElement = currentElement.nextElementSibling;console.log(nextElement);var nextSibling = currentElement.nextSibling;console.log(nextSibling);

(三)元素修改

  1. 修改内容:innerHTML会把里面的内容解析,innerText会把引号内的内容当成文本处理,value可修改input里的值。
        var obj = document.querySelector(".aa");obj.innerHTML = "<h1>帅哥</h1>";obj.innerText = "<h1>帅哥</h1>";var inputElement = document.querySelector("input");inputElement.value = "new value";
  1. 修改属性:原生属性可通过对象。属性 = 值的方式修改,自定义属性可通过setAttribute设置、getAttribute获取。
  1. 修改样式:可以通过对象.style. 属性 = 值、对象.style.cssText=""、修改对象的className属性结合 CSS 来达到修改样式的目的。
        var obj = document.querySelector(".aa");obj.style.background = "red";obj.style.cssText = "background:red; color:yellow";obj.className = "red";

(四)元素添加

  1. 创建元素:createElement
        var newNode = document.createElement("h1");newNode.innerHTML = "新添加的元素";newNode.className = 'cccccc';newNode.style.background = "yellow";
  1. 复制元素:可设置参数为false进行浅复制,只复制外壳,设置为true复制全部。
        var originalElement = document.querySelector(".original");var clonedElement = originalElement.cloneNode(false);var clonedElementFull = originalElement.cloneNode(true);
  1. 添加元素:appendChild添加到子元素最后位置,insertBefore在某个子元素前添加,replaceChild替换掉该元素。
        var container = document.querySelector(".cc");container.appendChild(newNode);var existingElement = document.querySelector(".existing");container.insertBefore(newNode, existingElement);var elementToReplace = document.querySelector(".toReplace");container.replaceChild(newNode, elementToReplace);

(五)元素删除

父级元素调用删除的方法removeChild(要删除的元素)

        var parentElement = document.querySelector(".parent");var childToRemove = document.querySelector(".toRemove");parentElement.removeChild(childToRemove);

二、知识补充与优化建议

(一)性能优化

在进行大量 DOM 操作时,尽量减少频繁的直接操作 DOM,可以先在内存中对数据进行处理,然后一次性更新 DOM,以提高性能。例如,当需要动态添加多个元素时,可以先将这些元素构建成一个字符串或者数组,最后一次性添加到 DOM 中。

        var elementsToAdd = [];for (var i = 0; i < 10; i++) {var newElement = document.createElement("div");newElement.textContent = "Element " + i;elementsToAdd.push(newElement);}var container = document.querySelector(".container");container.innerHTML = "";elementsToAdd.forEach(element => container.appendChild(element));

(二)事件委托

利用事件冒泡的原理,将事件绑定在父元素上,通过判断事件源来处理子元素的事件,这样可以减少事件绑定的数量,提高性能。

        var parent = document.querySelector(".parent");parent.addEventListener("click", function(event) {if (event.target.classList.contains("child")) {console.log("Child element clicked");}});

(三)跨浏览器兼容性

不同浏览器对 DOM 操作的实现可能会有一些差异,在实际开发中需要考虑到兼容性问题,可以使用一些成熟的库或框架来解决兼容性问题。例如,使用 jQuery 可以简化 DOM 操作,并且在不同浏览器中有较好的兼容性。

        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$(document).ready(function() {$("#element").click(function() {console.log("Clicked using jQuery");});});</script>

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

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

相关文章

IntelliJ IDEA 自定义字体大小

常用编程软件自定义字体大全首页 文章目录 前言具体操作1. 打开设置对话框2. 设置编辑器字体3. 设置编译软件整体字体 前言 IntelliJ IDEA 自定义字体大小&#xff0c;统一设置为 JetBrains Mono 具体操作 【File】>【Settings...】>【Editor】>【Font】 统一设置…

C++:list篇

前言: 观看C的list前需要对链表有一些了解&#xff0c;如C语言的链表结构。本片仅介绍list容器中常用的接口函数概念以及使用。 list的概念&#xff1a; 简而言之&#xff0c;C的list是一个双向带哨兵位的链表容器模板 list的构造&#xff1a; 1.list():默认构造 2.li…

spring之异常和测试相关注解

原文地址 ControllerAdvice和ExceptionHandler 通常组合使用&#xff0c;用于处理全局异常&#xff0c;示例代码如下&#xff1a; ControllerAdvice Configuration Slf4j public class GlobalExceptionConfig {private static final Integer GLOBAL_ERROR_CODE 500;Excepti…

认识git和git的基本使用,本地仓库,远程仓库和克隆远程仓库

本地仓库 #安装git https://git-scm.com/download/win #git是什么&#xff1f;有什么用&#xff1f; git相当于一个版本控制系统&#xff0c;版本控制是一种记录一个或若干文件内容变化&#xff0c;以便将来查阅特定版本修订情况的系统。 作用: 记录&#xff08;项目&#…

[Qt5] 使用QtConcurrent::run在异步线程中执行耗时函数

&#x1f4e2;博客主页&#xff1a;https://loewen.blog.csdn.net&#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;本文由 丶布布原创&#xff0c;首发于 CSDN&#xff0c;转载注明出处&#x1f649;&#x1f4e2;现…

Java-树形图工具类TreeUtil

TreeUtil 工具类,包括列表转树形结构、遍历、查找和删除节点等功能。 import java.util.*;public class TreeUtil {/*** 将列表转换为树形结构。** @param target 扁平化的节点列表* @param getId 获取节点ID的函数* @param getParentId 获取节点父ID的函数* @…

物联网(IoT)支持的小型水处理厂实时硬件在环(HIL)仿真

这篇论文的标题是《Real-Time Hardware-In-The-Loop Simulation of IoT-Enabled Mini Water Treatment Plant》&#xff0c;作者是 Mohamad Taib Miskon 等人&#xff0c;发表在 2024 年 IEEE 自动控制与智能系统国际会议&#xff08;I2CACIS&#xff09;上。以下是该论文的主要…

【Agent】Agent Q: Advanced Reasoning and Learning for Autonomous AI Agents

1、问题背景 传统的训练Agent方法是在静态数据集上进行监督预训练&#xff0c;这种方式对于要求Agent能够自主的在动态环境中可进行复杂决策的能力存在不足。例如&#xff0c;要求Agent在web导航等动态设置中执行复杂决策。 现有的方式是用高质量数据进行微调来增强Agent在动…

学习日志29

论文阅读&#xff1a;IBM Q Experience as a versatile experimental testbed for simulating open quantum systems 引言部分&#xff1a; 引言部分首先介绍了开放量子系统的理论研究的重要性&#xff0c;这些理论描述了量子系统与其环境相互作用的动力学。这种理论对于理解量…

C++复习day01

这篇博客主要复习C语言的数组和指针 1.指针数组和数组指针 问&#xff1a;指针数组和数组指针&#xff0c;哪一个是指针&#xff0c;哪一个是数组&#xff1f; 我们来类比一下&#xff0c;整型数组是存放整型的数组&#xff0c;那么指针数组就是一个存放指针的数组&#xff0…

经验笔记:进程、线程与协程的理解与应用

经验笔记&#xff1a;进程、线程与协程的理解与应用 1. 引言 在软件开发中&#xff0c;特别是在涉及并发编程的场景下&#xff0c;进程、线程和协程是非常重要的概念。理解它们各自的定义、特点以及彼此之间的联系对于有效地设计和实现高效的应用程序至关重要。 2. 定义与特…

vector 常见函数

目录 一.vector 构造函数 二 . Iterators 迭代器&#xff08;random access iterator&#xff09; 三.Capacity: 空间 3.1 resize 3.2 reserve 四.Element access: 元素访问 方式 4.1 operator[] 类似于数组的 [] 4.2 front 和back 五.Modifiers: 六.vector 的 二…

【工业AI】寻优算法的思考

遗传算法GA 本质上来讲&#xff0c;就是找随机点x&#xff0c;通过公式或者回归模型构成的映射函数获得y。 区别于其他搜索寻优算法之处在于&#xff1a;遗传算法的一轮一轮迭代中&#xff0c;新的随机点x的生成&#xff0c;是靠交叉变异01而来的。 初始的DNA_size不管设置为多…

vue3+ts文件流导出xlsx表格需要token

封装方法post请求 import { ElLoading } from element-plus; import axios from axios; export const exportFilePost (params: any) > {const loadingInstance ElLoading.service({background: rgba(255, 255, 255, 0),});axios.post(params.url, params.data, {headers…

redis内存数据库的专业术语雪崩、击穿、穿透的名词解释

redis作为一个内存数据库&#xff0c;其作用主要体现在可以提供高速的访问处理。 redis在内存层面工作&#xff0c;一个字&#xff0c;快。 这也是redis区别于其他类型数据库的一个主要特点。 与之配合使用的是后端持久化存储数据库&#xff0c;比如结构化的数据库mysql mysql的…

18、Gemini-Pentest-v2

难度 中 目标 root权限 一个flag 靶机启动环境为VMware kali 192.168.152.56 靶机 192.168.152.63 信息收集 web测试 访问80端口 上面介绍了一下这个系统是一个内部系统&#xff0c;让员工查看他们的个人资料还可以导出为PDF 页面还有一个链接是UserList可以访问但是页面什…

ES数据写入过程

1. 写入请求 当一个写入请求&#xff08;如 Index、Update 或 Delete 请求&#xff09;通过REST API发送到Elasticsearch时&#xff0c;通常包含一个文档的内容&#xff0c;以及该文档的索引和ID。 2. 请求路由 协调节点&#xff1a;首先&#xff0c;请求会到达一个协调节点…

微服务日常总结

1.当我们在开发中&#xff0c;需要连接多个库时&#xff0c;可以在yml中进行配置。 当在查询的时候&#xff0c;跨库时&#xff0c;需要通过DS 注解来指定&#xff0c;需要yml配置需要保持一致。 2. 当我们想把数据存入到clob类型中&#xff0c;需要再字段 的占位符后面加上j…

Python 用pandas连接Postgresql库

pandas确实蛮强的&#xff0c;记录使用的代码 from sqlalchemy import create_engine import pandas as pd import os# 从环境变量中读取数据库连接信息 user os.getenv(DB_USER, xxx) # 数据库用户名 password os.getenv(DB_PASSWORD, xxx) # 数据库密码…

HarmonyOS(53) 获取设备标志符UUID和ODID

UUID和ODID UUID和ODID简介UUID生成规则ODID生成规则相关代码参考资料 UUID和ODID简介 在APP开发过程中&#xff0c;经常需要一些唯一标识符作为留痕使用&#xff0c;HaymonyOS也提供了UUID和ODID来满足类似的工作。 UUID:应用卸载重新安装时会重新生成UUIDODID&#xff1a;手…