javascript DOM对象的学习实例代码

更新时间：2009年06月26日 13:19:03 作者：

<!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='images/album.gif'/>"; } </script> </head> <body onload="searchNode()"> <ul id="ulNode"> <li>java</li> <li>javascript</li> <li>CSS</li> </ul> <ul> <li id="liNode">ajax</li> <li>c#</li> <li>c++</li> </ul> <img src="https://www.jb51.net/images/logo.gif" title="小屋" alt="个人主页" /> <p>这是第一个节点</p> <div id="inner"><p>innerHTML的使用</p></div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

移动端点击图片放大特效PhotoSwipe.js插件实现
这篇文章主要为大家详细介绍了移动端点击图片放大特效PhotoSwipe.js插件实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
JS删除String里某个字符的方法
这篇文章主要介绍了JS删除String里某个字符的方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下
2019-06-06
原生JS实现《别踩白块》游戏（兼容IE）
本文主要介绍了原生JS实现《别踩白块》游戏（兼容IE）的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
javascript格式化指定日期对象的方法
这篇文章主要介绍了javascript格式化指定日期对象的方法,涉及javascript针对日期对象操作的相关技巧,非常具有实用价值,需要的朋友可以参考下
2015-04-04
JS中完美兼容各大浏览器的scrolltop方法
最近用到scrolloTop()想去获取滚动条距离顶部的距离，结果只有chrome下面可以正常的获取scrollTop，ff和ie下这个值都等于0，使得许多效果比如屏幕滚动等等均无法正常实现。究其原因是scrollTop()在各个浏览器中的兼容性问题，今天我们就来详细探讨下。
2015-04-04
正则表达式在js前端的15个使用场景梳理总结
本篇带来15个正则使用场景，按需索取，收藏恒等于学会！！有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
javascript css styleFloat和cssFloat
在写js操作css的过程中发现float属性在IE和firefox下对应的js脚本是不一样的，IE下对应得是 styleFloat，firefox,chorme,safari下对应的是cssFloat，可用in运算符去检测style是否包含此属性。
2010-03-03
JavaScript实现动态表格效果
这篇文章主要为大家详细介绍了JavaScript实现动态表格效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
详解Matlab中 sort 函数用法
这篇文章主要介绍了matlab中 sort 函数用法的相关资料,需要的朋友可以参考下
2016-03-03
javascript自动给文本url地址增加链接的方法分享
这篇文章主要介绍了javascript自动给文本url地址增加链接的方法，有需要的朋友可以参考一下
2014-01-01

javascript DOM对象的学习实例代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具