js实现类选择器和name属性选择器的示例步骤
jQuery的出现,大大的提升了我们操作dom的效率,使得我们的开发更上一层楼,如jQuery的选择器就是一个很强大的功能,它包含了类选择器、id选择器、属性选择器、元素选择器、层级选择器、内容筛选选择器等等,很是方便快捷,并且这些选择器的兼容性都很好,可以说操作dom使用jq选择器一时爽,一直使用一直爽!只是,目前Vue、React、Angular三大框架的出现大大降低了JQuery的使用频率,而且JQuery在操作dom和绑定数据时确实存在一定的性能问题和各种坑,但依旧不可抹杀jq在操作dom方面的强大存在!
说了JQuery这么多的牛逼之处,那么它的很多内部原理是如何实现的呢?今天就来简单实现一个类似jQuery的类选择器和name属性选择器。
类选择器:
functiongetElementsByClass(className){ varclassArr=[]; vartags=document.getElementsByTagName("*"); for(vari=0;i其实name属性选择器跟类选择器一样,只是判断条件稍微变了一下而已:
functiongetElementsByName(name){ varnameArr=[]; varnum=0; vartags=document.getElementsByTagName("*"); for(vari=0;iname属性选择器大多用在表单的操作方面。
以上代码中有一个nodeType的属性,它是用来判断节点的类型,nodeType共有12个值,1代表节点元素,2代表属性,3代表元素或属性中的文本内容。这三个数值用的是比较多的,其他9个用的不多,想了解的话可以去看一下API。在这里,我们需要得到元素节点,所以就会判断当前元素的nodeType是否为1。
再来贴一下用递归来实现获取元素的所有子节点(含孙子节点):
/** *递归获取所有子节点 * node代表想要获取所有子节点的父节点 type取值: 1Element代表元素 2Attr代表属性 3Text代表元素或属性中的文本内容 4CDATASection代表文档中的CDATA部分(不会由解析器解析的文本) 5EntityReference代表实体引用 6Entity代表实体 7ProcessingInstruction代表处理指令 8Comment代表注释 9Document代表整个文档(DOM树的根节点) 10DocumentType向为文档定义的实体提供接口 11DocumentFragment代表轻量级的Document对象,能够容纳文档的某个部分 12Notation代表DTD中声明的符号 */ varallChildNodes=function(node,type){ //1.创建全部节点的数组 varallCN=[]; //2.递归获取全部节点 vargetAllChildNodes=function(node,type,allCN){ //获取当前元素所有的子节点nodes varnodes=node.childNodes; //获取nodes的子节点 for(vari=0;i作者:小坏
出处:http://tnnyang.cnblogs.com
以上就是js实现类选择器和name属性选择器的示例步骤的详细内容,更多关于js实现类选择器和name属性选择器的资料请关注毛票票其它相关文章!