HTML | DOM 基础对象

HTML（Hypertext Markup Language）是一种用于创建 Web 页面的标记语言，而 DOM（Document Object Model）则是 HTML 的文档对象模型，这里我们将介绍 HTML | DOM 基础对象。

常见对象

document

document 对象表示整个 HTML 文档，可以通过它来访问和修改文档的内容。

// 返回文档标题
document.title;

// 返回文档域名
document.domain;

// 返回文档的整个 URL
document.URL;

// 返回文档的字符编码
document.charset;

// 返回文档的文档类型声明（DTD）
document.doctype;

// 返回文档的头部
document.head;

// 返回文档的主体
document.body;

element

HTML 中的标签都是元素，每个元素都是一个对象，可以通过 document 对象的方法来获取。

// 获取 ID 为 "myDiv" 的元素
var myDiv = document.getElementById("myDiv");

// 获取标签名为 "div" 的第一个元素
var firstDiv = document.getElementsByTagName("div")[0];

// 获取类名为 "container" 的第一个元素
var container = document.getElementsByClassName("container")[0];

event

event 对象代表事件的状态，例如当用户点击某个元素时，就会创建一个 event 对象，可以用它来访问事件的属性和方法。

// 鼠标移入事件
element.onmouseover = function(event) {
  console.log("鼠标移入了" + event.target);
};

// 鼠标移出事件
element.onmouseout = function(event) {
  console.log("鼠标移出了" + event.target);
};

// 阻止默认行为和冒泡
element.onclick = function(event) {
  event.preventDefault(); // 阻止默认行为
  event.stopPropagation(); // 阻止冒泡
};

window

window 对象代表浏览器的窗口，在浏览器中打开的每个窗口都拥有自己的 window 对象，可以通过它来访问窗口的属性和方法。

// 打开一个新窗口
var myWindow = window.open("http://www.example.com");

// 关闭当前窗口
window.close();

// 在当前窗口跳转到指定网址
window.location.href = "http://www.example.com";

// 返回当前窗口的宽度和高度
window.innerWidth;
window.innerHeight;

总结

以上就是 HTML | DOM 基础对象的介绍，掌握以上常见对象的使用方法能够让我们更加灵活地操作 HTML 文档，并且实现更加出色的 Web 页面效果。