js实现类选择器和name属性选择器
时间:2019-06-17
本文章向大家介绍js实现类选择器和name属性选择器,主要包括js实现类选择器和name属性选择器使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
jQuery的出现,大大的提升了我们操作dom的效率,使得我们的开发更上一层楼,如jQuery的选择器就是一个很强大的功能,它包含了类选择器、id选择器、属性选择器、元素选择器、层级选择器、内容筛选选择器等等,很是方便快捷,并且这些选择器的兼容性都很好,可以说操作dom使用jq选择器一时爽,一直使用一直爽!只是,目前Vue、React、Angular三大框架的出现大大降低了JQuery的使用频率,而且JQuery在操作dom和绑定数据时确实存在一定的性能问题和各种坑,但依旧不可抹杀jq在操作dom方面的强大存在!
说了JQuery这么多的牛逼之处,那么它的很多内部原理是如何实现的呢?今天就来简单实现一个类似jQuery的类选择器和name属性选择器。
类选择器:
function getElementsByClass(className) {
var classArr = [];
var tags = document.getElementsByTagName("*");
for (var i = 0; i < tags.length; i++) {
if (tags[i].nodeType == 1) {
if (tags[i].getAttribute("class") == className) {
classArr.push(tags[i]);
}
}
}
return classArr;
}
其实name属性选择器跟类选择器一样,只是判断条件稍微变了一下而已:
function getElementsByName(name) {
var nameArr = [];
var num = 0;
var tags = document.getElementsByTagName("*");
for (var i = 0; i < tags.length; i++) {
if (tags[i].nodeType == 1) {
if (tags[i].getAttribute("name") == name) {
nameArr.push(tags[i]);
}
}
}
return nameArr;
}
name属性选择器大多用在表单的操作方面。
以上代码中有一个nodeType的属性,它是用来判断节点的类型,nodeType共有12个值,1代表节点元素,2代表属性,3代表元素或属性中的文本内容。这三个数值用的是比较多的,其他9个用的不多,想了解的话可以去看一下API。在这里,我们需要得到元素节点,所以就会判断当前元素的nodeType是否为1。
原文地址:https://www.cnblogs.com/tnnyang/p/11039058.html
- WordPress 网站开发“微信小程序”实战(二)
- Extjs form 组件
- Extjs grid 组件
- WordPress 网站开发“微信小程序”实战(三)
- Extjs mvc
- Extjs 数据代理
- WordPress 网站开发“微信小程序”实战(四)
- 详解零知识证明的四大基础技术,如何与以太坊发生反应
- 入门:添加一个支持获取单一资源以及支持POST,PUT和DELETE方法
- html5语义化标签——回顾
- flex布局——回顾
- WordPress 网站开发“微信小程序”实战(五)
- Windows Runtime(WinRT) 揭秘
- WeApp-Workflow: 基于Gulp 的微信小程序前端开发工作流
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- CentOs7搭建rabbitmq集群
- Rabbitmq haproxy keepalived ACCESS_REFUSED - Login was refused using authentication mechanism PLAIN.
- IDEA maven+spring mvc简单项目
- 程序员用python给了女友一个七夕惊喜!
- 微信小程序开发实战(21):发起HTTPS请求
- 打破国外垄断,开发中国人自己的编程语言(2):使用监听器实现计算器
- 自定义你的github主页
- nginx配置ssl证书实现https
- 有意思的 Node.js 内存泄漏问题
- 【技术干货】聊聊在大厂推荐场景中embedding都是怎么做的
- 特征工程|连续特征的常见处理方式(含实例)
- 一个请求过来,Spring MVC 是如何找到正确的 Controller 的?
- 吴师兄导读:如何快速入门数据结构和算法
- 你真的会做 2 Sum 吗?
- 漫画:什么是计数排序?