JavaScript DOM 操作:如何选中一个 HTML 元素?有哪些方法?

简介: JavaScript DOM 操作:如何选中一个 HTML 元素?有哪些方法?

在 JavaScript 中,有多种方法可以选中一个 HTML 元素。以下是一些常用的方法:

  1. getElementById(id): 通过元素的 id 属性来选中元素。例如,如果有一个元素如下:
<div id="myDiv">Hello, World!</div>

可以使用以下代码选中该元素:

var element = document.getElementById("myDiv");
  1. getElementsByClassName(name): 通过元素的 class 属性来选中元素。例如,如果有一个元素如下:
<div class="myClass">Hello, World!</div>

可以使用以下代码选中所有具有该类名的元素:

var elements = document.getElementsByClassName("myClass");
  1. getElementsByTagName(name): 通过元素的标签名来选中元素。例如,如果有一个元素如下:
<p>Hello, World!</p>

可以使用以下代码选中所有 <p> 标签的元素:

var elements = document.getElementsByTagName("p");
  1. querySelector(selector): 通过 CSS 选择器来选中元素。例如,如果有一个元素如下:
<div class="myClass">Hello, World!</div>

可以使用以下代码选中具有指定类名的元素:

var element = document.querySelector(".myClass");
  1. querySelectorAll(selector): 通过 CSS 选择器来选中多个元素。例如,如果有两个具有相同类名的元素:
<div class="myClass">Hello, World!</div>
<div class="myClass">Hello again, World!</div>

可以使用以下代码选中所有具有指定类名的元素:

var elements = document.querySelectorAll(".myClass");
相关文章
|
7天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
2月前
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
|
16天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
32 3
|
19天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
32 4
|
19天前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
18天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
45 0
html5+three.js公路开车小游戏源码
|
27天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
78 6
|
1月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
62 4
|
1月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
37 4
|
1月前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
110 1
下一篇
无影云桌面