HTML DOM(文档对象模型)表示一个 HTML 文档的树状结构,其中的每个部分都是一个节点,而这些节点可以通过 JavaScript 进行访问和操作。元素是 DOM 树中的一个重要类型,代表 HTML 文档中的标签。

以下是一些关于 HTML DOM 元素的基本概念和用法:

获取元素:

通过 JavaScript,你可以使用不同的方法获取 HTML DOM 中的元素。

1. 通过 ID 获取元素:
var myElement = document.getElementById("elementId");

2. 通过标签名获取元素:
var paragraphs = document.getElementsByTagName("p");

3. 通过类名获取元素:
var elements = document.getElementsByClassName("className");

4. 通过选择器获取元素(使用 querySelector):
var element = document.querySelector("#elementId");

操作元素:

一旦获取了元素,你可以使用 HTML DOM 提供的方法和属性来操作它。

获取和设置元素的文本内容:
var textContent = myElement.textContent; // 获取文本内容
myElement.textContent = "New Text";     // 设置文本内容

获取和设置元素的 HTML 内容:
var htmlContent = myElement.innerHTML;   // 获取 HTML 内容
myElement.innerHTML = "<p>New HTML</p>"; // 设置 HTML 内容

操作元素的属性:
var value = myElement.getAttribute("src"); // 获取属性值
myElement.setAttribute("alt", "New Alt Text"); // 设置属性值

添加或移除 CSS 类:
myElement.classList.add("newClass");    // 添加 CSS 类
myElement.classList.remove("oldClass"); // 移除 CSS 类

添加或移除子元素:
var newElement = document.createElement("div"); // 创建新元素
myElement.appendChild(newElement); // 添加子元素
myElement.removeChild(newElement); // 移除子元素

这些是一些关于 HTML DOM 元素的基本操作。元素是构成页面的基本单位,通过 JavaScript,你可以动态地操作和修改这些元素,从而实现交互和动态性。


转载请注明出处:http://www.zyzy.cn/article/detail/3551/JavaScript