HTML | DOM 预对象

HTML文档的DOM表示文档的结构，而DOM预定义一些对象以表示浏览器中的HTML元素，这些预对象（或称内置对象）帮助我们在JavaScript中操作HTML文档。

document 对象

document对象是窗口或框架的根节点，它表示整个HTML文档。我们可以使用document对象来获取、创建、修改HTML元素。

获取DOM元素

我们可以使用document对象的getElementById()方法、getElementsByClassName()方法、getElementsByTagName()方法或querySelector()方法等来获取DOM元素。例如：

// 通过id获取元素
const myElement = document.getElementById("myId");

// 通过class获取元素
const elements = document.getElementsByClassName("myClass");

// 通过标签名获取元素
const moreElements = document.getElementsByTagName("div");

// 通过选择器获取元素
const anotherElement = document.querySelector(".myClass");

创建DOM元素

我们可以使用document对象的createElement()方法来创建新的元素。例如：

const newElement = document.createElement("div");

修改DOM元素

我们可以使用document对象的innerHTML属性、setAttribute()方法、appendChild()方法或removeChild()方法等来修改DOM元素。例如：

// 修改元素的 innerHTML
myElement.innerHTML = "<p>Hello world!</p>";

// 添加一个属性
myElement.setAttribute("id", "newId");

// 在元素中添加一个子元素
const childElement = document.createElement("p");
childElement.textContent = "This is a child element.";
myElement.appendChild(childElement);

// 从元素中移除一个子元素
myElement.removeChild(childElement);

window 对象

window对象是JavaScript访问浏览器窗口的接口，它表示当前打开的窗口。我们可以使用window对象来获取HTML文档的位置、大小、打开新窗口等。

// 获取窗口的宽度和高度
const width = window.innerWidth;
const height = window.innerHeight;

// 打开一个新窗口
window.open("http://www.google.com", "_blank");

location 对象

location对象表示当前浏览器窗口中载入的文档的URL信息，我们可以使用location对象来获取或设置当前页面的URL。

// 获取当前页面的URL
const currentUrl = location.href;

// 将当前页面定向到一个新的URL
location.href = "http://www.google.com";

history 对象

history对象是浏览器历史记录的接口，它表示浏览器窗口中正在载入的文档的历史记录。我们可以使用history对象来向前或向后在历史记录中导航。

// 向前
history.forward();

// 向后
history.back();

以上就是DOM预对象的一些介绍，它们为我们在JavaScript中操作HTML文档提供了很多便利。