`
easy0917
  • 浏览: 260343 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

使用JavaScript获取节点的方法总结(转载)

    博客分类:
  • JS
 
阅读更多
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:获取已知节点的父节点,火狐和IE都可以 。
(2)childNode.parentElement: 获取已知节点的父节点,只有IE都可以 。
上面提到的方法,只是一些基本的方法,如果使用了Prototype等JavaScript库,可能还获得其他不同的方法,例如通过节点的 class获取等等。不过,如果能够灵活运用上面的各种方法,相信应该可以应付大部分的程序

分享到:
评论

相关推荐

    JavaScript获取HTML DOM节点元素的方法的总结

    ### 二、通过父节点获取子节点 #### 1. `parentObj.firstChild` 获取父节点`parentObj`的首个子节点。这个方法支持链式调用,即`parentObj.firstChild.firstChild`等,可以深入访问多级子节点。 #### 2. `...

    javascript获取节点

    JavaScript获取节点是Web开发中的基础技能,特别是在使用jQuery库时更为常见。JavaScript原生提供了多种方法来操作DOM(文档对象模型)中的节点,而jQuery则提供了更为简洁和跨浏览器的API,使得这些操作更为便捷。 ...

    javascript 节点

    - **选择节点**:可以通过`getElementById()`、`getElementsByClassName()`、`getElementsByTagName()`等方法获取已存在的节点。 - **修改节点**:可以通过修改节点的属性或子节点来改变节点的状态。 - **删除节点**...

    JavaScript实现获取dom中class的方法

    在讲解的过程中,涉及到JavaScript操作DOM节点的一些基本技巧和方法,如使用`getElementsByClassName`和`getElementsByTagName`等。 知识点详细说明如下: 1. `getElementsByClassName` 方法: `...

    javascript获取网页中指定节点的父节点、子节点的方法小结.docx

    ### JavaScript 获取网页中指定节点的父节点、子节点的方法小结 #### 概述 在进行Web前端开发的过程中,我们经常需要对DOM树中的特定节点进行操作,比如更新其样式或内容。为了实现这一目标,JavaScript 提供了一...

    javascript获取计算机硬件信息

    总结来说,虽然JavaScript直接获取计算机硬件信息的能力有限,但结合WebAssembly、Web Workers等技术以及jQuery的辅助,我们可以构建出一个能够获取并展示部分硬件信息的应用。然而,考虑到隐私和安全因素,这种方法...

    javascriptDom节点API个人总结.docx

    ### JavaScript DOM 节点 API 个人总结 #### 文档概述 本文档旨在总结JavaScript中DOM(Document Object Model)节点API的基本用法及其在实际开发中的应用。通过深入理解这些API,开发者能够更加灵活地操控网页文档...

    javascriptjs创建节点

    可以使用 createElement()、createTextNode() 和 cloneNode() 等方法来创建节点,并使用 appendChild()、insertBefore() 等方法将节点添加到文档中。需要注意的是,创建的节点不会自动添加到文档中,需要手动将其...

    JavaScript DOM节点操作方法总结

    本文将总结介绍JavaScript中有关DOM节点操作的主要方法。 首先,DOM节点主要分为三种类型:元素节点、属性节点和文本节点。元素节点对应HTML中的标签,属性节点对应标签中的属性,而文本节点包含标签之间的文本信息...

    js获取客户端字体列表

    获取客户端字体列表的方法有很多,但是今天我们将讨论使用 JavaScript 获取客户端字体列表的方法。 使用 Flash 获取客户端字体列表 在 Flash 中,我们可以使用 ActionScript 获取客户端字体列表。首先,我们需要...

    javascript移出节点removeChild()使用介绍.docx

    ### JavaScript 移除节点 `removeChild()` 方法使用详细介绍 #### 一、`removeChild()` 方法简介 在Web开发中,经常需要对DOM树进行各种操作,包括添加、修改和删除节点。JavaScript提供了一系列方法来帮助开发者...

    javascript 拷贝节点cloneNode()使用介绍.docx

    ### JavaScript 拷贝节点cloneNode()使用介绍 在JavaScript中,`cloneNode()`方法是DOM(Document Object Model)操作中的一个重要功能,主要用于复制(克隆)DOM树中的节点及其属性。这对于创建复杂的用户界面或者...

    JavaScript调用WebService实例总结

    这段代码获取了名为"ds"的元素集合,并提取了每个元素的"KeShimch"子节点的文本内容。 5. 版本差异: 在.NET Framework 1.0和1.1中,默认情况下,WebService只支持HttpPost协议。为了启用HttpGet,你需要在机器配置...

    文本框获取节点文本框获取节点

    在IT行业中,文本框获取...总结来说,文本框获取节点是前端开发中的基础技能,涉及到HTML结构的理解、DOM操作、事件监听以及JavaScript编程。熟练掌握这些技能,能够帮助开发者创建更加用户友好且功能丰富的网页应用。

    JavaScript解析XML的方法总结.

    然而,需要注意的是,`getElementsByTagName`方法返回的是一个节点列表,所以通常需要通过索引访问特定的节点。此外,`getAttribute`方法用于获取指定元素的属性值。 #### 4. 动态生成下拉列表 在具体的应用场景中...

    JavaScript获取DOM元素的11种方法总结

    令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过): 1. 通过顶层document节点获取: (1) document.getElementById(elementId):该方法通过...

    JavaScript给每一个li节点绑定点击事件的实现方法

    通过本篇内容的介绍,我们可以总结出在JavaScript中给每个li节点绑定点击事件的几种常用方法。首先,通过`getElementsByTagName`获取节点集合。其次,使用for循环遍历集合中的每一个节点,并为它们分别绑定事件。第...

    JavaScript节点.pdf

    如果是,这意味着没有其他元素在其后面,因此我们应该使用`appendChild()`方法将`newElement`添加到父节点的末尾。 3. 如果`targetElement`不是其父节点的最后一个子元素,我们查找它的下一个兄弟元素(`target...

    获取HTML DOM节点元素的方法的总结

    令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过): 1. 通过顶层document节点获取: (1) document.getElementById(elementId):该方法通过...

Global site tag (gtag.js) - Google Analytics