JavaScript中Document全局对象用法（附代码自行演示）

您所在的位置：网站首页 › 文档对象模型的英文解释是什么意思 › JavaScript中Document全局对象用法（附代码自行演示）

JavaScript中Document全局对象用法（附代码自行演示）

2024-07-10 12:40| 来源: 网络整理| 查看: 265

在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 = "

New content

"; 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软件测试网

了解更多知识请戳下：

@Author:懒羊羊

【本文地址】

JavaScript中Document全局对象用法（附代码自行演示）

JavaScript中Document全局对象用法（附代码自行演示）

今日新闻

推荐新闻