操作DOM

Last updated: ... / Reads: 39 Edit

用于获取页面元素的常见方法：

  1. document.getElementById(id)：

    • 通过指定元素的 ID 获取单个元素。
    • 返回对应 ID 的第一个元素。
    • 如果没有匹配的元素，则返回 null。

    示例：

    var myElement = document.getElementById("myId");

  2. document.getElementsByTagName(tagName)：

    • 通过指定元素的标签名获取一组元素。
    • 返回一个 HTMLCollection 对象，它是一个类似数组的对象。
    • 可以通过索引访问集合中的元素。

    示例：

    var myElements = document.getElementsByTagName("div");

  3. document.getElementsByClassName(className)：

    • 通过指定元素的类名获取一组元素。
    • 返回一个 HTMLCollection 对象。
    • 可以通过索引访问集合中的元素。

    示例：

    var myElements = document.getElementsByClassName("myClass");

这些方法都是基本的 DOM 操作方法，使开发者能够通过 JavaScript 访问和操作页面元素。需要注意的是，getElementsByClassName 和 getElementsByTagName 返回的是类似数组的 HTMLCollection 对象，可以使用索引进行访问，或者通过循环遍历。

此外，近年来，开发者更倾向于使用现代的选择器引擎，如 CSS 选择器，通过 document.querySelector 和 document.querySelectorAll 来选择元素。这些方法更灵活，并支持更复杂的选择模式。

  1. document.querySelector(selector)：

    • 通过指定 CSS 选择器获取匹配的第一个元素。
    • 返回找到的第一个匹配元素。

    示例：

    var myElement = document.querySelector("#myId");

  2. document.querySelectorAll(selector)：

    • 通过指定 CSS 选择器获取匹配的所有元素。
    • 返回一个 NodeList 对象，可以通过索引或迭代进行访问。

    示例：

    var myElements = document.querySelectorAll(".myClass");

这些方法提供了更强大、灵活且现代的方式来选择和操作页面元素。

Comments

Make a comment

  • Index