元素选择器功能用实现Javascript

元素选择器功能用Javascript实现

本篇内容主要讲解如何用Javascript实现元素选择器功能。

元素选择器功能用实现Javascript

什么是元素选择器？

在jQuery中，我们可以通过提供一个条件字符串来获取满足条件的页面元素。这个条件字符串就是元素选择器，是一个用来查找页面元素的工具函数。

元素选择器主要分为四种：id选择器、class选择器、标签选择器以及属性选择器。

id选择器：通过元素的id唯一标识获取元素。
类选择器：通过元素的class类获取元素列表。
标签选择器：通过元素的标签名获取元素列表。
属性选择器：通过元素的属性获取元素列表。

如何用Javascript实现元素选择器？

可以使用Javascript的document对象提供的方法来获取页面元素：

getElementById：通过id获取元素。
getElementsByClassName：通过class获取元素列表。
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;
  }
}

使用extend方法扩展元素属性

上面的代码中使用了extend方法来扩展元素的属性。该方法可以通过以下方式来获取和修改对象的属性：

var o = {name: "fe_spiderman", username: "路爷交欢"};

/*通过对象引用方式获取对象的属性*/
o.name;

/*通过键值对的方式获取对象的属性*/
o["name"];

extend方法可以扩展任意对象的任意属性，比如修改元素的class属性的方法addClass、removeClass，修改和获取style属性的方法styleSettings，修改和获取元素属性的方法value，以及获取当前元素的上一个元素和下一个元素的方法prevNode、nextNode等。

总结

元素选择器的实现可以大大简化获取页面元素的过程，并且扩展了元素的属性和方法，使代码更加灵活和易读。

希望大家可以带着更多快乐学习，享受开发的乐趣。

原创文章，作者：小编小本本，如若转载，请注明出处：https://www.benjiyun.com/yunzhujiyunwei/vps-yunwei/7262.html

元素选择器功能用实现Javascript

元素选择器功能用Javascript实现

什么是元素选择器？

如何用Javascript实现元素选择器？

使用extend方法扩展元素属性

总结

相关推荐