js中Dom操作

article/2025/10/19 14:27:10

简单的Dom获取

什么是Dom操作?

1.DOM使一个"使程序"和"脚本"有能力的"动态地访问"和"更新文档内容结构",以及"样式"的平台和语言中立的接口.
2.在HTML和JavaScript的学习中,DOM操作可谓时重中之重.

Dom树

//html dom树
如图:
在这里插入图片描述

DOM节点的分类:
DOM节点分为三大类:

1.元素(标签)节点,
2.属性节点,
3.文本节点;

查找dom节点:

1.通过id获取

<div id="box"></div>
<script>let box = document.getElementById("box");
</script>

注意:getElementById()括号中的不需要在前面加“#”,因为方法就决定了括号中的值是一个元素的id值。该方法返回一个DOM对象。
在这里插入图片描述

2. 通过class获取

<div class="box"></div>
<div class="box"></div>
<script>let boxCollection= document.getElementsByClassName("box");let box1 = boxList[0];let box2 = boxList[1];
</script>

注意:getElementsByClassName()括号中的不需要在前面加 “.”
,因为方法就决定了括号中的值是一个元素的class值。该方法返回一个集合。不能直接给集合绑定事件,需要获取到集合中的某一个元素,然后再为元素绑定事件。
在这里插入图片描述

3. 通过标签名获取

<div id="box"><p>段落1</p><p>段落2</p><p>段落3</p><p>段落4</p><p>段落5</p><p>段落6</p>
</div>
<script>let pCollection= document.getElementsByTagName("p");
</script>
注意: 该方法返回的也是一个集合。

在这里插入图片描述
4. 通过name属性获取

<div id="box"><input type="text" name="user" />
</div>
<script>let userInput= document.getElementsByName("user");
</script>
返回值如下:
注意:只有含有name属性的元素(表单元素)才能通过name属性获取

5. 通过querySelector获取

<div id="box"></div>
<script>let box= document.querySelector("#box");
</script>
注意:querySelector()方法括号中的值是元素的选择器,所以前面加了”#”符号,使用的是id选择器。此方法直接返回DOM对象本身。

6. 通过querySelectorAll获取

<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
<div class="box">box5</div>
<script>let box1= document.querySelector(".box");let boxes= document.querySelectorAll(".box");
</script>
结果如下图:
注意:querySelector()和querySelectorAll()方法括号中的取值都是选择器,但从图中我们可以看出,两个方法是有区别的。

总结:

1.所有获取DOM对象的方法中,只有getElementById()和querySelector()这两个方法直接返回的DOM对象本身,可直接为其绑定事件。

2.getElementXXX类型的方法,除了通过Id获取元素,其他都返回一个集合,如果需要取到具体的DOM元素,需要加索引 = ‘下标’,如:document.getElementsByClassName(“box”)[0]=>获取class为box的所有元素中的第一个DOM元素。

3.querySelector()与querySelectorAll()两者的联系与区别: 联系: 两者括号中的取值都是选择器 区别: 当有多个class相同的元素时,使用querySelector()方法只能获取到第一个class为box的元素,而querySelectorAll()获取到了所有class为box的元素集合。

获取元素的内容

语法:元素.innerHTML;
说明:获取到的内容都是string 类型;
在这里插入图片描述

修改设置元素的内容

语法:元素.innerHTML = ‘内容’
‘说明:会覆盖’;
在这里插入图片描述

获取元素的行内样式

语法:元素.style.css属性;
注意:复合属性需要转驼峰;
在这里插入图片描述
在这里插入图片描述

设置元素的行内样式

语法: 元素.style.css属性 = 属性值;
在这里插入图片描述

设置元素的类名

语法:
元素.className = '修改之后的名字';案例:
<div id="box"></div><script>var a = document.getElementById('box');var b = a.className = 'top'console.log(b);//top</script>

在这里插入图片描述


http://chatgpt.dhexx.cn/article/NVTGlTbF.shtml

相关文章

TypeScript Dom操作

