5.6  获得拥有特定属性值的所有元素

获得拥有某属性值的所有元素是非常有用的技巧，特别是当需要修改所有拥有相同的class或者title的元素的时候。

 方 法

为了找出所有符合条件的元素，可以检查页面中的所有元素，看它是否有那样的属性。这是一种很耗时的方法，不过可以将这种方法改得更有效率一点。如果需要在input元素中寻找满足type="checkbox"这个条件的所有元素，最好首先把搜索范围限制到input元素：

var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++)

{

  if (inputs.getAttribute("type") == "checkbox")

  {

  }

}

这会节省很多遍历以及检查type属性的时间。不过，这里将给出一个漂亮的方法——getElementsByAttribute函数，当寻找那些拥有相同属性值但类型不同的一组元素时，用这个方法最为理想。

检查一个页面中的所有元素的最简单的方法是通过循环遍历由getElementsByTag Name("*")返回来的集合。惟一的问题是，Internet Explorer 5.0和5.5不支持星号通配符。还好，所有的浏览器都支持document.all，这是一个包含了页面中所有元素的数组。GetElementsByAttribute通过一个简单的条件判断来获得这个数组，然后用给定的属性值为条件逐一检查每个元素，并将符合的元素放到一个结果数组中，最后返回这个结果数组：

function getElementsByAttribute(attribute, attributeValue)

{

  var elementArray = new Array();

  var matchedArray = new Array();

  if (document.all)

  {

    elementArray = document.all;

  }

  else

  {

    elementArray = document.getElementsByTagName("*");

  }

  for (var i = 0; i < elementArray.length; i++)

  {

    if (attribute == "class")

    {

      var pattern = new RegExp("(^| )" +

           attributeValue + "( |$)");

      if (pattern.test(elementArray[i].className))

      {

        matchedArray[matchedArray.length] = elementArray[i];

    }

}

else if (attribute == "for")

{

  if (elementArray[i].getAttribute("htmlFor") || elementArray[i].getAttribute("for"))

  {

    if (elementArray[i].htmlFor == attributeValue)

    {

        matchedArray[matchedArray.length] = elementArray[i];

     }

   }

 }

 else if (elementArray[i].getAttribute(attribute) == attributeValue)

 {

    matchedArray[matchedArray.length] = elementArray[i];

 }

     }

return matchedArray;

}

getElementByAttribute中的很多代码都是为了应对前面提到的浏览器差异问题。当请求的属性是class或者for的时候，这些特殊的处理方式是必需的。即使一个元素被赋予了多个class，这个函数也会自动检查每一个，看是否合乎条件。