JavaScript DOM对象学习实例：节点获取与innerHTML操作
作者：像素漫游时间：2026-10-23 19:20:23浏览：520
本文通过具体代码实例，讲解JavaScript中DOM对象的基本操作。重点演示如何使用getElementsByTagName获取元素节点集合，以及如何利用innerHTML属性动态修改HTML内容，包括插入图片标签和文本节点，帮助开发者理解DOM节点获取与内容更新的核心机制。
DOM节点获取与innerHTML动态内容更新
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>DOM对象的学习</title> <script language="javascript" type="text/javascript"> function searchNode(){ /*文本节点*/ /*元素节点*/ /*属性节点*/ var nodes=document.getElementsByTagName("li"); alert("节点数"+nodes.length+"第一个节点元素的名称"+nodes[0].tagName+";第四个节点的第一个节点文本"+nodes[3].childNodes[0].nodeValue); var nodes2=document.getElementsByTagName("ul"); var subnodes=nodes2[1].getElementsByTagName("li"); alert("节点数"+subnodes.length+";第一个节点元素的名称"+subnodes[0].tagName+";第一个节点元素的第一个节点文本"+subnodes[0].childNodes[0].nodeValue); var nodeID=document.getElementById("liNode"); alert("节点的名称"+nodeID.tagName+";第一点节点的第一节点的文本"+nodeID.childNodes[0].nodeValue); //遍历元素 var ulNodes=document.getElementById("ulNode"); var DOMString=""; if(ulNodes.hasChildNodes()){ var subULNodes=ulNodes.childNodes; for(var i=0;i<subULNodes.length;i++){ DOMString=DOMString+subULNodes[i].childNodes[0].nodeValue+"\n"; } } alert(DOMString); //节点属性 var imgTitle=document.getElementsByTagName("img")[0]; var titleString=imgTitle.getAttribute("title"); var altString=imgTitle.getAttribute("alt"); alert(titleString+"\n"+altString); var p=document.createElement("p"); var text=document.createTextNode("这是第二个节点"); p.appendChild(text); document.body.appendChild(p); //innerHTML的使用 var inner=document.getElementById("inner"); alert(inner.innerHTML); inner.innerHTML="<img src="/uploads/20261023/40981d84422f6f1e268be5fb9ea181abadd4d0c6ae085bd847ae3fa944d7a54b.gif" /> <p>这是第一个节点</p> <div id="inner"><p>innerHTML的使用</p></div> </body> </html>注意：在引入外部JavaScript文件后，通常需要刷新页面才能确保脚本正确执行并生效。
作者最新文章
D3.js 处理大规模数据点的性能优化策略
2026-11-05 15:37:25
JS实现网页摄像头实时扫码：结合getUserMedia与jsQR教程
2026-11-05 15:27:28
D3.js v5 迁移到 v7 的 API 变更与注意事项
2026-11-05 11:57:17
使用 animate.js 实现多元素协同的序列动画
2026-11-04 22:27:53
JS拖拽排序时怎么添加平滑动画效果？FLIP技术实战
2026-11-04 10:12:22