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 = ElementsByTagName("*");
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 = [];
jquery是什么选择器
var num = 0;
var tags = ElementsByTagName("*");
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。
再来贴⼀下⽤递归来实现获取元素的所有⼦节点（含孙⼦节点）：
/**
* 递归获取所有⼦节点
*
node代表想要获取所有⼦节点的⽗节点
type取值:
1  Element        代表元素
2  Attr          代表属性
3  Text          代表元素或属性中的⽂本内容
4  CDATASection      代表⽂档中的 CDATA 部分（不会由解析器解析的⽂本）
5  EntityReference    代表实体引⽤
6  Entity        代表实体
7  ProcessingInstruction  代表处理指令
8  Comment        代表注释
9  Document        代表整个⽂档（DOM 树的根节点）
10 DocumentType      向为⽂档定义的实体提供接⼝
11 DocumentFragment    代表轻量级的 Document 对象，能够容纳⽂档的某个部分
12 Notation        代表 DTD 中声明的符号
*/
var allChildNodes = function (node, type) {
// 1.创建全部节点的数组
var allCN = [];
// 2.递归获取全部节点
var getAllChildNodes = function (node, type, allCN) {
// 获取当前元素所有的⼦节点nodes
var nodes = node.childNodes;
// 获取nodes的⼦节点
for (var i = 0; i < nodes.length; i++) {
var child = nodes[i];
/
/ 判断是否为指定类型节点
if (deType == type) {
allCN.push(child);
}
getAllChildNodes(child, type, allCN);
}
}
getAllChildNodes(node, type, allCN);
// 3.返回全部节点的数组
return allCN;
}
/
/ 调⽤：
// 获取body中全部节点
allChildNodes(document.querySelector('body'), 1);
//获取body中全部纯⽂本节点
allChildNodes(document.querySelector('body'), 3)
作者：⼩坏
以上就是js实现类选择器和name属性选择器的⽰例步骤的详细内容，更多关于js实现类选择器和name属性选择器的资料请关注其它相关⽂章！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。