JavaScript中Document全局对象用法(附代码自行演示)
在JavaScript中,document
对象是浏览器提供的一个全局对象,它代表了当前网页的整个HTML文档。
document
对象提供丰富的属性和方法,允许开发者与HTML文档的内容进行交互,包括查找、创建、修改、删除元素以及处理文档结构和样式等。
以下个人总结document
对象的一些常见用法,文末附相关检索内容,供深入研究使用,篇幅略大耐心品阅,文中有问题的地方希望大家指正补充:
1. 获取元素
注:let、const 声明和 var 声明用法是一样的,不同点在于 let、var 声明的是变量, const 声明的是常量。 var 存在变量提升, let、const 不存在变量提升。
1.1 getElementById(id)
通过元素的ID属性获取元素,返回匹配ID的第一个元素(如果有多个元素具有相同的ID,此方法仅返回第一个)。
const element = document.getElementById("myElement");
1.2 getElementsByClassName(className)
返回一个包含所有匹配指定类名的元素的NodeList集合。
const elements = document.getElementsByClassName("myClass");
1.3 getElementsByTagName(tagName)
返回一个包含所有指定标签名的元素的NodeList集合。
const paragraphs = document.getElementsByTagName("p");
1.4 querySelector(selector)
使用CSS选择器获取文档中匹配的第一个元素。
Javascript
const firstHeading = document.querySelector("h1");
1.5. querySelectorAll(selector)
返回一个NodeList,包含所有匹配指定CSS选择器的元素。
const allLinks = document.querySelectorAll("a[href]");
2. 创建与插入元素
2.1. createElement(tagName)
创建一个新的HTML元素节点。
const newDiv = document.createElement("div");
2.2. appendChild(node)
将指定节点添加到某个元素的子元素列表末尾。
document.body.appendChild(newDiv);
2.3 insertBefore(newNode, referenceNode)
在指定的参照节点前插入新的节点。
const existingNode = document.getElementById("existingNode");
const newNode = document.createElement("span");
document.body.insertBefore(newNode, existingNode);
3. 修改元素属性与内容
3.1 element.setAttribute(name, value)
设置元素的属性值。
1const img = document.getElementById("myImage");
2img.setAttribute("src", "new-image.jpg");
3.2. element.removeAttribute(name)
移除元素的指定属性。
1const link = document.querySelector("a.remove-me");
2link.removeAttribute("href");
3.3 element.innerHTML
读取或设置元素的内部HTML内容。
1const contentDiv = document.getElementById("content");
2contentDiv.innerHTML = "<p>New content</p>";
3.4 element.textContent
读取或设置元素的纯文本内容(不包括HTML标签)。
const heading = document.querySelector("h1");
heading.textContent = "New Heading Text";
4. 事件处理
4.1 addEventListener(type, listener[, options])
为元素添加指定类型的事件监听器。
const button = document.getElementById("myButton");
button.addEventListener("click", function(event) {
console.log("Button clicked!");
});
5. 文档信息与操作
5.1 document.title
获取或设置当前文档的标题。
document.title = "New Page Title";
5.2 document.URL
获取当前文档的完整URL。
console.log(document.URL); // 输出当前页面的URL
5.3 document.open()
, document.write(content)
, document.close()
用于动态修改整个文档的内容。但在现代网页开发中,这种方法已不推荐使用,因为它会清空当前文档并可能导致重绘性能问题及安全风险。通常使用DOM操作来动态更新内容。
6. 其他方法
a. document.head
/ document.body
直接访问文档的和
部分。
b. document.forms
/ document.images
/ document.scripts
等
访问文档中特定类型的集合,如表单、图像、脚本等。
c. document.readyState
检查文档加载状态(如"loading"、“interactive”、“complete”)。
d. document.cookie
访问和操作当前文档的cookie。
以上只是document
对象常用功能的一部分,实际使用中可根据具体需求结合这些方法来实现复杂的网页交互逻辑。随着JavaScript的发展,现代浏览器还引入了许多新的API和特性,如Shadow DOM、MutationObserver等,进一步丰富了对文档操作的可能性。在实际开发中,建议遵循最佳实践,如使用异步加载数据、避免阻塞UI渲染、确保代码可维护性和兼容性等。
附相关检索内容:
web前端-javascript常用的document对象使用详解-CSDN技术社区
javascript document对象的方法有哪些-php中文网
JavaScript入门教程——42_document对象_方法_获取元素-知乎
js中的document怎么使用-酷盾安全
JavaScript中document的用法-CSDN技术社区
javascript document对象的方法有哪些
前端基础:document对象的十个常用方法-51CTO
前端基础:document对象的十个常用方法-51Testing软件测试网
了解更多知识请戳下: