HTML | DOM 引用对象

在 HTML 页面中，可以使用 Javascript 操作 DOM，而 DOM 就是指文档对象模型（Document Object Model）。而在 Javascript 中，就可以通过引用对象来操作 DOM。

HTML Document 对象

在 Javascript 中，HTML 页面可以作为文档对象模型（DOM）使用。document 对象是 HTML 文档的根元素，可以作为 DOM 的起点。

let doc = document;

HTML Element 对象

HTML 页面上的每个元素都是一个 Element 对象，可以通过它控制页面元素。

// 通过 ID 获取元素
let elementById = document.getElementById("myId");

// 通过标签名获取元素
let elementsByTagName = document.getElementsByTagName("p");

// 通过类名获取元素
let elementsByClassName = document.getElementsByClassName("myClass");

HTML Attribute 对象

每个 HTML 元素都可以拥有属性，而在 Javascript 中可以使用 Attribute 对象来访问和修改这些属性。

// 获取属性
let attributeValue = elementById.getAttribute("myAttr");

// 设置属性
elementById.setAttribute("myAttr", "myValue");

HTML Event 对象

Javascript 通过 Event 对象来处理用户与 HTML 元素交互时触发的事件。

// 事件监听
elementById.addEventListener("click", function() {
  alert("Hello world!");
});

以上就是 HTML | DOM 引用对象的一些常用方法和属性。做好 DOM 引用对象的学习和使用，可以更好地操作 HTML 页面，实现更加丰富的交互效果。