DOM Document 学习笔记

什么是DOM Document？

DOM（Document Object Model）是HTML和XML文档的编程接口。Document 对象表示整个文档，即 HTML 页面中的 DOM 树结构。它是操作网页中所有元素的入口。

如何创建一个DOM Document？

在 JavaScript 中，可以使用 document 对象来访问 DOM，也可以使用 document.createElement 方法来创建新的 HTML 元素。

javascriptCopy Code
// 创建一个新的 <p> 元素并添加到文档中
let para = document.createElement("p");
document.body.appendChild(para);

如何修改DOM元素的属性？

可以使用 Element.setAttribute() 方法来设置元素的属性。

javascriptCopy Code
// 设置 <img> 元素的 src 属性
let img = document.querySelector("img");
img.setAttribute("src", "new-image.jpg");

也可以直接修改元素的属性值。

javascriptCopy Code
// 直接修改 <img> 元素的 alt 属性
img.alt = "A new description";

如何操作DOM元素的内容？

可以使用 Element.innerHTML 属性来修改元素的内部 HTML 内容。

javascriptCopy Code
// 修改 <div> 元素的内部 HTML 内容
let div = document.querySelector("div");
div.innerHTML = "<h1>Hello, world!</h1>";

也可以使用 Element.textContent 属性来修改元素的纯文本内容。

javascriptCopy Code
// 修改 <p> 元素的纯文本内容
let para = document.querySelector("p");
para.textContent = "This is a new paragraph.";

如何获取DOM元素的属性和内容？

可以使用 Element.getAttribute() 方法来获取元素的属性值。

javascriptCopy Code
// 获取 <img> 元素的 src 属性值
let img = document.querySelector("img");
let src = img.getAttribute("src");
console.log(src);

可以使用 Element.innerHTML 属性获取元素的内部 HTML 内容。

javascriptCopy Code
// 获取 <div> 元素的内部 HTML 内容
let div = document.querySelector("div");
let html = div.innerHTML;
console.log(html);

可以使用 Element.textContent 属性获取元素的纯文本内容。

javascriptCopy Code
// 获取 <p> 元素的纯文本内容
let para = document.querySelector("p");
let text = para.textContent;
console.log(text);

以上就是 DOM Document 的基础操作方法和实例，希望对您有所帮助！