JavaScript- 4.2 DOM--定位元素

原创已于 2025-05-28 11:00:11 修改 · 863 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript #前端 #java

于 2025-05-28 10:54:20 首次发布

前端专栏收录该内容

44 篇文章

订阅专栏

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。

HTML和CSS系列文章 已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！

点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！

系列文章目录

JavaScript- 1.1 行内、内部、外部三种引用方式

JavaScript- 1.2 ECMA基本语法和控制流

JavaScript- 1.3 DOM对页面内容进行操作

JavaScript- 1.4 BOM对浏览器进行操作

JavaScript- 1.5 数据类型+变量+运算符

JavaScript- 1.6 基本控制流

JavaScript- 2.1 系统函数和自定义函数

JavaScript- 2.2 内置对象MATH

JavaScript- 2.3 内置对象String

JavaScript- 2.4 内置对象Date

JavaScript- 2.5 内置对象ARRAY

JavaScript- 2.6 数组应用

JavaScript- 2.7 二维数组

JavaScript- 3.1 定时器函数 window.settimeout & window.settinterval

JavaScript- 3.2 JavaScript实现不同显示器尺寸的响应式主题和页面

JavaScript- 4.1 DOM-document对象

JavaScript- 4.2 DOM--定位元素

JavaScript- 4.3 轮播图实现指南

系列文章目录

前言

一、JavaScript中的DOM元素定位

前言

小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！

一、JavaScript中的DOM元素定位

在JavaScript中，定位DOM元素是操作网页内容的基础。以下是几种常用的DOM元素定位方法：

1. 通过ID定位元素

使用getElementById()方法通过元素的ID属性定位：

javascript

const element = document.getElementById('elementId');

返回匹配ID的第一个元素（ID在文档中应该是唯一的）
如果没有找到匹配项，返回null

2. 通过类名定位元素

使用getElementsByClassName()方法通过类名定位：

javascript

const elements = document.getElementsByClassName('className');

返回一个HTMLCollection（类数组对象），包含所有匹配的元素
如果没有匹配项，返回空的HTMLCollection

3. 通过标签名定位元素

使用getElementsByTagName()方法通过标签名定位：

javascript

const elements = document.getElementsByTagName('div');

返回一个HTMLCollection，包含所有指定标签的元素
可以使用通配符'*'获取所有元素

4. 通过CSS选择器定位元素

现代浏览器提供了更强大的选择器方法：

querySelector()

javascript

const element = document.querySelector('.container > p.highlight');

返回文档中匹配指定CSS选择器的第一个元素
如果没有匹配项，返回null

querySelectorAll()

javascript

const elements = document.querySelectorAll('div.item, p.description');

返回一个NodeList（类数组对象），包含所有匹配指定CSS选择器的元素
如果没有匹配项，返回空的NodeList

5. 通过name属性定位元素

使用getElementsByName()方法通过name属性定位：

javascript

const elements = document.getElementsByName('username');

常用于表单元素
返回一个NodeList

6. 特殊元素定位

定位文档的根元素

javascript

const htmlElement = document.documentElement; // <html>元素
const headElement = document.head; // <head>元素
const bodyElement = document.body; // <body>元素

定位表单元素

javascript

const form = document.forms['myForm']; // 通过name属性
const input = form.elements['username']; // 通过name属性

7. 遍历DOM树定位

父子关系

javascript

const parent = element.parentNode;
const children = parent.childNodes; // 包含所有节点（包括文本节点）
const elementChildren = parent.children; // 只包含元素节点
const firstChild = parent.firstElementChild;
const lastChild = parent.lastElementChild;

兄弟关系

javascript

const nextSibling = element.nextElementSibling;
const previousSibling = element.previousElementSibling;

8. 现代遍历方法

closest()

向上查找匹配选择器的最近祖先元素：

javascript

const ancestor = element.closest('.container');

contains()

检查一个元素是否是另一个元素的子节点：

javascript

const isContained = parentElement.contains(childElement);

9. 性能考虑

ID选择器最快：getElementById()通常是最快的定位方法
缓存结果：频繁访问的元素应该缓存到变量中
避免过度查询：在循环中避免重复查询DOM
使用事件委托：对于动态内容，考虑在父元素上使用事件委托

示例：综合使用

javascript

// 获取表单元素
const form = document.forms.loginForm;

// 获取用户名输入框
const usernameInput = form.elements.username;
// 或者
const usernameInput = document.querySelector('#loginForm input[name="username"]');

// 获取提交按钮
const submitButton = form.querySelector('button[type="submit"]');

// 事件监听
submitButton.addEventListener('click', function(event) {
  event.preventDefault();
  console.log('Username:', usernameInput.value);
});

掌握这些DOM元素定位方法可以让你高效地操作和交互网页内容。随着现代前端框架的发展，直接DOM操作的需求有所减少，但理解这些基础仍然非常重要。

二、代码实战

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM--定位元素</title>
	</head>
	<body>
		<!-- 标签 类 id -->
		<!-- p.p1{段落$}*4 -->
		<p class="p1">段落1</p>
		<p class="p1" id="id1">段落2</p>
		<p class="p1">段落3</p>
		<p >段落4</p>
		<!-- 1.让所有段落的字体变成红色，背景变黑 -->
		<a href="javascript:void(0);" onclick="fn1()">定位标签</a>
		<!-- 2.让段落1-3内容变成新段落 -->
		<a href="javascript:void(0);" onclick="fn2()">定位类</a>
		<!-- 3.把段落2内容改一下 -->
		<a href="javascript:void(0);" onclick="fn3()">定位id</a>
		<script type="text/javascript">
			function fn1(){
				var myp=document.getElementsByTagName('p');
				//获得一组数据
				//遍历每个数据
				for(var i=0;i<myp.length;i++){
					myp[i].style.color="red";
				}
				document.body.style.backgroundColor="black";
			}
			function fn2(){
				var myp=document.getElementsByClassName('p1');
				for(var i=0;i<myp.length;i++){
					myp[i].innerText="新段落"+(i+1);
				}
			}
			function fn3(){
				var myp=document.getElementById('id1');
				myp.innerText=2;
			}
		</script>
	</body>
</html>

代码运行如下：