原生Javascript选择

Question

我需要使用本机Javascript，并且对于其中一些属性，我需要选择多个属性(例如，具有类和id的div )。以下是我到目前为止所获得的代码示例。该示例包含所有单项选择。

    var $ = function (selector) {
var elements = [];

var doc = document, i = doc.getElementsByTagName("div"),
    iTwo = doc.getElementById("some_id"), // #some_id
    iThree = doc.getElementsByTagName("input"),
    // ^ Lets say I wanted to select an input with ID name as well. Should it not be doc.getElementsByTagName("input").getElementById("idname")
    iFour = doc.getElementsByClassName("some_class"); // some_class

elements.push(i,iTwo,iThree,iFour);

return elements;
    };

哦，是的，我忘了说我根本不能使用querySelector……

Answer 1

这取决于您要选择的属性。例如，您可能会传递如下所示的对象：

{tagname: 'div', class: 'foo'};

函数可能如下所示：

function listToArray(x) {
  for (var result=[], i=0, iLen=x.length; i<iLen; i++) {
      result[i] = x[i];
  }
  return result;
}

function getByProperties(props) {
  var el, elements;
  var baseProps = {id:'id', tagName:'tagName'};
  var result = [];

  if ('tagName' in props) {
    elements = listToArray(document.getElementsByTagName(props.tagName));

  } else if ('id' in props) {
    elements = [document.getElementById(props.id)];
  }

  for (var j=0, jLen=elements.length; j<jLen; j++) {
    el = elements[j];
    for (var prop in props) {

      // Include all with tagName as used above. Avoids case sensitivity
      if (prop == 'tagName' || (props.hasOwnProperty(prop) && props[prop] == el[prop])) {
        result.push(el);
      }
    }
  }
  return result;
}

// e.g.
getByProperties({tagName:'div', className:'foo'});

然而，这是一种过于简单的方法，它不会做像孩子或第n个选择器这样的事情。

您也许可以查看其他人的选择器函数(周围有几个)，并遵循fork来支持非qSA浏览器。这些通常基于使用正则表达式标记选择器，然后手动应用选择器，与上面的类似，但范围更广。

它们还允许在某种程度上区分大小写的值(例如HTML值)和属性名称，以及在需要时将tagName属性名称映射到DOM属性名称(例如-> className类、-> htmlFor等)。