`
jeelee
  • 浏览: 637851 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

js dom元素查找方法的总结

IE 
阅读更多
js dom元素查找方法的总结
getElementById:这个最司空见惯的根据id定位对象的方式
getElementsByName:依据name(名称)获取一组对象的集合
getElementsByTagName:依据标签名来获得一组对象聚集
getElementsByClassName:实在不存在这个方式
nextSibling:获得下一个元素对象(大概兼容性存在点问题)
previousSibling:获取上一个元素对象(兼容性有点问题)
parentElement:获取当前元素的父对象
children:所有子元素对象的聚集
firstChild:第一个子节点
lastChild:最后一个子节点
parentNode:父节点
childNodes:所有子节点的聚集
这里须要注意的是:parentNode 、childNodes、firstChild、lastChild、nextSibling、previousSibling 这些节点的定位方式,在某些时候IE和FF返回的成果竟是迥然不同的,不得不在此表现对IE的鄙视一下!
分享到:
评论

相关推荐

    .遍历DOM元素

    在前端开发中,DOM(Document Object Model)是...总结,遍历DOM元素是前端开发中的常见任务,掌握不同的遍历方法及其应用场景,能有效提高代码质量和性能。理解DOM遍历的原理并合理运用,是提升前端开发能力的关键。

    JS选取DOM元素的简单方法

    在JavaScript中,选取DOM元素是Web开发中的基本操作,它涉及到如何高效地定位页面上的特定元素。本文将详细探讨几种常见的DOM元素选取方法,包括通过ID、名称、标签名、CSS类以及CSS选择器。 1. 通过ID选取元素...

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

    在实际应用中,开发者通常会结合这些方法来定位和操作特定的DOM元素。例如,先通过`getElementById`找到一个父节点,然后使用`getElementsByTagName`或`children`来筛选出特定类型的子元素,最后利用`...

    js_HTML_Dom操作练习

    10. **动画与定时器**:结合`setTimeout()`和`setInterval()`函数,我们可以实现简单的DOM元素动画效果。例如,改变元素的位置或透明度,以创建动态视觉效果。 这个练习项目会涵盖以上这些基本概念,通过实际操作,...

    JavaScript实现获取dom中class的方法

    本文主要介绍了如何使用JavaScript来获取DOM(文档对象模型)中具有特定class的DOM元素。在讲解的过程中,涉及到JavaScript操作DOM节点的一些基本技巧和方法,如使用`getElementsByClassName`和`...

    经典之作javascript dom编程艺术源码

    JavaScript DOM编程艺术是一本深入解析DOM操作的经典书籍,它的源码提供了丰富的实例,帮助开发者深入理解如何使用原生JavaScript高效地操纵网页元素。DOM(Document Object Model)是HTML和XML文档的标准表示,它将...

    Jquery方式获取iframe页面中的 Dom元素

    这个函数使用jQuery的方法来访问iframe中的DOM元素。首先,通过“$("#frame_1")”选择器找到id为“frame_1”的iframe元素。然后,通过调用“.contents()”方法获取iframe的文档内容,这会返回iframe的Document对象。...

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

    本文总结了11种常见的JavaScript获取DOM元素的方法,并将它们分为四大类。这些方法可以帮助开发者高效准确地选取DOM元素。 首先,我们可以根据顶层document节点来获取元素。这类方法通常用于直接根据元素的某些属性...

    原生JS经典小项目-DOM练习

    在本项目"原生JS经典小项目-DOM练习"中,我们将深入探讨JavaScript与DOM(文档对象模型)的交互,这是Web开发中的核心技能。DOM是HTML和XML文档的编程接口,它允许我们通过JavaScript来查找、修改和操作页面元素。在...

    随书光盘+PDF JavaScript DOM编程艺术(第2版)-源代码2.5MB PDF114MB .zip

    通过JavaScript,我们可以利用DOM API来操作这个树形结构,包括查找、创建、修改和删除文档元素。例如,我们可以用`document.getElementById`方法获取特定ID的元素,或者用`appendChild`方法向页面添加新的元素。 ...

    前端开源库-jsdom-little

    2. **执行JavaScript**:在创建的DOM环境中,可以执行JavaScript代码,就像在浏览器环境中一样,比如修改DOM元素、触发事件等。 3. **网络请求**:通过集成`request`库,`jsdom`可以模拟浏览器的HTTP请求,加载外部...

    unigrid添加html5 dom元素.rar

    4. **JavaScript与DOM交互**:通过JavaScript,可以创建、查找、修改和删除DOM节点,如使用`document.createElement()`, `appendChild()`, `getElementById()`等方法。 5. **Unigrid与HTML5的结合**:可能涉及在...

    记录我的旅程之JavaScript Dom系列里面的所有例题

    在JavaScript中,访问DOM元素有多种方法。例如,`getElementById`用于获取具有特定ID的元素,`getElementsByClassName`和`getElementsByTagName`则分别根据类名和标签名找到元素集合。此外,`querySelector`和`...

    javascript dom2 源码及pdf

    比如,你可以用`document.getElementById()`查找指定ID的元素,`document.getElementsByTagName()`获取指定标签的所有元素,`element.style`对象则允许直接操作元素的CSS样式。此外,还有表单控件的访问和验证,以及...

    javascript DOM 编程艺术源码

    2. **元素访问**:`document.getElementById()`、`getElementsByTagName()`和`getElementsByClassName()`等方法用于查找页面上的特定元素。学会这些方法能帮助你精确地定位到需要操作的元素。 3. **属性操作**:...

    JavaScript实现获取某个元素相邻兄弟节点的prev与next方法

    本文实例讲述了JavaScript实现获取某个元素相邻兄弟节点的prev与next方法。分享给大家供大家参考,具体如下: /** * 获取相邻元素 * @param ele 参考物元素 * @param type 类型,上一个(1)or下一个(0) * @return ...

    尚硅谷_教学课件_JavaScriptDOM

    在“尚硅谷_教学课件_JavaScriptDOM”中,我们可以期待学习到关于DOM的基本概念、DOM树的构建以及如何利用JavaScript操作DOM元素的方法。 首先,DOM(Document Object Model)是一种标准,它将网页内容表示为一个...

    JavaScript DOM编程艺术 附录

    《JavaScript DOM编程艺术》这本书对于初学者来说非常友好,它不仅介绍了DOM的基本概念,还深入讲解了DOM的操作方法,包括创建、复制、插入、删除、替换、处理及查找节点等。本文将根据书中的内容摘要,重点解析DOM...

    JavaScriptDOM编程艺术

    4. **DOM节点**:包括元素节点、文本节点、属性节点等,每个节点都有自己的属性和方法,如`nodeValue`用于获取或设置文本节点的值,`parentNode`指向父节点,`childNodes`则返回子节点的集合。 5. **选择元素**:`...

    js dom 文档

    例如,`document`对象是访问整个文档的入口点,我们可以使用`getElementById()`、`getElementsByClassName()`、`getElementsByTagName()`等方法来查找特定的元素。一旦找到元素,我们可以通过`innerHTML`、`...

Global site tag (gtag.js) - Google Analytics