- 浏览: 543707 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (618)
- java (109)
- Java web (43)
- javascript (52)
- js (15)
- 闭包 (2)
- maven (8)
- 杂 (28)
- python (47)
- linux (51)
- git (18)
- (1)
- mysql (31)
- 管理 (1)
- redis (6)
- 操作系统 (12)
- 网络 (13)
- mongo (1)
- nginx (17)
- web (8)
- ffmpeg (1)
- python安装包 (0)
- php (49)
- imagemagic (1)
- eclipse (21)
- django (4)
- 学习 (1)
- 书籍 (1)
- uml (3)
- emacs (19)
- svn (2)
- netty (9)
- joomla (1)
- css (1)
- 推送 (2)
- android (6)
- memcached (2)
- docker、 (0)
- docker (7)
- go (1)
- resin (1)
- groovy (1)
- spring (1)
最新评论
-
chokee:
...
Spring3 MVC 深入研究 -
googleyufei:
很有用, 我现在打算学学Python. 这些资料的很及时.
python的几个实用网站(转的) -
hujingwei1001:
太好了找的就是它
easy explore -
xiangtui:
例子举得不错。。。学习了
java callback -
幻影桃花源:
太好了,謝謝
Spring3 MVC 深入研究
在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式、内容等。如何获取要更新的元素,是首先 要解决的问题。令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11 测试通过)。
1. 通过顶层document节点获取:
(1)document.getElementById(elementId) :该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法。如果页面上含有多个相同id的节点,那么只返回第一个节点。
如今,已经出现了如prototype、Mootools等多个JavaScript库,它们提供了更简便的方法:$(id),参数仍然是节点的 id。这个方法可以看作是document.getElementById()的另外一种写法,不过$()的功能更为强大,具体用法可以参考它们各自的 API文档。
(2)document.getElementsByName(elementName)
:该方法是通过节点的name获取节点,从名字可以看出,这个方法返回的不是一个节点元素,而是具有同样名称的节点数组。然后,我们可以通过要获取节点的
某个属性来循环判断是否为需要的节点。
例如:在HTML中checkbox和radio都是通过相同的name属性值,来标识一个组内的元素。如果我们现在要获取被选中的元素,首先获取该组元素,然后循环判断是节点的checked属性值是否为true即可。
(3)document.getElementsByTagName(tagName) :该方法是通过节点的Tag获取节点,同样该方法也是返回一个数组,例如:document.getElementsByTagName('A')将会返回页面上所有超链接节点。
在获取节点之前,一般都是知道节点的类型的,所以使用该方法比较简单。但是缺点也是显而易见,那就是返回的数组可能十分庞大,这样就会浪费很多时 间。那么,这个方法是不是就没有用处了呢?当然不是,这个方法和上面的两个不同,它不是document节点的专有方法,还可以应用其他的节点,下面将会 提到。
2、通过父节点获取:
(1)parentObj.firstChild :如果节点为已知节点(parentObj)的第一个子节点就可以使用这个方法。这个属性是可以递归使用的,也就是支持:
parentObj.firstChild.firstChild.firstChild...
的形式,如此就可以获得更深层次的节点。
(2)parentObj.lastChild :很显然,这个属性是获取已知节点(parentObj)的最后一个子节点。与firstChild一样,它也可以递归使用。在使用中,如果我们把二者结 合起来,那么将会达到更加令人兴奋的效果,即:parentObj.firstChild.lastChild.lastChild...
(3)parentObj.childNodes :获取已知节点的子节点数组,然后可以通过循环或者索引找到需要的节点。
注意 :经测试发现,在IE7上获取的是直接子节点的数组,而在Firefox2.0.0.11上获取的是所有子节点即包括子节点的子节点。
(4)parentObj.children :获取已知节点的直接子节点数组。
注意 :经测试,在IE7上,和childNodes效果一样,而Firefox2.0.0.11不支持。这也是为什么我要使用和其他方法不同样式的原因。因此不建议使用。
(5)parentObj.getElementsByTagName(tagName) :使用方法不再赘述,它返回已知节点的所有子节点中类型为指定值的子节点数组。例 如:parentObj.getElementsByTagName('A')返回已知的子节点中的所有超链接。
3、通过临近节点获取:
(1)neighbourNode.previousSibling :获取已知节点(neighbourNode)的前一个节点,这个属性和前面的firstChild、lastChild一样都似乎可以递归使用的。
(2)neighbourNode.nextSibling :获取已知节点(neighbourNode)的下一个节点,同样支持递归。
4、通过子节点获取:
(1)childNode.parentNode :获取已知节点的父节点。
上面提到的方法,只是一些基本的方法,如果使用了Prototype等JavaScript库,可能还获得其他不同的方法,例如通过节点的class获取等等。不过,如果能够灵活运用上面的各种方法,相信应该可以应付大部分的程序。
其中通过firstChild和lastChild获得HTML Node是不可取的。因为,根据浏览器的不同,firstChild有可能返回parentObj的属性对象。
发表评论
-
HTTP协议之multipart/form-data请求分析
2015-11-09 17:41 732原文地址:http://blog.csdn ... -
Servlet中的过滤器(拦截器)Filter与监听器Listener的作用和区别
2015-10-30 18:01 1016原文地址:http://blog.csdn.net/mmllk ... -
过滤器和拦截器的区别
2015-10-30 18:00 629原文地址:http://blog.163.com/hzd_lo ... -
过滤器、监听器、拦截器的区别
2015-10-30 17:59 556原文地址:http://blog.csdn.net/x_yp/ ... -
【JSP】让HTML和JSP页面不缓存的方法
2015-10-14 10:16 444原文地址:http://blog.csdn.net/juebl ... -
jsp去掉浏览器缓存
2015-10-14 09:21 588原文地址:http://bbs.csdn.net/topics ... -
pageContext对象的用法
2015-09-04 21:24 661原文地址:http://blog.csdn.net/warcr ... -
log4j日志文件乱码问题的解决方法
2015-01-06 18:11 786原文地址:http://blog.csdn.net/inkfi ... -
JEECMS 系统权限设计
2014-09-05 16:25 909原文地址:http://chinajweb.iteye.com ... -
使用servlet保存用户上传的文件到本地
2014-08-12 14:46 599原文地址:http://blog.csdn.net/shuwe ... -
Servlet 实现文件的上传与下载
2014-08-12 14:44 858原文地址:http://www.2cto.com/kf/201 ... -
android文件上传到服务器
2014-08-12 11:03 360代码非原创,fix了bug,完善的还是需要再思量: /** * ... -
常用社交网络(SNS、人人网、新浪微博)动态新闻(feed、新鲜事、好友动态)系统浅析
2014-08-05 15:09 899原文地址:http://blog.csdn.net/sunme ... -
Feed系统架构资料收集
2014-08-05 15:08 592原文地址:http://blog.csdn ... -
微博feed系统推拉模式和时间分区拉模式架构探讨
2014-08-05 14:47 377原文地址:http://www.csdn.net/articl ... -
spring 出错,Could not find acceptable representation
2014-08-03 14:41 1447原文地址:http://www.myexception.cn/ ... -
spring @ResponseBody 返回json格式有关问题
2014-08-03 14:20 599原文地址:http://www.myexception.cn/ ... -
httpclient上传文件及传参数
2014-07-27 14:02 1172原文地址:http://hyacinth.blog.sohu. ... -
在eclipse中把java工程变为web工程
2014-06-27 11:18 683项目上点鼠标右键->properties->Pro ... -
配置Tomcat直接显示目录结构和文件列表
2014-06-10 13:52 698配置Tomcat直接显示目录结构和文件列表 TomcatSe ...
相关推荐
JavaScript获取HTMLDOM节点元素的方法的总结
在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式、...令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过):
令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过)1. 通过顶层document节点获取: (1) document.getElementById(elementId) :该方法通过节点...
令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过): 1. 通过顶层document节点获取: (1) document.getElementById(elementId):该方法通过...
令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过): 1. 通过顶层document节点获取: (1) document.getElementById(elementId):该方法通过...
因为 DOM 的存在,这使我们可以通过 JavaScript 来获取、创建、修改、或删除节点。 NOTE:下面提供的例子中的 element 均为元素节点。 获取节点 父子关系 element[removed] element.firstChild/element.lastChild ...
JavaScript HTML DOM 节点列表 NodeList 对象是一个从文档中获取的节点列表 (集合) 。 NodeList 对象类似 NodeList 对象 length 属性 NodeList 对象 length 属性定义了节点列表中元素的数量。 实例 var ...
DOM定义了表示和修改文档的方法,不能修改css样式表,在js中使用DOM方法改变元素的css样式,实质上是在元素上添加行间样式。 DOM对象就是宿主对象,用来操作HTML和xml功能对象的集合。 xml——>xhtml——>html4.0...
gulp-svg2el Gulp 插件将传递的 HTML 转换为 Javascript $ npm install gulp-...该插件会转义源 HTML 中的所有相关字符,将制表符/空格折叠为单个空格并修剪结果以输出有效的 SVG DOM 元素。 ,由编写,用于项目 。
定位一个网页DOM元素,一般会以 id,class,name 作为标识符,通过 getElementById、getElementByName 、 querySelectorAPI来定位、获取指定元素。而针对一些无任何标识的节点,如 文本</sapn> 是否有方法定位到它们呢...
DOM 将HTML文档呈现为带有元素、属性和文本的树结构,即节点树。通过DOM,JS可创建动态的HTML,可以使网页显示动态效果并实现与用户的交互功能。JS能够改变页面中所有的HTML元素、属性和CSS样式,并对页面中所有事件...
《javascript dom编程艺术:第2版》讲述了javascript、dom 和html5 的基础知识,着重介绍dom 编程技术背后的思路和原则:平稳退化、渐进增强和以用户为中心等。这些概念对于任何前端web 开发工作都非常重要。本书将...
实际前端开发工作中,我们经常会遇到要获取某些元素...也因此,JavaScript可以通过DOM API获取元素节点,方法有如下几种:其中querySelector()和querySelectorAll()为ES5的元素选择方法 1、getElementById(): 接收一个
6.7.html 各种使用JavaScript获取复选框值的方法。 6.8.html JavaScript控制复选框。 6.9.html 复选框的JavaScript特效。 6.10.html JavaScript取单选框的值。 6.11.html JavaScript控制单选框...
也就是说,它不是JavaScript DOM的Python实现,也不是。 安装 要安装HTMLTree,请运行以下命令: pip install https://github.com/waylan/HTMLTree/archive/master.zip 请注意,这是当前的Alpha版软件,尚未托管在...
常见的获取元素的方法有3种,分别是通过元素ID、通过标签名字和通过类名字来获取。 getElementById DOM提供了一个名为getElementById的方法,这个方法将返回一个与之对应id属性的节点对象。使用的时候请注意区分大小...
最低限度 最小的dom实用工具。 友好的库,基于提供的实用程序。 ...domify HTML转换为元素; event -事件绑定; matches -选择器匹配检查; query -本机选择器查询支持 remove -将节点与其父节点