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
对象是与当前文档交互的主要入口点,通过它可以访问和操纵页面中的元素和内容。有其他更多的属性和方法可供使用,这里只是介绍了一些常见的。