document 对象是浏览器环境中用于表示当前加载页面文档的对象。它提供了对文档内容的访问和操作,允许开发者通过脚本与页面元素进行交互。以下是一些常见的 document 对象的属性和方法:
document.getElementById(id): 通过元素的 ID 获取对应的 DOM 元素。javascriptvar element = document.getElementById("myElement");document.getElementsByClassName(className): 通过类名获取一组 DOM 元素。javascriptvar elements = document.getElementsByClassName("myClass");document.getElementsByTagName(tagName): 通过标签名获取一组 DOM 元素。javascriptvar elements = document.getElementsByTagName("div");document.querySelector(selector): 通过 CSS 选择器获取匹配的第一个 DOM 元素。javascriptvar element = document.querySelector("#myElement");document.querySelectorAll(selector): 通过 CSS 选择器获取所有匹配的 DOM 元素。javascriptvar elements = document.querySelectorAll(".myClass");document.createElement(tagName): 创建一个新的 HTML 元素。javascriptvar newElement = document.createElement("div");element.appendChild(childElement): 将一个子元素添加到指定元素的末尾。javascriptparentElement.appendChild(newElement);element.innerHTML: 获取或设置元素的 HTML 内容。javascriptvar content = element.innerHTML; element.innerHTML = "<p>New content</p>";element.style: 获取或设置元素的样式属性。javascriptelement.style.color = "red";element.addEventListener(event, callback): 添加事件监听器,用于响应特定事件。javascriptelement.addEventListener("click", function() { alert("Element clicked!"); });
document 对象是与当前文档交互的主要入口点,通过它可以访问和操纵页面中的元素和内容。有其他更多的属性和方法可供使用,这里只是介绍了一些常见的。