document对象

document 对象

document 对象是 JavaScript 中代表整个 HTML 文档的对象，它提供了访问和操作页面内容的方法和属性。

访问元素：

在 JavaScript 中您可以使用 getElementById()、getElementsByClassName()、getElementsByTagName() 等方法可以获取页面中的元素。

getElementById()

getElementById() 方法通过元素的 ID 属性返回对拥有指定 ID 的第一个对象的引用。
示例：var element = document.getElementById('myElement');

getElementsByClassName()：

getElementsByClassName() 方法返回文档中所有指定类名的元素的集合。
示例：var elements = document.getElementsByClassName('myClass');

getElementsByTagName()：

getElementsByTagName() 方法返回指定标签名的元素的集合。
示例：var elements = document.getElementsByTagName('div');
这些方法都返回元素的集合，因此如果您知道页面上有多个符合条件的元素，您可能需要遍历集合来处理每个元素。

例如：

javascript
// 获取所有 class 为 "myClass" 的元素并改变它们的文本内容
var elements = document.getElementsByClassName('myClass');
for (var i = 0; i < elements.length; i++) {
    elements[i].textContent = '新内容';
}

请注意，getElementById() 返回的是单个元素而不是集合，因此您可以直接操作返回的元素而无需使用循环。

修改内容：

在 JavaScript 中，您可以使用 innerHTML 和 textContent 属性来修改元素的内容

innerHTML：

innerHTML 属性可以用来获取或设置 HTML 元素的内部 HTML 内容。
将新的 HTML 内容赋给 innerHTML 时，元素的内部 HTML 内容会被替换为新的内容。

示例：

document.getElementById('myElement').innerHTML = '<strong>新内容</strong>';

textContent：

textContent 属性用来获取或设置 HTML 元素的文本内容。
与 innerHTML 不同，textContent 只处理元素的纯文本内容，不会解释其中的 HTML 标签。
示例：

document.getElementById('myElement').textContent = '新文本内容';

这两个属性都提供了一种在 JavaScript 中修改页面元素内容的方式。通常情况下，如果您只需要修改元素的文本内容，建议使用 textContent 属性，因为它更加安全，可以避免对 HTML 结构造成意外破坏。而如果您需要操作包含 HTML 标记的内容，那么 innerHTML 则是更合适的选择。

创建新元素：

createElement()

当您需要在 JavaScript 中动态创建新的 HTML 元素并将其添加到页面中时，可以使用 createElement() 方法创建新元素

// 创建一个新的 <p> 元素
var newParagraph = document.createElement('p');

appendChild()

appendChild() 方法将其添加到指定的父元素中

// 创建一个新的 <p> 元素
var newParagraph = document.createElement('p');

// 创建文本节点
var textNode = document.createTextNode('这是一个新段落');

// 将文本节点添加到新段落元素中
newParagraph.appendChild(textNode);

// 获取要添加新元素的父元素
var parentElement = document.getElementById('parentElement');

// 将新元素添加到父元素中
parentElement.appendChild(newParagraph);

事件处理：

addEventListener()

当您想要在文档上注册事件处理程序时，可以使用 addEventListener() 方法。这个方法可以让您为特定的事件类型（比如点击、鼠标悬停等）添加事件处理程序，以便在事件发生时执行相应的操作。

// 获取要添加事件处理程序的元素
var myElement1 = document.getElementById('myElement');

// 定义点击事件处理函数
function clickHandler() {
    alert('您点击了该元素！');
}

// 定义鼠标悬停事件处理函数
function mouseoverHandler() {
    console.log('鼠标悬停在该元素上！');
}

// 添加点击事件处理程序
myElement1.addEventListener('click', clickHandler);

// 添加鼠标悬停事件处理程序
myElement1.addEventListener('mouseover', mouseoverHandler);

//也可以用这个格式添加移出事件
myElement1.addEventListener('onmouseout', function() {
    alert('您移出了该元素！');
});

通过使用 addEventListener() 方法，您可以为元素添加多个不同类型的事件处理程序，以实现各种交互效果和功能。这种方式比直接在 HTML 标记中添加事件处理程序要更加灵活和可维护。

其他属性：

document.title

这个属性用于获取或设置文档的标题。通过读取或修改 document.title 属性，您可以动态地改变页面的标题，这在很多情况下都很有用

// 获取文档的标题并输出
var documentTitle = document.title;
console.log('文档标题：', documentTitle);

document.URL

document.URL 属性返回文档的 URL（统一资源定位符）。通过这个属性，您可以获取当前文档所在的完整 URL 地址，包括协议、主机名、端口号和路径等信息。

// 获取文档的 URL 并输出
var documentURL = document.URL;
console.log('文档 URL：', documentURL);

document.body

这个属性返回文档中的 元素。通过访问 document.body 属性，您可以直接操作页面的主体内容，比如添加新元素、修改样式等。

// 获取文档的 body 元素并修改样式
var documentBody = document.body;
documentBody.style.backgroundColor = 'lightgray';