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:获取已知节点的父节点。
参考:http://www.cnblogs.com/seamar/archive/2011/07/25/2116197.html
相关推荐
本文将详细介绍几种常见的JavaScript获取节点的方法,并探讨如何读写属性节点。 首先,我们关注的是通过不同的方式来获取元素节点: 1. **通过ID获取元素**:这是最直接的方法,`getElementById()`函数接受一个...
2. document.getElementsByName(elementName):该方法是通过节点的 name 获取节点,从名字可以看出,这个方法返回的不是一个节点元素,而是具有同样名称的节点数组。然后,我们可以通过要获取节点的某个属性来循环...
本文实例讲述了js树插件zTree获取所有选中节点数据的方法。分享给大家供大家参考。具体分析如下: 由于刚接触Tree方面的东西。在网上看到了zTree,是中国人写的。所以API肯定是中文的。而且评论也很好。所以尝试用...
JavaScript获取节点是Web开发中的基础技能,特别是在使用jQuery库时更为常见。JavaScript原生提供了多种方法来操作DOM(文档对象模型)中的节点,而jQuery则提供了更为简洁和跨浏览器的API,使得这些操作更为便捷。 ...
详细介绍了js获取asp.net treeview 控件点击节点的值。点击treeview节点不提交网页
本文主要介绍如何使用JavaScript获取指定节点的父节点、子节点以及相邻节点的方法。 首先,我们可以从`document`节点开始获取元素。`document.getElementById()`是最常用的方法,通过元素的ID来精确获取元素。但...
以上就是通过JavaScript获取DOM中class元素的方法和相关知识点的介绍。这涉及到对DOM操作的理解和对特定方法的应用,对于前端开发者来说是一项基础且重要的技能。掌握了这些知识点,开发者可以更加灵活地处理页面...
JavaScript获取HTML DOM节点元素的方法是Web开发中的基础技能,尤其是在动态更新页面内容时。本文将对几种常见的DOM操作方法进行详细解释。 首先,我们可以通过顶层的`document`对象来获取元素: 1. `document....
本文实例讲述了JavaScript实现获取某个元素相邻兄弟节点的prev与next方法。分享给大家供大家参考,具体如下: /** * 获取相邻元素 * @param ele 参考物元素 * @param type 类型,上一个(1)or下一个(0) * @return ...
本文主要讨论了如何使用JavaScript获取元素,特别是获取父节点的方法。以下是详细的解释: 1. 通过顶层document节点获取: - `document.getElementById(elementId)`:这是最常用的方法,通过元素的ID来精确获取...
本文实例讲述了JavaScript获取表单内所有元素值的方法。分享给大家供大家参考。具体如下: 下面的JS代码可以遍历指定表单中的所有元素,并输出元素的值 <!DOCTYPE html> <html> <body> <form id=...
幸运的是,在 JavaScript 中有多种方法可以用来获取 DOM 节点,下面将对这些方法进行详细的介绍。 #### 一、通过 `document` 获取 1. **`document.getElementById(elementId)`** - **说明**:通过元素的 ID 来...
本文实例讲述了JS获取子节点、父节点和兄弟节点的方法。分享给大家供大家参考,具体如下: 一、js获取子节点的方式 1. 通过获取dom方式直接获取子节点 其中test的父标签id的值,div为标签的名字。...
在IT行业中,文本框获取节点是一个常见的操作,特别是在网页开发和前端编程中。文本框,通常指的是HTML中的`<input type="text">`元素或`<textarea>`元素,它们用于用户输入文本。获取这些节点是构建交互式网页、...
AjaxTree是一款基于AJAX技术实现的树形视图控件,其核心特性在于能够动态地通过服务器请求获取节点的子节点数据,从而避免一次性加载大量数据导致页面性能下降的问题。这一设计模式在网页应用中非常常见,尤其是在...
本综合案例通过"JS添加多个子节点方法综合案例.zip"中的四个文件——style.css(样式表)、我的足迹.html(HTML页面)、data.js(数据存储)、index.js(主要的JavaScript逻辑)展示了如何实现这一功能。下面将详细...
本篇文章将总结和介绍JavaScript中获取子节点、父节点、兄弟节点的方法,并提供两种获取兄弟节点的实现方式。 首先,了解一些DOM节点的基础知识是很有必要的。DOM节点是构成HTML文档的最小单元,包括元素节点、属性...
以上方法覆盖了大部分通过JavaScript获取DOM中指定节点的需求。在实际开发中,根据具体场景选择合适的方法是非常重要的。随着现代浏览器对CSS选择器的支持不断增强,使用如 `querySelector` 和 `querySelectorAll` ...