电子商务网站网络推广方式,wordpress qq登录,无锡中小企业网站建设,实时开奖走势网站建设#x1f642;博主#xff1a;小猫娃来啦 #x1f642;文章核心#xff1a;DOM节点操作手册#xff1a;你需要了解的一切 文章目录 前言DOM基础知识操作现有节点创建新节点遍历节点树修改节点属性和样式事件处理实践应用动态创建表格动态更新列表 前言
DOM#xff08;文档…
博主小猫娃来啦 文章核心DOM节点操作手册你需要了解的一切 文章目录 前言DOM基础知识操作现有节点创建新节点遍历节点树修改节点属性和样式事件处理实践应用动态创建表格动态更新列表 前言
DOM文档对象模型是一种用于表示和操作HTML、XML和SVG文档的编程接口。它将网页文档解析为一个由节点组成的树形结构每个节点代表文档中的一个元素、属性、文本或其他内容。
DOM是很重要的因为它让我们能够使用JavaScript等脚本语言直接操控网页内容实现动态、交互性强的网页效果。通过DOM我们可以改变网页的样式和结构响应用户的操作并且实现数据的动态加载和更新。这样就能够让网页更加生动有趣提升用户体验。同时DOM的标准化也保证了开发者在不同浏览器下的兼容性使得开发更加便捷和可靠。
本文深层次就DOM的相关操作展开论述。
DOM基础知识
节点的类型 元素节点Element Node表示HTML中的标签例如div、p、a等。元素节点是文档树的主要成分可以包含其他节点作为子节点。 文本节点Text Node表示HTML标签中的文本内容。例如在p标签中的一段文字就是文本节点。 注释节点Comment Node表示HTML文档中的注释内容。注释节点以!--开头以--结尾。 属性节点Attribute Node表示HTML元素的属性。例如class、id、src等属性都属于属性节点。 文档节点Document Node表示整个HTML文档的根节点。在DOM树中文档节点是所有其他节点的最高级父节点。 文档片段节点Document Fragment Node表示一个独立的文档片段。文档片段节点可以包含其他节点常用于临时存储和处理一系列节点。 获取节点的手段
通过ID获取节点可以使用getElementById()方法传入元素的ID来获取对应的节点。例如
var myElement document.getElementById(myId);通过类名获取节点可以使用getElementsByClassName()方法传入类名来获取所有具有相同类名的节点组成的集合。该方法返回一个类数组对象。例如
var myElements document.getElementsByClassName(myClass);通过标签名获取节点可以使用getElementsByTagName()方法传入标签名来获取所有具有相同标签名的节点组成的集合。该方法返回一个类数组对象。例如
var myElements document.getElementsByTagName(div);通过选择器获取节点可以使用querySelector()和querySelectorAll()方法来使用CSS选择器获取节点。querySelector()方法返回第一个匹配的节点querySelectorAll()方法返回所有匹配的节点组成的集合。例如
var myElement document.querySelector(#myId);
var myElements document.querySelectorAll(.myClass);操作现有节点
我们通过操作DOM树来添加、删除和替换节点从而动态修改网页的内容和结构。需要注意的是这些方法都需要通过获取到相应的父节点才能进行操作。
添加节点
appendChild()用于将一个新节点添加为目标节点的最后一个子节点。例如
var parentElement document.getElementById(parent);
var newElement document.createElement(div);
parentElement.appendChild(newElement);insertBefore()用于在目标节点的特定子节点之前插入一个新节点。例如
var parentElement document.getElementById(parent);
var targetElement document.getElementById(target);
var newElement document.createElement(div);
parentElement.insertBefore(newElement, targetElement);删除节点
removeChild()用于从父节点中移除指定的子节点。例如
var parentElement document.getElementById(parent);
var childElement document.getElementById(child);
parentElement.removeChild(childElement);替换节点
replaceChild()用一个新节点替换目标节点的子节点。例如
var parentElement document.getElementById(parent);
var targetElement document.getElementById(target);
var newElement document.createElement(div);
parentElement.replaceChild(newElement, targetElement);创建新节点
createElement()使用指定的标签名创建一个新的元素节点。可以通过document.createElement()方法来实现。例如
var newElement document.createElement(div);这将创建一个新的div元素节点。
createTextNode()创建一个包含指定文本内容的新文本节点。可以通过document.createTextNode()方法来实现。例如
var textNode document.createTextNode(Hello, world!);这将创建一个包含文本内容Hello, world!的文本节点。
其他创建方法除了上述常用方法外还有其他一些特定目的的创建方法。例如 createDocumentFragment()创建一个空的文档片段节点。文档片段节点可以用来存储临时的DOM节点然后一次性插入到文档中。createAttribute()创建一个属性节点用于为元素节点添加属性。createComment()创建一个注释节点用于在DOM中添加注释内容。 这些创建方法提供了灵活的方式来创建不同类型的节点并根据需求灵活使用。 遍历节点树
A. parentNode 和 childNode
parentNode属性用于获取当前节点的父节点。通过访问该属性我们可以获取到某个节点在DOM树中的直接父节点。childNodes属性返回一个包含所有子节点的集合以类数组对象形式表示。注意该集合包含所有类型的节点包括元素节点、文本节点、注释节点等。
B. firstChild、lastChild、nextSibling、previousSibling
firstChild属性表示当前节点的第一个子节点如果没有子节点则返回null。lastChild属性表示当前节点的最后一个子节点如果没有子节点则返回null。nextSibling属性表示当前节点的下一个兄弟节点即与当前节点具有相同父节点的相邻节点。previousSibling属性表示当前节点的上一个兄弟节点即与当前节点具有相同父节点的前一个节点。
举几个例子看起来直观一些
var parentElement document.getElementById(parent);// 获取父节点
var parentNode parentElement.parentNode;// 获取子节点集合
var childNodes parentElement.childNodes;// 获取第一个子节点和最后一个子节点
var firstChild parentElement.firstChild;
var lastChild parentElement.lastChild;// 遍历兄弟节点
var siblingNode parentElement.firstChild;
while (siblingNode) {// 处理兄弟节点console.log(siblingNode);siblingNode siblingNode.nextSibling;
}修改节点属性和样式
通过设置属性和样式我们可以动态地调整节点的特征从而实现网页的动态效果。
修改属性
setAttribute(name, value)设置节点的指定属性名为相应的值。例如
var myElement document.getElementById(myId);
myElement.setAttribute(class, newClass);直接修改属性值通过直接赋值的方式修改节点的属性值。例如
var myElement document.getElementById(myId);
myElement.className newClass;修改样式
直接修改style属性通过修改节点的style属性来设置具体的CSS样式。例如
var myElement document.getElementById(myId);
myElement.style.color red;
myElement.style.fontSize 20px;小栗子
!DOCTYPE html
html
head
style.highlight {color: red;font-weight: bold;}
/style
/head
bodyp idmyParagraphHello, world!/pscriptvar myElement document.getElementById(myParagraph);// 修改属性myElement.setAttribute(class, highlight);// 修改样式myElement.style.fontSize 25px;/script
/body
/html事件处理
添加事件监听器 addEventListener(event, handler)通过调用元素节点的addEventListener()方法来添加事件监听器。其中event参数是事件类型如click、mouseover等handler参数是事件触发时执行的函数。例如
var myButton document.getElementById(myButton);
myButton.addEventListener(click, function() {// 处理点击事件的逻辑console.log(Button clicked!);
});事件冒泡和捕获 事件冒泡和捕获是DOM事件模型中的两个阶段。在事件冒泡阶段事件从最具体的元素例如被点击的按钮向上级元素例如包含该按钮的容器传播而在事件捕获阶段事件则从上级元素向最具体的元素传播。在实践中默认情况下大多数事件都是在冒泡阶段进行处理。
举个栗子
!DOCTYPE html
html
head
/head
bodybutton idmyButtonClick Me/buttonscriptvar myButton document.getElementById(myButton);// 添加事件监听器myButton.addEventListener(click, function(event) {console.log(Button clicked!);// 阻止事件冒泡event.stopPropagation();});document.body.addEventListener(click, function() {console.log(Body clicked!);});/script
/body
/html我们给按钮元素添加了一个点击事件的监听器当按钮被点击时会输出Button clicked!“。同时我们还给页面的 body 元素添加了一个点击事件的监听器当页面任意位置被点击时会输出Body clicked!”。这就是dom在事件处理中的魅力。 实践应用
动态创建表格
var table document.createElement(table);for (var i 0; i 3; i) {var row document.createElement(tr);for (var j 0; j 3; j) {var cell document.createElement(td);var cellText document.createTextNode(Row i , Col j);cell.appendChild(cellText);row.appendChild(cell);}table.appendChild(row);
}document.body.appendChild(table);我们通过dom操作动态地创建了一个3x3的表格并将其添加到了页面的 body 元素中。
动态更新列表
var list document.createElement(ul);for (var i 0; i 5; i) {var item document.createElement(li);var itemText document.createTextNode(Item i);item.appendChild(itemText);list.appendChild(item);
}document.body.appendChild(list);我们创建了一个包含5个列表项的无序列表并将其添加到页面的 body 元素中。
除了动态创建表格和更新列表之外DOM还可以用于许多其他实际应用。例如 动态加载数据通过JavaScript和DOM可以实现异步加载数据并将其动态插入到网页中从而实现动态内容的更新。 实现动画效果通过修改DOM节点的样式和位置可以实现各种动画效果如淡入淡出、滑动等。 表单验证可以使用DOM来获取表单元素的值并进行验证和处理以确保用户输入的准确性和完整性。
