- 浏览: 23723 次
- 性别:
- 来自: 吉林
最新评论
-
zhangfan1990:
楼主的文章有启发啊
JavaScript原型链 -
s2640226szm:
写的不错,理解了原型链
JavaScript原型链
说说下面几个方法:
getElementById,
getElementsByName,
getElementsByTagName
getElementsByClassName
querySelector
querySelectorAll
一、getElementById
语法: obj= document.getElementById( sID )
参数: sID : 必选项。字符串(String)。
返回值: obj: 对象(object)。
根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象,则返回该组对象中的第一个。如果无符合条件的对象,则返回 null。
这个方法再简单不过,不过在IE上还是可能会遇到麻烦,那就是id与name混淆的问题请参照IE中id与name的BUG
二、 getElementsByName
语法: objNodeList = document.getElementsById( name )
参数: name: 必选项。字符串(String)。
返回值: objNodeList : 元素数组
document.getElementsByName(name)该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性。
另外,因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。如果一个文档中有两个以上的标签NAME相同,那么getElementsByName()就可以取得这些元素组成一个数组。
getElementsByName方法在IE浏览器下也存在id与name混淆的问题。
三、getElementsByTagName
语法: objNodeList = document.getElementsByTagName(tagname); 或
= document.getElementById('ID').getElementsByTagName("tagname");
参数: tagname: 必选项。字符串(String)。
返回值: objNodeList : 元素数组
getElementsByTagName() 方法会使用指定的标签名返回所有的元素(作为一个节点列表),这些元素是您在使用此方法时所处的元素的后代,这一点于getElementById和getElementsByName有很大的不同。如下例子:
这段代码会弹出两个提示框内容分别为 11,22。
四、getElementsByClassName
语法: objNodeList = document.getElementsByClassName(class); 或
= document.getElementById('ID').getElementsByClassName("class");
参数: class: 必选项。字符串(String)。
返回值: objNodeList : 元素数组
getElementsByClassName方法在标准浏览器中都已经实现,它的特点与getElementsByTagName。
IE这个怪胎没有这个方法,需要我们自己动手。具体的解决方法推荐大家去看这篇博客document.getElementsByClassName的理想实现
五、querySelector和querySelectorAll
语法: objNodeList = document.querySelectorAll(cssselecter); 或
= document.getElementById('ID').querySelectorAll("cssselecter");
参数: cssselecter: 必选项。字符串(css选择器)。
返回值: objNodeList : 元素数组
querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素。两者不同的是querySelector返回的是一个匹配对象,querySelectorAll返回的一个集合(objNodeList )。
目前支持他们的浏览器包括。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera等。
例子如下
在使用中querySelector 和querySelectorAll 各浏览器的实现略有差别,也会存在一些潜在的BUG。等碰到了再总结进来。
getElementById,
getElementsByName,
getElementsByTagName
getElementsByClassName
querySelector
querySelectorAll
一、getElementById
语法: obj= document.getElementById( sID )
参数: sID : 必选项。字符串(String)。
返回值: obj: 对象(object)。
根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象,则返回该组对象中的第一个。如果无符合条件的对象,则返回 null。
这个方法再简单不过,不过在IE上还是可能会遇到麻烦,那就是id与name混淆的问题请参照IE中id与name的BUG
二、 getElementsByName
语法: objNodeList = document.getElementsById( name )
参数: name: 必选项。字符串(String)。
返回值: objNodeList : 元素数组
document.getElementsByName(name)该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性。
另外,因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。如果一个文档中有两个以上的标签NAME相同,那么getElementsByName()就可以取得这些元素组成一个数组。
getElementsByName方法在IE浏览器下也存在id与name混淆的问题。
三、getElementsByTagName
语法: objNodeList = document.getElementsByTagName(tagname); 或
= document.getElementById('ID').getElementsByTagName("tagname");
参数: tagname: 必选项。字符串(String)。
返回值: objNodeList : 元素数组
getElementsByTagName() 方法会使用指定的标签名返回所有的元素(作为一个节点列表),这些元素是您在使用此方法时所处的元素的后代,这一点于getElementById和getElementsByName有很大的不同。如下例子:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id='area'> <input type="text" name="aaa" value="11"/> <input type="text" name="aaa" value="22"/> </div> <input type="text" name="aaa" value="33"/> </body> <script type="text/javascript" charset="UTF-8"> var domsArr = document.getElementById('area').getElementsByTagName("input"); for( var i = 0, len = domsArr.length; i < len; i++){ alert(domsArr[i].getAttribute('value')); } </script> </html>
这段代码会弹出两个提示框内容分别为 11,22。
四、getElementsByClassName
语法: objNodeList = document.getElementsByClassName(class); 或
= document.getElementById('ID').getElementsByClassName("class");
参数: class: 必选项。字符串(String)。
返回值: objNodeList : 元素数组
getElementsByClassName方法在标准浏览器中都已经实现,它的特点与getElementsByTagName。
IE这个怪胎没有这个方法,需要我们自己动手。具体的解决方法推荐大家去看这篇博客document.getElementsByClassName的理想实现
五、querySelector和querySelectorAll
语法: objNodeList = document.querySelectorAll(cssselecter); 或
= document.getElementById('ID').querySelectorAll("cssselecter");
参数: cssselecter: 必选项。字符串(css选择器)。
返回值: objNodeList : 元素数组
querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素。两者不同的是querySelector返回的是一个匹配对象,querySelectorAll返回的一个集合(objNodeList )。
目前支持他们的浏览器包括。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera等。
例子如下
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id='area'> <input type="text" class="bbb" name="aaa" value="11"/> <input type="text" class="bbb" name="aaa" value="22"/> </div> <input type="text" class="bbb" name="aaa" value="33"/> </body> <script type="text/javascript" charset="UTF-8"> var domsArr = document.getElementById('area').querySelectorAll(".bbb"); for( var i = 0, len = domsArr.length; i < len; i++){ alert(domsArr[i].getAttribute('value')); } var dom = document.querySelector("body>[name='aaa']"); alert(dom.getAttribute('value')); </script> </html>
在使用中querySelector 和querySelectorAll 各浏览器的实现略有差别,也会存在一些潜在的BUG。等碰到了再总结进来。
发表评论
-
js 垃圾回收
2012-10-06 11:42 905在IE浏览器下可以由JS程序调用垃圾回收函数CollectGa ... -
open-flash-chart 2
2012-09-22 22:40 796最近研究了open-flash-chart2这个报表组件,组件 ... -
[转]createElement与createDocumentFragment的点点差别
2012-09-08 21:33 2593在DOM操纵里,createElement是创建一个新的节点, ... -
一段优美的正则
2012-09-08 20:42 1288记录下来,一段优美的 ... -
IE 中的id 与name
2012-09-07 16:09 2098火星浏览器(IE)又抽风了表现如下,在IE7下,使用docum ... -
compareDocumentPosition与contains
2012-09-07 13:26 1672研究KISSY 1.3RC源代码DOM/traversal 发 ... -
tabindex
2012-09-06 17:26 0http://www.cnblogs.com/rubylouv ... -
IE的href 设值BUG
2012-09-06 17:21 1350今天研究KISSY1.3 RC源代码时看到这样一段代码,如下: ... -
IE下的条件编译
2012-09-06 14:24 954在IE浏览器下,可以把部分只针对IE的javascript代码 ... -
判断IE5~IE7
2012-09-06 14:17 0判断IE5~7可以通过检测:document.document ... -
property 和attribute
2012-09-06 13:22 0aaaasdfaaaaa -
KISSY1.3.0RC源码分析一Kissy.js
2012-08-25 18:28 0kissy.js从名字即可以看出它是kissy框架最核心的文件 ... -
javascript闭包
2011-08-22 19:44 946javascript的闭包特性非常强大,但也常常成为bug的滋 ... -
javascript作用域
2011-08-22 19:37 736今天看到一篇非常帮的文章,博主仅使用几个例子就将javascr ... -
框架结构锁屏实现
2011-08-22 19:30 1857如果大家不知道什么是锁屏,可以去163信箱看一看,用途是你 ... -
SWFObject
2011-08-04 16:17 896SWFObject: 基于Javascript的Flash媒体 ... -
TrimQuery
2011-08-04 12:58 1381TrimQuery引擎是TrimPath开源项目 ... -
JavaScript原型链
2011-07-29 16:18 1562声明,文章中用到的专业名词可能并不标准。请同学指正。 ...
相关推荐
这两个方法的引入,使得开发者可以如同使用CSS选择器一样方便地定位和操作DOM元素,尤其在处理复杂的DOM结构时,效率提升明显。 **querySelector** `querySelector`方法允许你根据传入的CSS选择器,查找文档或指定...
原生的强大 DOM 选择器 querySelector 介绍 DOM 选择器 querySelector 是一种原生的 JavaScript 方法,用于快速查找和选择 DOM 元素。它的出现解决了传统 JavaScript 开发中查找 DOM 的问题,使得开发者可以快速地...
区别在于,原生DOM对象提供了底层的、直接的访问,这意味着你可以对元素进行更细致的控制,比如修改属性、添加事件监听器等。而jQuery对象则提供了更高的抽象层次,使得代码更简洁,同时也处理了许多浏览器兼容性...
`querySelector` 和 `querySelectorAll` 是JavaScript中用于DOM操作的两个强大方法,它们允许开发者使用CSS选择器的方式来选取DOM元素,极大地提高了代码的可读性和效率。这两个方法在现代浏览器中得到了广泛支持,...
`querySelector()`和`querySelectorAll()`是两个常用的DOM选择器,它们分别返回匹配CSS选择器的第一个元素和所有元素。`getElementById()`, `getElementsByClassName()`, 和 `getElementsByTagName()`则是更传统的...
总结来说,创建一个原生JavaScript的input表单城市选择器,主要涉及HTML的`<input>`标签、CSS样式设计和JavaScript的事件监听、数据处理及DOM操作。这样的选择器不仅可以提高用户输入效率,还能提供良好的交互体验,...
在JavaScript中,DOM操作是前端开发的核心任务之一,而querySelector是一个非常强大的DOM选择器,它使得在JavaScript中查找特定的DOM元素变得简单高效。querySelector方法允许开发者使用CSS选择器来选取文档中的单个...
在移动端应用开发中,省市区级联选择器是一种常见的组件,用于用户输入其所在地理位置。这种功能在电商、服务预订等各类应用中都有广泛应用。在本项目中,我们需要实现一个可嵌入H5的级联选择器,以适应手机端的滑动...
在网页开发中,日期选择器是一个非常常见的组件,它允许用户方便地选择日期,常用于表单填写或事件安排等功能。"JS日期选择器(兼容IE,FireFox,Oprea,chrome等主流浏览器)"是一个专门为JavaScript环境设计的,旨在...
解释器模式(Interpreter):定义一种语法格式,...匹配原理:浏览器在匹配CSS选择符时是按照从右到左匹配的,所以实现自己的DOM选择器时匹配行为也应该和浏览原生匹配行为一致。 代码: 代码如下: (function (ns) { /*
综上所述,原生JavaScript日历选择器插件的实现涉及到了JavaScript的DOM操作、日期处理、CSS样式设计、动态HTML生成、事件处理等多个核心技能,是一个综合性的前端开发练习。通过这样的实践,开发者可以深入理解Web...
9. **性能优化**:为了提高选择器的性能,我们可以采用缓存策略,避免不必要的数据请求,或者使用虚拟DOM技术减少DOM操作的开销。 10. **无障碍性**:对于视力障碍或使用辅助技术的用户,确保选择器符合无障碍性...
原生JavaScript时间日历选择器插件是一种无需依赖外部库如jQuery等,完全基于JavaScript语言实现的日期和时间选择工具。这种插件通常用于网页表单中,方便用户输入日期和时间信息,提高用户体验。在现代Web开发中,...
本文详细介绍了如何...通过阅读本文,我们可以学习到如何利用JavaScript的原生功能来模拟jQuery选择器,这不仅有助于深入理解DOM操作的原理,也有助于在特定情况下减少项目对外部库的依赖,从而优化性能和加载时间。
本资源"2019最新原生js实现的一款年月日日期选择特效插件"提供了一个用纯JavaScript编写的日期选择器,它能够帮助开发者在网页中添加功能丰富的日期选择功能,而无需依赖任何外部库或框架。 这个插件的核心在于其...
在JavaScript中,我们可以使用原生DOM操作、jQuery库或者其他前端框架(如React、Vue或Angular)来实现级联选择器。这里我们以原生JS为例,简要介绍其基本实现步骤: 1. **创建HTML结构**:首先,我们需要创建一个...
【原生JS仿携程网机票城市选择器代码详解】 在前端开发中,用户友好的交互设计是提升用户体验的关键。携程网的机票城市选择器就是一个很好的例子,它通过高效的搜索、筛选功能,使得用户能快速找到所需的目的地。...
- 封装后的选择器函数仍应保留原生DOM选择器的语义。 - 考虑到代码的可维护性和可读性,封装函数应当简洁明了。 - 测试封装后的函数在不同浏览器下的兼容性,确保其稳定运行。 以上即为文章中介绍的Javascript封装...