使用 JavaScript 获取 DOM 元素185

在 Web 开发中，经常需要操作和修改页面上的元素。JavaScript 提供了多种方法来获取和操作 DOM 元素，这使开发人员能够创建动态和交互式 Web 应用程序。

getElementById()

getElementById() 是最常用的方法之一，它通过元素的 id 属性来获取元素。id 属性是一个唯一的标识符，可以用来唯一识别页面上的元素。
const element = ("myElement");

getElementsByTagName()

getElementsByTagName() 方法通过元素的标签名来返回一组元素。它会返回一个 HTMLCollection 对象，其中包含所有匹配标签名的元素。
const elements = ("p");

getElementsByClassName()

getElementsByClassName() 方法通过元素的 class 属性来返回一组元素。它会返回一个 HTMLCollection 对象，其中包含所有拥有指定 class 类的元素。
const elements = ("myClass");

querySelector() 和 querySelectorAll()

querySelector() 和 querySelectorAll() 方法是更强大的选择器，允许使用 CSS 选择器来获取元素。
querySelector() 返回匹配选择器的第一个元素。
querySelectorAll() 返回匹配选择器的所有元素。


const element = (".myClass");
const elements = ("");

创建新元素

除了获取现有的元素外，JavaScript 还允许创建新的 DOM 元素。
const newElement = ("p");
= "Hello world!";

修改元素

一旦获得了对元素的引用，就可以修改其属性、内容和样式。
// 修改元素的内容
= "New content";
// 修改元素的样式
= "red";
// 添加一个事件侦听器
("click", function() {});

DOM 树

DOM（文档对象模型）是一个树形结构，其中每个元素都是一个节点。可以通过父节点、子节点和兄弟节点来导航 DOM 树。
// 获取父节点
const parentNode = ;
// 获取子节点
const childNodes = ;
// 获取兄弟节点
const nextSibling = ;

通过使用 JavaScript 中提供的各种方法，开发人员可以轻松地获取、创建和修改 DOM 元素。这对于构建交互式和动态的 Web 应用程序至关重要。

2024-12-31

上一篇：JavaScript 解释器：将代码转换为机器可执行指令

下一篇：JavaScript 中的 this 对象