14-DOM-Document 对象

在 JavaScript 中， Document 对象是浏览器提供的最基本的 DOM 接口。它是表示 HTML 或 XML 页面中整个文档的对象，在 DOM 树中属于根节点（即最上层节点）。

通过 Document 对象，可以操作整个文档，包括访问文档的元素、属性、样式和事件等。

 下面列举一些常用的Document方法 ：

1、获取element对象

1、使用 getElementById() 方法获取 id 为 my-element 的元素节点
var myElement = document.getElementById("my-element");

2、使用 getElementsByClassName() 方法获取 class 为 my-class 的所有元素节点
var myClassElements = document.getElementsByClassName("my-class");

3、使用 getElementsByTagName() 方法获取所有 p 元素节点
var paragraphElements = document.getElementsByTagName("p");

4、使用 querySelector() 方法获取 class 为 my-class 的第一个元素节点
var myClassElement = document.querySelector(".my-class");

5、使用 querySelectorAll() 方法获取所有 class 为 my-class 的元素节点
var myClassElements = document.querySelectorAll(".my-class");

2、 创建其他DOM对象

创建元素节点

// 创建一个新的 div 元素节点
var newDiv = document.createElement("div");

// 修改元素节点的属性
newDiv.id = "new-div";
newDiv.className = "new-class";

// 将新创建的 div 元素添加到文档中
document.body.appendChild(newDiv);

创建文本节点

// 创建一段新的文本节点
var newText = document.createTextNode("This is a new text node.");

// 将新创建的文本节点添加到某个元素节点中
myElement.appendChild(newText);

创建注释节点

// 创建一个注释节点
var newComment = document.createComment("This is a new comment.");

// 将新创建的注释节点添加到某个元素节点中
myElement.appendChild(newComment);

创建属性节点

// 创建一个属性节点
var newAttribute = document.createAttribute("href");

// 给属性节点赋值
newAttribute.value = "https://www.example.com/";

// 将属性节点添加到某个元素节点中
myElement.setAttributeNode(newAttribute);

---

属性 / 方法	描述
all[]	返回对文档中所有 HTML 元素的引用。
activeElement	返回文档中当前获得焦点的元素。