文章目录 介绍获取元素类型断言获取多个DOM元素操作文本内容操作样式操作事件 介绍 DOM 是浏览器提供的&#xff08;浏览器特有)&#xff0c;专门用来操作网页内容的一些JS对象(API) 通过DOM操作&#xff0c;可以让Js/Ts控制页面&#xff08;(HTML)内容&#xff0c;让页面“动…

JavaScript DOM操作

文章目录 JavaScript DOM操作DOM操作元素DOM查询修改元素内容/属性获取元素节点 DOM的增删改 DOM操作CSS内联样式获得当前正在显示的样式 DOM的事件操作事件对象事件对象的属性 事件的冒泡和事件的委托事件冒泡事件委派事件的传播事件的绑定 JavaScript DOM操作 DOM操作元素 …

DOM的操作

一、DOM的操作 1、复制节点 cloneNode(deep) 参数deep是boolean类型&#xff0c;true/false true&#xff1a;表示深度复制&#xff08;将节点及其子节点都进行复制&#xff09; --- 深拷贝 false&#xff1a;表示浅复制&#xff08;只复制节点而不复制子节点&#xff09; ----…

DOM(操作)

DOM 1 作用和分类 作用&#xff1a;使用 JS 去操作 html 和浏览器 分类&#xff1a;DOM(文档对象模型)、BOM(浏览 器对象模型) DOM 是用来呈现以及与任意HTML 或 XML文档交互的API简单说&#xff1a;DOM 是浏览器提供的一套专门用来 操作网页内容 的功能DOM的作用&am…

13前端学习之WebAPI(三):节点操作、事件高级、DOM事件流、事件委托冒泡

文章目录 一、节点操作:1. 删除节点:1.2. 案例&#xff1a;删除留言 2. 赋值(克隆)节点:3. 案例:动态生成表格:3.1 案例分析:3.2 实现: 4. 创建元素的三种方式:4.1 区别:4.2 innerTHML和createElement效率对比: 5. DOM的核心总结:5.1 创建:5.2 增加:5.3 删除:5.4 改:5.5 查&…

DOM操作

今天开始进入JS的核心操作 DOM&#xff0c;DOM操作其实很简单&#xff0c;就是增删改查这几个操作&#xff0c;先看一下思维导图&#xff1a; 1.增加操作 1.新建&#xff1a; fn creatElement(标签名) 创建元素节点 fn setAttribute&#xff08;name,value&#xff09;直接设置…

JS中DOM元素的操作

一、DOM元素的获取 1&#xff09;document.getElementsByClassName ( “class”) 返回集 htmlcollection ,用法和数组一致 说明: class为DOM元素上class属性的值 2&#xff09;document.getElementById( “id” ) 功能:返回对拥有指定ID的第一个对象的引用 返回值: DOM对象 说明…

java锁结构之无锁偏向锁轻量级锁重量级锁

一、对象的本质&#xff08;锁在对象中的体现&#xff09; 1.1、对象的结构 对象由多部分构成的&#xff0c;对象头、属性字段、补齐字段等。补齐字段是指如果对象总大小不是4字节的整数倍&#xff0c;会填充上一段内存地址是之成为4的整数倍。 其中&#xff0c;对象头在对象…

简单理解重量级锁、轻量级锁、偏向锁

全文使用synchronized来说明。 synchronized给对象上锁&#xff0c;先上偏向锁&#xff0c;在上轻量级锁&#xff0c;最后上重量级锁。上什么锁&#xff0c;是jvm根据竞争程度自行变换的。 重量级锁 计算机操作系统本有Monitor对象&#xff0c;称为管程。在java里面看不到此对…

synchronized锁升级之偏向锁

目录 一、什么是偏向锁&#xff1f; 二、偏向锁原理 三、偏向锁演示 四、偏向锁的处理流程 五、偏向锁的撤销 六、偏向锁的好处 一、什么是偏向锁&#xff1f; HotSpot作者经过研究实践发现&#xff0c;在大多数情况下&#xff0c;锁不仅不存在多线程竞争&#xff0c;而…

Java无锁、偏向锁、轻量级锁、重量级锁,锁升级过程

