说了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 getElementsByNamecSdHfs(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。
再来贴一下用递归来实现获取元素的所有子节点(含孙子节点):
/**
* 递归获取所有子节点
*
node代表想要获取所有子节点的父节点
type取值:
1 Element 代表元素
2 Attr 代表属性
3 Text 代表元素或属性中的文本内容
4 CDATASection cSdHfs 代表文档中的 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 (child.nodeType == 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)
作者:小坏
出处:http://tnnyang.cnblogs.com
以上就是js实现类选择器和name属性选择器的示例步骤的详细内容编程客栈,更多关于js实现类选择器和name属性选择器的资料请关注我们其它相关文章!
本文标题: js实现类选择器和name属性选择器的示例步骤
本文地址: http://www.cppcns.com/wangluo/javascript/376515.html
© 著作权归作者所有
举报
发表评论
0/200