`
jeelee
  • 浏览: 630844 次
  • 性别: 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的鄙视一下!
分享到:
评论

相关推荐

    JS选取DOM元素的简单方法

    摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 今天试了下各种选取元素的方法的速度,用原生的方法...

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

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

    JavaScript DOM节点操作方法总结

    具体的查找方法如下: getElementByID() // 得到单个节点 getElementsByTagName() // 得到节点数组 NodeList getElementsByName() // 得到节点数组 NodeList 同时还可以利用元素节点的属性获取它的父子节点和文本...

    关于JavaScript DOM的学习总结.pdf

    关于JavaScript DOM的学习总结 JavaScript是一种广泛应用于Web开发的直译式脚本语言,它具有动态类型、弱类型和基于原型的特性。JavaScript引擎是浏览器的一部分,主要负责解析和执行JavaScript代码,赋予HTML网页...

    DOM和BOM的使用

    元素节点对象是指 DOM 中的元素节点对象,它提供了许多方法和属性,开发者可以通过这些方法和属性来操作文档的内容和结构。 innerHTML innerHTML 是指 DOM 中的 innerHTML 属性,它允许开发者通过 JavaScript 修改...

    关于JavaScript DOM的学习总结.docx

    JavaScript DOM的学习总结 JavaScript是一种广泛应用于互联网的直译式脚本语言,主要在浏览器环境中运行,赋予HTML网页动态功能。其动态类型、弱类型和基于原型的特性使其灵活且易于学习。JavaScript的核心部分包括...

    JavaScript HTML DOM元素 节点操作汇总

    在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类型 节点类型:元素 1 ,属性 2 ,文本 3 ,注释 8,文档 9...

    dom-siblings:查找 DOM 元素的兄弟元素,可以选择由 CSS 选择器过滤

    查找 DOM 元素的兄弟元素,可以选择通过 CSS 选择器进行过滤。 安装 npm install dom-siblings 应用程序接口 兄弟姐妹(元素,选择器) element : 一个 DOM 元素。 selector : CSS 选择器字符串。 var siblings...

    JavaScript中Dom操作实例详解.docx

    更多关于 JavaScript 相关内容感爱好的读者可查看本站专题:《JavaScript 操作 DOM 技巧总结》、《JavaScript 页面元素操作技巧总结》、《JavaScript 大事相关操作与技巧大全》、《JavaScript 查找算法技巧总结》、...

    JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法

    例如,`document`对象是整个HTML页面的根节点,而`getElementById`方法就是通过DOM接口来查找具有特定ID的元素。 在示例代码中,首先通过`getElementById`方法查找ID为"hw"的`<p>`元素,并显示其内容。这展示了如何...

    JavaScript 获取元素在父节点中的下标(推荐)

    了解了这个技巧后,你可以更自由地在原生JavaScript中处理DOM元素的位置信息,这对于编写高效、无依赖的JavaScript代码非常有用。在实际开发中,这种技能经常用于实现诸如滑动菜单、轮播图等交互效果。同时,这也是...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part1.rar

     12.3.5 构建DOM元素   12.4 添加事件——为人造select赋予生命   12.5 让表单绽放光彩   12.6 行为修正   12.6.1 z-index来救急   12.6.2 键盘控制及其他细节   12.6.3 select太大了吗   ...

    原生JS查找元素的方法(推荐)

    今天写了一个很简单、很粗暴的通过JS根据类来查找DOM元素。 为了降低它的粗暴等级(耗费性能)我给了三个等级。 首先性能最好的,适合FF,CH,IE8,通过querySelectorAll这个API。 其次是指定ID 最后只能全页面进行匹配...

    JS简单添加元素新节点的方法示例

    总的来说,这个示例提供了JavaScript操作DOM元素的基本方法,包括创建、添加、插入和克隆节点,这些都是构建动态网页的关键技能。通过理解并实践这些方法,开发者能够更加灵活地控制网页的动态表现。

    javascript基础之查找元素的详细介绍(访问节点)

    当然这些选择器都是jQuery扩展的一些方法,那么使用原生js时要怎样来查找元素呢?今天就来简单梳理下。DOM定义了多种查找元素的方法,除了我们常用的getElementById(),还有getElementsByTagName()和...

    原生的强大DOM选择器querySelector.pdf

    这两个方法的引入,使得开发者可以如同使用CSS选择器一样方便地定位和操作DOM元素,尤其在处理复杂的DOM结构时,效率提升明显。 **querySelector** `querySelector`方法允许你根据传入的CSS选择器,查找文档或指定...

    原生的强大DOM选择器querySelector介绍.docx

    DOM 选择器 querySelector 是一种原生的 JavaScript 方法,用于快速查找和选择 DOM 元素。它的出现解决了传统 JavaScript 开发中查找 DOM 的问题,使得开发者可以快速地查找到需要的节点。 querySelector 的优点是...

    dom-find:用于查找 DOM 元素的实用程序。 由 react-stickydiv 使用

    查找 DOM 实用程序用于查找 DOM 元素的实用程序。 由 var util = require ( 'dom-find' ) ;// util.findPos(document.getElementById("element"));// [0,100]// util.findPosRelativeToViewport(document....

    JS访问DOM节点方法详解

    本文实例讲述了JS访问DOM节点方法。分享给大家供大家参考,具体如下: 查找并访问节点 你可通过若干种方法来查找您希望操作的元素: 通过使用 getElementById() 和 getElementsByTagName() 方法 通过使用一个元素...

Global site tag (gtag.js) - Google Analytics