在 JavaScript 中，HTML DOM（文档对象模型）提供了一种以结构化方式访问和操作 HTML 文档的方法。HTML DOM 将 HTML 文档表示为树状结构，其中每个节点都是文档中的一个元素、属性、文本等。以下是一些与 HTML DOM 对象相关的重要概念和操作：

获取元素：

可以使用多种方法获取 HTML 文档中的元素：

  •  getElementById： 通过元素的 ID 获取元素。

    var element = document.getElementById("myElementId");

  •  getElementsByClassName： 通过类名获取元素的集合。

    var elements = document.getElementsByClassName("myClassName");

  •  getElementsByTagName： 通过标签名获取元素的集合。

    var elements = document.getElementsByTagName("p");

  •  querySelector 和 querySelectorAll： 使用 CSS 选择器获取元素。

    var element = document.querySelector("#myElementId");
    var elements = document.querySelectorAll(".myClassName");

修改元素内容和属性：

可以通过 HTML DOM 修改元素的内容和属性：

  •  innerHTML： 获取或设置元素的 HTML 内容。

    var content = element.innerHTML;
    element.innerHTML = "New content";

  •  textContent： 获取或设置元素的纯文本内容。

    var content = element.textContent;
    element.textContent = "New text content";

  •  setAttribute 和 getAttribute： 设置和获取元素的属性。

    element.setAttribute("src", "newimage.jpg");
    var srcValue = element.getAttribute("src");

创建和添加元素：

可以使用 HTML DOM 动态创建新元素并将其添加到文档中：
// 创建新的段落元素
var newParagraph = document.createElement("p");

// 设置元素的文本内容
newParagraph.textContent = "This is a new paragraph.";

// 获取父容器元素
var container = document.getElementById("myContainer");

// 将新元素添加到文档中
container.appendChild(newParagraph);

事件处理：

HTML DOM 允许通过事件处理程序响应用户的交互：
// 获取按钮元素
var myButton = document.getElementById("myButton");

// 添加点击事件处理程序
myButton.addEventListener("click", function() {
    alert("Button clicked!");
});

以上是一些常见的 HTML DOM 操作示例。通过 HTML DOM，JavaScript 能够动态地修改文档的结构和内容，使得网页具有更强大的交互性。


转载请注明出处：http://www.pingtaimeng.com/article/detail/12851/JavaScript