2. 锁 2.1 无锁 Java对象刚创建时还没有任何线程来竞争&#xff0c;说明该对象处于无锁状态&#xff08;无线程竞争它&#xff09;&#xff0c;这时偏向锁标识位是0&#xff0c;锁状态是01 。 2.2 偏向锁 偏向锁是指一段同步代码一直被同一个线程所访问&#xff0c;那么该…

偏向锁的获取和撤销详解

Java SE 1.6 为了减少获得锁和释放锁带来的性能消耗&#xff0c;引入了偏向锁和轻量级锁&#xff1b;在Java SE 1.6 中&#xff0c;锁共有4种状态&#xff0c;级别从底到高依次是&#xff1a;无锁状态、偏向锁状态、轻量级锁和重量级锁状态&#xff0c;这几种状态会随着竞争情况…

一篇文章说清 :无锁、偏向锁、轻量级锁、重量级锁

文章目录 前言一、无锁二、偏向锁三、轻量级锁&#xff08;自选锁&#xff09;四、重量级锁锁升级场景 前言 JDK1.6为了减少获得锁和释放锁所带来的性能消耗&#xff0c;引入了“偏向锁”和“轻量级锁”&#xff0c;所以在JDK1.6里锁一共有四种状态&#xff0c;无锁状态&#x…

synchronized的偏向锁、轻量级锁和重量级锁

文章目录 Java对象头偏向锁批量重偏向批量撤销 轻量级锁重量级锁Monitor 原理 Java对象头 普通对象 Mark Word在64 位虚拟机中的结构为 Mark Word后三&#xff08;两&#xff09;位表示 001&#xff1a;无锁状态101&#xff1a; 偏向锁00&#xff1a; 轻量级锁10&#xff1a…

Java synchronized偏向锁、轻量级锁、重量级锁

简介 synchronized锁共有偏向锁、轻量级锁、重量级锁三种类型&#xff0c;而这三种类型的加锁方式都是相同的&#xff0c;写代码时不用考虑加哪种锁。使用锁时对象首先会变为偏向锁状态&#xff0c;当有其它线程获取锁时会升级为轻量级锁&#xff08;没有竞争锁&#xff09;&am…

java 中的锁 -- 偏向锁、轻量级锁、自旋锁、重量级锁

之前做过一个测试&#xff0c;详情见这篇文章《多线程 1操作的几种实现方式&#xff0c;及效率对比》&#xff0c;当时对这个测试结果很疑惑&#xff0c;反复执行过多次&#xff0c;发现结果是一样的: 1. 单线程下synchronized效率最高&#xff08;当时感觉它的效率应该是最差…

偏向锁、轻量级锁、重量级锁的区别和解析

为了换取性能&#xff0c;JVM在内置锁上做了非常多的优化&#xff0c;膨胀式的锁分配策略就是其一。理解偏向锁、轻量级锁、重量级锁的要解决的基本问题&#xff0c;几种锁的分配和膨胀过程&#xff0c;有助于编写并优化基于锁的并发程序。 内置锁的分配和膨胀过程较为复杂&…

偏向锁是什么

偏向锁操作流程偏向锁&#xff0c;顾名思义&#xff0c;它会偏向于第一个访问锁的线程&#xff0c;如果在接下来的运行过程中&#xff0c;该锁没有被其他的线程访问&#xff0c;则持有偏向锁的线程将永远不需要触发同步 但是从我们跑的代码输出却看不到偏向锁这个东东。为啥对…

偏向锁的基本原理

偏向锁的基本原理 前面说过&#xff0c;大部分情况下&#xff0c;锁不仅仅不存在多线程竞争&#xff0c;而是总是由同一个线程多次获得&#xff0c;为了让线程获取锁的代价更低就引入了偏向锁的概念。怎么理解偏向锁呢&#xff1f;当一个线程访问加了同步锁的代码块时&#xff…

偏向锁,轻量级锁,重量级锁的核心原理

前言&#xff1a;大家好&#xff0c;我是小威&#xff0c;24届毕业生&#xff0c;在一家满意的公司实习。本篇文章是关于并发编程中偏向锁&#xff0c;轻量级锁&#xff0c;重量级锁的核心原理知识记录。 本篇文章记录的基础知识&#xff0c;适合在学Java的小白&#xff0c;也适…