福建省闽侯县建设局网站,网站建设报价模板,福田住房和建设局网站,濮阳JavaScript 的强大之处在于它能够与 HTML 和 CSS 交互#xff0c;动态地修改网页内容和样式。而实现这一功能的核心就是 DOM#xff08;文档对象模型#xff09;。 一、什么是 DOM#xff1f;
DOM 是文档对象模型#xff08;Document Object Model#xff09;的缩写。它…JavaScript 的强大之处在于它能够与 HTML 和 CSS 交互动态地修改网页内容和样式。而实现这一功能的核心就是 DOM文档对象模型。 一、什么是 DOM
DOM 是文档对象模型Document Object Model的缩写。它将 HTML 或 XML 文档转换成一个树形结构JavaScript 可以访问和操作这棵树上的每一个节点从而实现对网页的动态控制。
二、DOM 树的结构
DOM 树的结构是层级的每个节点都有其父节点、子节点和兄弟节点。 父节点 (Parent Node): 包含当前节点的节点。 子节点 (Child Node): 被当前节点包含的节点。 兄弟节点 (Sibling Node): 与当前节点拥有相同父节点的节点。 三、如何使用 JavaScript 操作 DOM
1. 获取元素: getElementById(): 通过 ID 获取元素。
let element document.getElementById(myElement);
console.log(element); // 输出 id 为 myElement 的元素 getElementsByTagName(): 通过标签名获取元素集合 (HTMLCollection)。
let paragraphs document.getElementsByTagName(p);
for (let i 0; i paragraphs.length; i) {console.log(paragraphs[i]); // 输出所有 p 元素
} getElementsByClassName(): 通过类名获取元素集合 (HTMLCollection)。
let elements document.getElementsByClassName(myClass);
for (let i 0; i elements.length; i) {console.log(elements[i]); // 输出所有 class 包含 myClass 的元素
} querySelector(): 通过 CSS 选择器获取第一个匹配的元素。
let element document.querySelector(#myElement p);
console.log(element); // 输出 id 为 myElement 元素下的第一个 p 元素 querySelectorAll(): 通过 CSS 选择器获取所有匹配的元素集合 (NodeList)。
let elements document.querySelectorAll(.myClass);
elements.forEach(element console.log(element)); // 输出所有 class 包含 myClass 的元素 2. 修改元素内容: textContent: 获取或设置元素的文本内容。
let element document.getElementById(myElement);
element.textContent 新的文本内容; // 设置文本内容
console.log(element.textContent); // 输出 新的文本内容 innerHTML: 获取或设置元素的 HTML 内容 (慎用可能存在安全风险)。
let element document.getElementById(myElement);
element.innerHTML p新的 HTML 内容/p; // 设置 HTML 内容 3. 修改元素属性: getAttribute(): 获取元素的属性值。
let element document.getElementById(myElement);
let src element.getAttribute(src);
console.log(src); // 输出 src 属性的值 setAttribute(): 设置元素的属性值。
let element document.getElementById(myElement);
element.setAttribute(src, new_image.jpg); // 设置 src 属性的值 removeAttribute(): 移除元素的属性。
let element document.getElementById(myElement);
element.removeAttribute(src); // 移除 src 属性 4. 修改元素样式: style 属性: 直接访问和修改元素的内联样式。
let element document.getElementById(myElement);
element.style.color red; // 设置颜色为红色
element.style.fontSize 20px; // 设置字体大小 5. 创建和添加元素: createElement(): 创建新的 HTML 元素。
let newParagraph document.createElement(p); appendChild(): 将新元素添加到父元素的子节点列表末尾。
let element document.getElementById(myElement);
element.appendChild(newParagraph); // 将 newParagraph 添加到 myElement 的末尾 insertBefore(): 将新元素添加到父元素的指定子节点之前。
let existingElement document.getElementById(existingElement);
element.insertBefore(newParagraph, existingElement); // 将 newParagraph 添加到 existingElement 之前 6. 删除元素: removeChild(): 从父元素中删除指定的子元素。
let element document.getElementById(myElement);
let childToRemove document.getElementById(childToRemove);
element.removeChild(childToRemove); // 从 myElement 中删除 childToRemove
7. 事件处理:
let element document.getElementById(myElement);
element.addEventListener(click, function() {alert(元素被点击了);
}); 四、一些重要的 DOM 属性和方法 (附带示例): document.documentElement: 获取 html 元素。 console.log(document.documentElement); document.body: 获取 body 元素。 console.log(document.body); parentNode: 获取元素的父节点。 console.log(element.parentNode); childNodes: 获取元素的所有子节点 (NodeList)。 console.log(element.childNodes); firstChild: 获取元素的第一个子节点。 console.log(element.firstChild); lastChild: 获取元素的最后一个子节点。 console.log(element.lastChild); nextSibling: 获取元素的下一个兄弟节点。 console.log(element.nextSibling); previousSibling: 获取元素的上一个兄弟节点。 console.log(element.previousSibling);
五、 避免常见错误: 操作未加载的 DOM: 确保 DOM 完全加载后再执行 JavaScript 代码可以使用 DOMContentLoaded 事件。 innerHTML 的安全风险: 使用 innerHTML 容易受到 XSS 攻击需要谨慎使用并进行必要的安全过滤。 性能优化: 频繁操作 DOM 会影响性能尽量减少不必要的 DOM 操作可以使用文档片段 (DocumentFragment) 来批量更新 DOM。 六、DOM案例
HTML 页面
!DOCTYPE html
html langzh
headmeta charsetUTF-8titleDOM 操作示例/title
/head
bodyh1 idheader欢迎来到 DOM 操作示例/h1
button onclickchangeText()点击改变标题文字/button
div idcontentp这是一个段落。/pulli列表项 1/lili列表项 2/lili列表项 3/li/ul
/divscript
function changeText() {var header document.getElementById(header);header.innerHTML DOM 文档对象模型示例;
}window.onload function() {var listItems document.querySelectorAll(#content ul li);for (var i 0; i listItems.length; i) {(function(index) {listItems[index].onclick function() {alert(点击了第 (index 1) 个列表项);};})(i);}
};
/script/body
/html
解释 HTML 部分: h1 标签用于创建一个标题。button 标签用于创建一个按钮当用户点击该按钮时将调用 changeText 函数。div 包含了一个段落和一个无序列表。 JavaScript 部分: changeText 函数通过获取具有 idheader 的元素并修改其 innerHTML 属性来改变标题的文本内容。window.onload 事件处理器在页面加载完成后执行。它首先通过 querySelectorAll 获取所有的列表项并为每个列表项添加点击事件处理程序。当列表项被点击时会弹出一个警告框显示点击的是哪个列表项。
这个例子展示了如何使用 JavaScript 操作 HTML DOM文档对象模型中的元素包括选择元素、修改元素内容以及响应用户的交互动作。
运行 七、总结
DOM 是 JavaScript 操作网页的关键。 通过本文的介绍和示例希望你对 JavaScript DOM 有了更深入的了解并能够在实际开发中灵活运用。
