Javascript实现元素选择器功能

 更新时间:2022年07月11日 16:24:58   作者:答嗔  
这篇文章主要为大家详细介绍了Javascript实现元素选择器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Javascript实现元素选择器功能的具体代码,供大家参考,具体内容如下

什么是元素选择器?

用过jquery的开发者都知道,jquery封装了对元素的查找功能,即通过jquery的api获取页面元素的过程,该过程只需提供一个元素选择的条件字符串即可获取相应的满足条件的页面元素。元素选择器即是指通过条件字符串获取相应元素的一个工具函数。

元素选择器分为id选择器、class选择器、标签选择器以及属性选择器。

id选择器即通过元素的id唯一标识获取元素。

类选择器即通过元素的class类获取元素列表。

标签选择器即通过元素的标签名获取元素列表。

属性选择器即通过元素的属性获取元素列表。

元素选择器的实现方法可以由javascript的document对象提供的方法来完成,document对象的关于元素获取的方法有

1、getElementById

2、getElementsByClassName

3、getElementsByTagName

当然还有其它的方法可以获取页面的元素,以上三个是比较常用的获取页面元素的方法。

一个简单的元素选择器实现

function node(selector) {
    if(selector.indexOf("#")==0) {
        var dom = document.getElementById(selector.substring(1));
        FE.extend("addClass",dom,addClass);
        FE.extend("removeClass",dom,removeClass);
        FE.extend("prevNode",dom,prevNode);
        FE.extend("value",dom,value);
        FE.extend("styleSettings",dom,styleSettings);
        FE.extend("nextNode",dom,nextNode);
        return dom;
    }else if(selector.indexOf(".")==0)  {
        var doms = document.getElementsByClassName(selector.substring(1));
        var result = [];
        for(var i=0;i<doms.length;i++) {
        FE.extend("addClass",doms[i],addClass);
        FE.extend("removeClass",doms[i],removeClass);
        FE.extend("prevNode",doms[i],prevNode);
        FE.extend("value",doms[i],value);
        FE.extend("styleSettings",doms[i],styleSettings);
        FE.extend("nextNode",doms[i],nextNode);
        result.push(doms[i]);
        }
        return result;
    }else {
        var start = selector.indexOf("[");
        var end = selector.indexOf("]");
        var tagName = selector.substring(0,start);
        var attrStr = selector.substring(start+1,end);
        var attr = attrStr.split("=");
        
        var doms = document.getElementsByTagName(tagName);
        var result = [];
        for(var i=0;i<doms.length;i++) {
            var attrName = attr[0];
            var value = doms[i].getAttribute(attrName)
            if("'"+value+"'" == attr[1]) {
        FE.extend("addClass",doms[i],addClass);
        FE.extend("removeClass",doms[i],removeClass);
        FE.extend("prevNode",doms[i],prevNode);
        FE.extend("value",doms[i],value);
        FE.extend("styleSettings",doms[i],styleSettings);
        FE.extend("nextNode",doms[i],nextNode);
        result.push(doms[i]);
            }
        }
        return result;
    }
}

元素选择器实现总结

简单来说元素选择器实现了对元素获取方法的封装,每次获取页面元素时都不需要再次使用document对象提供的方法,只需使用工具函数node即可获取页面元素中满足selector条件字符串的元素,由于页面元素还具有其它的共同特性,比如修改元素的class属性的方法addClass、removeClass,修改和获取style属性的方法styleSettings,修改和获取元素属性的方法value,以及获取当前元素的上一个元素和下一个元素的方法prevNode、nextNode等。

这些方法可以通过一个扩展对象的类方法extend绑定到相应的元素上,不需要再次调用或者写相应的代码去获取或者修改,extend类方法允许扩展任意对象的任意属性,在javascript中一切变量都可以看作一个对象,除了简单的基本类型的变量外,我们可以使用像这样的代码来获取和修改对象的属性

var o = {name:"fe_spiderman",username:"路爷交欢"}
 
/*通过对象引用方式获取对象的属性*/
o.name
 
/*通过键值对的方式获取对象的属性*/
o[“name”]

javascript的这种支持极大的丰富了对象的可扩展性,想象一下不用去继承和封装相应的接口来维护代码的可读性带来的乐趣。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JS变量提升及函数提升实例解析

    JS变量提升及函数提升实例解析

    这篇文章主要介绍了JS变量提升及函数提升实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • js获取鼠标点击的位置实现思路及代码

    js获取鼠标点击的位置实现思路及代码

    常用的是 event.clientX和event.clientY分别获取横向的和纵向的位置,但仅使用这个方法是不够的,感兴趣的朋友可以了解本文
    2014-05-05
  • Javascript排序算法之计数排序的实例

    Javascript排序算法之计数排序的实例

    计数排序是一种高效的线性排序,它通过计算一个集合中元素楚翔的次数来确定集合如何排列,计数排序不需要进行数据的比较,所有他的运行效率前面介绍的都高
    2014-04-04
  • window.onload使用指南

    window.onload使用指南

    我们经常使用 window.onload 来处理页面,当页面加载完成做一些事情。但这个 window.onload 是页面全部加载完成,甚至包括图片,下面我们就来详细探讨下window.onload的用法
    2015-09-09
  • js 弹出层 并可以拖拽

    js 弹出层 并可以拖拽

    弹出层,并可以拖拽,好多人要,发出来共享一下 兼容IE6+, 各现代浏览器。
    2011-07-07
  • JS+CSS实现分类动态选择及移动功能效果代码

    JS+CSS实现分类动态选择及移动功能效果代码

    这篇文章主要介绍了JS+CSS实现分类动态选择及移动功能效果代码,涉及JavaScript实现页面元素动态变换效果实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • 微信小程序实现小型计算器

    微信小程序实现小型计算器

    这篇文章主要为大家详细
    介绍了微信小程序实现小型计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • 如何使用Bootstrap创建表单

    如何使用Bootstrap创建表单

    在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单
    2017-03-03
  • javascript+html5+css3自定义提示窗口

    javascript+html5+css3自定义提示窗口

    这篇文章主要为大家详细介绍了javascript+html5+css3自定义提示窗口,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JavaScript设计模式之代理模式简单实例教程

    JavaScript设计模式之代理模式简单实例教程

    这篇文章主要介绍了JavaScript设计模式之代理模式,简单描述了代理模式的概念、功能、组成并结合实例形式较为详细的分析了javascript代理模式的定义与使用相关操作技巧,需要的朋友可以参考下
    2018-07-07

最新评论