`
ywxowen999
  • 浏览: 23723 次
  • 性别: Icon_minigender_1
  • 来自: 吉林
社区版块
存档分类
最新评论

原生的DOM选择器

阅读更多
说说下面几个方法:
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。等碰到了再总结进来。
分享到:
评论

相关推荐

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

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

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

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

    javascript 原生Dom对象和jQuery对象的联系和区别

    区别在于,原生DOM对象提供了底层的、直接的访问,这意味着你可以对元素进行更细致的控制,比如修改属性、添加事件监听器等。而jQuery对象则提供了更高的抽象层次,使得代码更简洁,同时也处理了许多浏览器兼容性...

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

    `querySelector` 和 `querySelectorAll` 是JavaScript中用于DOM操作的两个强大方法,它们允许开发者使用CSS选择器的方式来选取DOM元素,极大地提高了代码的可读性和效率。这两个方法在现代浏览器中得到了广泛支持,...

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

    `querySelector()`和`querySelectorAll()`是两个常用的DOM选择器,它们分别返回匹配CSS选择器的第一个元素和所有元素。`getElementById()`, `getElementsByClassName()`, 和 `getElementsByTagName()`则是更传统的...

    原生js input表单城市选择器代码

    总结来说,创建一个原生JavaScript的input表单城市选择器,主要涉及HTML的`&lt;input&gt;`标签、CSS样式设计和JavaScript的事件监听、数据处理及DOM操作。这样的选择器不仅可以提高用户输入效率,还能提供良好的交互体验,...

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

    在JavaScript中,DOM操作是前端开发的核心任务之一,而querySelector是一个非常强大的DOM选择器,它使得在JavaScript中查找特定的DOM元素变得简单高效。querySelector方法允许开发者使用CSS选择器来选取文档中的单个...

    移动端省市区级联选择器

    在移动端应用开发中,省市区级联选择器是一种常见的组件,用于用户输入其所在地理位置。这种功能在电商、服务预订等各类应用中都有广泛应用。在本项目中,我们需要实现一个可嵌入H5的级联选择器,以适应手机端的滑动...

    JS日期选择器(兼容IE,FireFox,Oprea,chrome等主流浏览器)

    在网页开发中,日期选择器是一个非常常见的组件,它允许用户方便地选择日期,常用于表单填写或事件安排等功能。"JS日期选择器(兼容IE,FireFox,Oprea,chrome等主流浏览器)"是一个专门为JavaScript环境设计的,旨在...

    JavaScript实现自己的DOM选择器原理及代码

    解释器模式(Interpreter):定义一种语法格式,...匹配原理:浏览器在匹配CSS选择符时是按照从右到左匹配的,所以实现自己的DOM选择器时匹配行为也应该和浏览原生匹配行为一致。 代码: 代码如下: (function (ns) { /*

    原生js日历选择器插件.rar

    综上所述,原生JavaScript日历选择器插件的实现涉及到了JavaScript的DOM操作、日期处理、CSS样式设计、动态HTML生成、事件处理等多个核心技能,是一个综合性的前端开发练习。通过这样的实践,开发者可以深入理解Web...

    js城市选择器

    9. **性能优化**:为了提高选择器的性能,我们可以采用缓存策略,避免不必要的数据请求,或者使用虚拟DOM技术减少DOM操作的开销。 10. **无障碍性**:对于视力障碍或使用辅助技术的用户,确保选择器符合无障碍性...

    原生js带时间日历选择器插件

    原生JavaScript时间日历选择器插件是一种无需依赖外部库如jQuery等,完全基于JavaScript语言实现的日期和时间选择工具。这种插件通常用于网页表单中,方便用户输入日期和时间信息,提高用户体验。在现代Web开发中,...

    原生的html元素选择器类似jquery选择器

    本文详细介绍了如何...通过阅读本文,我们可以学习到如何利用JavaScript的原生功能来模拟jQuery选择器,这不仅有助于深入理解DOM操作的原理,也有助于在特定情况下减少项目对外部库的依赖,从而优化性能和加载时间。

    2019最新原生js实现的一款年月日日期选择特效插件.zip

    本资源"2019最新原生js实现的一款年月日日期选择特效插件"提供了一个用纯JavaScript编写的日期选择器,它能够帮助开发者在网页中添加功能丰富的日期选择功能,而无需依赖任何外部库或框架。 这个插件的核心在于其...

    cascaderjs级联选择器

    在JavaScript中,我们可以使用原生DOM操作、jQuery库或者其他前端框架(如React、Vue或Angular)来实现级联选择器。这里我们以原生JS为例,简要介绍其基本实现步骤: 1. **创建HTML结构**:首先,我们需要创建一个...

    原生js仿携程网机票城市选择器代码源码免费下载

    【原生JS仿携程网机票城市选择器代码详解】 在前端开发中,用户友好的交互设计是提升用户体验的关键。携程网的机票城市选择器就是一个很好的例子,它通过高效的搜索、筛选功能,使得用户能快速找到所需的目的地。...

    Javascript封装id、class与元素选择器方法示例

    - 封装后的选择器函数仍应保留原生DOM选择器的语义。 - 考虑到代码的可维护性和可读性,封装函数应当简洁明了。 - 测试封装后的函数在不同浏览器下的兼容性,确保其稳定运行。 以上即为文章中介绍的Javascript封装...

Global site tag (gtag.js) - Google Analytics