js_dom_examples
现代 JavaScript HTML DOM 示例
Section titled “现代 JavaScript HTML DOM 示例”探索如何使用现代 JavaScript 动态地访问和操作 HTML 元素（DOM 对象）。
Document 对象
Section titled “Document 对象”document 对象代表你的网页。以下是一些常见任务：
- 获取文档标题：
const pageTitle = document.title; console.log(pageTitle); - 更改文档标题：
document.title = 'New Page Title'; - 获取文档 URL：
const pageURL = document.URL; console.log(pageURL); - 获取最后修改日期：
const lastModified = document.lastModified; console.log(lastModified); - 获取引荐来源 URL：
const referrer = document.referrer; console.log(referrer || 'No referrer'); - 读取 cookies：
const cookies = document.cookie; console.log(cookies);（注意：对于健壮的 Cookie 管理，请考虑专用的库或现代 API，如 Cookie Store API，尽管document.cookie是基本的访问点）。 - 打开新窗口并写入内容：
const newWindow = window.open(); if (newWindow) { newWindow.document.write('<h1>Hello from new window!</h1>'); newWindow.document.close(); } else { console.error('Popup blocked!'); } - 按标签名获取元素（返回一个实时的 HTMLCollection）：
const paragraphs = document.getElementsByTagName('p'); console.log(Number of paragraphs: ${paragraphs.length}); - 按 name 属性获取元素（返回一个实时的 NodeList）：
const emailFields = document.getElementsByName('email'); console.log(Number of email fields: ${emailFields.length}); - 选择第一个匹配 CSS 选择器的元素：
const mainHeader = document.querySelector('#main-title'); if (mainHeader) mainHeader.textContent = 'Updated Title'; - 选择所有匹配 CSS 选择器的元素（返回一个静态的 NodeList）：
const listItems = document.querySelectorAll('.item'); listItems.forEach(item => console.log(item.textContent));
理解 Document 对象：document 对象是访问页面内容的入口点。现代方法如 querySelector 和 querySelectorAll 提供了强大而灵活的方式来使用 CSS 选择器选择元素。在 MDN Web Docs 上了解更多：Document
使用特定元素集合
Section titled “使用特定元素集合”虽然现代的 querySelectorAll 因其多功能性而通常更受欢迎，但 JavaScript 仍然提供了访问特定实时 HTMLCollections 的方式：
锚点集合（document.anchors）
Section titled “锚点集合（document.anchors）”查找锚点数量：const numAnchors = document.anchors.length; console.log(Number of anchors: ${numAnchors});
查找第一个锚点的文本内容：if (document.anchors.length > 0) { console.log(document.anchors[0].textContent); }
现代替代方法：const allLinks = document.querySelectorAll('a[href]');
链接集合（document.links）
Section titled “链接集合（document.links）”显示链接数量：const numLinks = document.links.length; console.log(Number of links: ${numLinks});
显示第一个链接的 href 属性：if (document.links.length > 0) { console.log(document.links[0].href); }
表单集合（document.forms）
Section titled “表单集合（document.forms）”查找表单数量：const numForms = document.forms.length; console.log(Number of forms: ${numForms});
查找第一个表单的 name 或 ID：if (document.forms.length > 0) { console.log(document.forms[0].name || document.forms[0].id); }
图像集合（document.images）
Section titled “图像集合（document.images）”返回图像数量：const numImages = document.images.length; console.log(Number of images: ${numImages});
返回第一张图像的 id：if (document.images.length > 0) { console.log(document.images[0].id); }
使用 JavaScript 操作 CSS
Section titled “使用 JavaScript 操作 CSS”更改 HTML 元素的可见性：
const elementToToggle = document.getElementById('myElement'); if (elementToToggle) { elementToToggle.style.display = 'none'; /* To hide */ }
// To show it again: elementToToggle.style.display = 'block'; (or 'inline', 'flex', etc., depending on original display type)
或者，使用 hidden 属性：elementToToggle.hidden = true; 或 elementToToggle.hidden = false;
更改 HTML 元素的背景颜色：
const elementToColor = document.getElementById('myElement'); if (elementToColor) { elementToColor.style.backgroundColor = 'lightblue'; }
最佳实践：对于更复杂的样式设置，通常最好定义 CSS 类，然后使用 JavaScript 添加或删除这些类：
// CSS: .is-hidden { display: none; } .highlight { background-color: yellow; }
// JS: element.classList.add('highlight'); element.classList.remove('is-hidden'); element.classList.toggle('another-class');