基础-对象

document： document是JavaScript中的一个对象，它表示当前HTML文档的根节点。通过document对象，你可以与网页文档进行交互，包括选择元素、修改内容、添加事件监听器等。

在JavaScript中，document是一个预定义的全局对象，表示当前HTML文档的根节点。它提供了一组方法和属性，用于与文档进行交互

 

下面是一些常用的document对象的用法：

1. 选择元素： document.getElementById("id")通过元素的ID选择器返回具有指定ID的元素。

   var element = document.getElementById("myElement");

2. 选择元素集合： document.getElementsByClassName("className")通过类名选择器返回具有指定类名的元素集合。

   var elements = document.getElementsByClassName("myClass");

3. 选择元素集合： document.getElementsByTagName("tagName")通过标签名选择器返回具有指定标签名的元素集合。

   var elements = document.getElementsByTagName("div");

4. 选择元素： document.querySelector("selector")通过CSS选择器返回与指定选择器匹配的第一个元素。

   var element = document.querySelector("#myElement");

5. 选择元素集合： document.querySelectorAll("selector")通过CSS选择器返回与指定选择器匹配的所有元素集合。

   var elements = document.querySelectorAll(".myClass");

6. 操作元素内容： element.innerHTML获取或设置元素的HTML内容。

   var element = document.getElementById("myElement"); var htmlContent = element.innerHTML; // 获取内容 element.innerHTML = "<p>New content</p>"; // 设置内容

7. 操作元素属性： element.getAttribute("attributeName")获取指定属性的值，element.setAttribute("attributeName", "value")设置指定属性的值。

   var element = document.getElementById("myElement"); var attributeValue = element.getAttribute("src"); // 获取属性值 element.setAttribute("src", "newImage.jpg"); // 设置属性值

8. 操作元素样式： element.style.property获取或设置元素的CSS样式属性。

   var element = document.getElementById("myElement"); element.style.color = "red"; // 设置颜色样式 var color = element.style.color; // 获取颜色样式

9. 添加事件监听器： element.addEventListener(eventName, callback)在元素上添加事件监听器。

   var button = document.getElementById("myButton"); button.addEventListener("click", function() { console.log("Button clicked"); });