【WEB开发.js】getElementById :通过元素id属性获取HTML元素

ops/2024/11/27 14:53:09/
htmledit_views">

getElementById 是 JavaScript 中常用的一个 DOM 方法,用于通过元素的 id 属性获取文档中对应的 HTML 元素。这个方法返回的是一个包含该元素的引用,如果没有找到指定的元素,则返回 null

语法:

html" title=javascript>javascript">document.getElementById(id);
  • id:一个字符串,表示目标元素的 id 属性值。id 必须是唯一的,即在一个文档中不能有多个元素拥有相同的 id

返回值:

  • 如果找到具有指定 id 的元素,返回该元素对象(如 HTMLDivElementHTMLInputElement 等)。
  • 如果没有找到该元素,返回 null

示例:

假设有一个简单的 HTML 页面:

html"><!DOCTYPE html>
<html>
<head><title>getElementById Example</title>
</head>
<body><div id="message">Hello, world!</div><button id="changeTextBtn">Change Text</button><script>// 获取元素var messageElement = document.getElementById("message");var buttonElement = document.getElementById("changeTextBtn");// 为按钮添加点击事件buttonElement.onclick = function() {messageElement.textContent = "Text has been changed!";};</script>
</body>
</html>

在这个例子中:

  1. document.getElementById("message") 获取到 id="message"<div> 元素。
  2. document.getElementById("changeTextBtn") 获取到 id="changeTextBtn"<button> 元素。

当用户点击按钮时,message 元素的文本会被修改为 "Text has been changed!"

常见用法:

  • 修改内容:

    html" title=javascript>javascript">document.getElementById("example").innerHTML = "New Content";
    
  • 修改样式:

    html" title=javascript>javascript">document.getElementById("example").style.color = "blue";
    
  • 访问输入字段的值:

    html" title=javascript>javascript">var inputValue = document.getElementById("inputField").value;
    
  • 控制可见性:

    html" title=javascript>javascript">document.getElementById("example").style.display = "none"; // 隐藏元素
    

注意事项:

  1. id 在整个文档中应该是唯一的,如果存在多个相同 id 的元素,getElementById 只会返回第一个找到的元素。
  2. getElementById 是最常用和高效的 DOM 查询方法之一,因此它在大多数情况下会比其他方法(如 querySelector)更为快速。

http://www.ppmy.cn/ops/137103.html

相关文章

【单片机的结构和组成】

目录 1、中央处理单元&#xff08;CPU&#xff09;&#xff1a;2、存储器&#xff1a;3、输入/输出&#xff08;I/O&#xff09;接口&#xff1a;4、定时器/计数器&#xff1a;5、模拟-数字转换器&#xff08;ADC&#xff09;&#xff1a;6、数字-模拟转换器&#xff08;DAC&am…

探索 .NET 9 控制台应用中的 LiteDB 异步 CRUD 操作

本文主要是使用异步方式&#xff0c;体验 litedb 基本的 crud 操作。 LiteDB 是一款轻量级、快速且免费的 .NET NoSQL 嵌入式数据库&#xff0c;专为小型本地应用程序设计。它以单一数据文件的形式提供服务&#xff0c;支持文档存储和查询功能&#xff0c;适用于桌面应用、移动…

javaweb-day01-html和css初识

html:超文本标记语言 CSS&#xff1a;层叠样式表 1.html实现新浪新闻页面 1.1 标题排版 效果图&#xff1a; 1.2 标题颜色样式 1.3 标签内颜色样式 1.4设置超链接 1.5 正文排版 1.6 页面布局–盒子 &#xff08;1&#xff09;盒子模型 &#xff08;2&#xff09;页面布局…

RAG架构类型

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

非交换几何与黎曼ζ函数:数学中的一场革命性对话

非交换几何与黎曼ζ函数&#xff1a;数学中的一场革命性对话 非交换几何&#xff08;Noncommutative Geometry, NCG&#xff09;是数学的一个分支领域&#xff0c;它将经典的几何概念扩展到非交换代数的框架中。非交换代数是一种结合代数&#xff0c;其中乘积不是交换性的&…

基于Java+SpringBoot+Mysql在线简单拍卖竞价拍卖竞拍系统功能设计与实现九

一、前言介绍&#xff1a; 免费学习&#xff1a;猿来入此 1.1 项目摘要 主要源于互联网技术的快速发展和电子商务的普及。随着网络技术的不断进步&#xff0c;人们越来越依赖于互联网进行购物、交易和沟通。电子商务的兴起为在线拍卖提供了广阔的市场和便利的条件。在线拍卖…

英伟达发布 Edify 3D 生成模型,可以在两分钟内生成详细的、可用于生产的 3D 资源、生成有组织的 UV 贴图、4K 纹理和 PBR 材质。

英伟达发布 Edify 3D 生成模型&#xff0c;可以利用 Agents 自动判断提示词场景中需要的模型&#xff0c;生成后将他们组合为一个场景。 Edify 3D 可以在两分钟内生成详细的、可用于生产的 3D 资源、生成有组织的 UV 贴图、4K 纹理和 PBR 材质。 相关链接 论文&#xff1a;htt…

基于STM32设计的智能桌面暖风机(华为云IOT)

一、前言 1.1 项目开发背景 随着智能家居技术的迅猛发展&#xff0c;传统家用电器正逐步向智能化方向转型。暖风机作为冬季广泛使用的取暖设备&#xff0c;其智能化升级不仅能够提高用户的使用体验&#xff0c;还能通过物联网技术实现远程控制和数据监控&#xff0c;赋予其更…