javascript 选择器答案

【问题标题】：javascript selectorsjavascript 选择器
【发布时间】：2011-09-08 19:50:36
【问题描述】：

如何在 javascript 中选择 DOM 元素？
比如：

<div class="des">
    <h1>Test</h1>
        <div class="desleft">
          <p>Lorem Ipsum.</p>
        </div>
        <div class="Right">
           <button>Test</button>
        </div>
</div>

现在我该如何选择h1？这只是更大页面的一部分，因此不能使用getElementsByTagName()，因为其他人可能会被选中。此外，由于稍后文档中可能还有其他h1，我无法将索引（正文）附加到上面。

有没有一种简单的选择方法，比如<h1> 标签，它位于desleft 的类名下？我不能使用 jQuery 或任何其他库。

【问题讨论】：

在现代 javascript 编程中不使用某种选择器库是没有效率的。如果你不能使用 jQuery，那么至少使用 Sizzle，它只是一个选择器引擎（并且是 jQuery 和 YUI 内部使用的）。它非常小，可以为您节省数百小时的开发时间，防止大量错误并避免大量跨浏览器问题。自己重新发明轮子根本没有效率。
是的，我完全同意。我感觉有办法做到这一点，但我不知道。
在任何这些选择器库中，您只需使用选择器：".des h1" 来访问示例中的 <h1> 对象。在 Sizzle 中，它只是：var list = Sizzle(".des h1");。
你可能不需要库：caniuse.com/#search=querySelector

标签： javascript dom selector traversal

【解决方案1】：

您可以使用它来获得您的 H1：

var des = document.getElementsByClassName('des')
var fc = des[0].getElementsByTagName('h1')
alert(fc[0].innerHTML)

【讨论】：

【解决方案2】：

w3.org 现在有选择器 (http://www.w3.org/TR/selectors-api/#examples)。以下是在 Chrome 上对我有用的 2 种不同方式。您可能需要使用返回列表的 querySelectorAll 函数。

<script type="text/javascript">
//looks for <h1> tag under <div> with className "des"
showOff1 = function() {
  var x = document.querySelector(".des h1");
  alert(x.innerHTML);      
}
//looks for <div> tag with className "desleft" and then use previousSibling to traceback <h1> tag
showOff2 = function() {
  var y = document.querySelector("div.desleft");
  var z = y.previousSibling.previousSibling;
  alert(z.innerHTML);      
}
</script>
<body onload="showOff2();">

【讨论】：

【解决方案3】：

使用 querySelectorAll

你可以使用querySelectorAll:

// Will return a NodeList even if there is only one element found
var heading = document.querySelectorAll('.des > h1');

heading[1].style.color = 'red'; // NodeList is similar to an array

这将返回一个NodeList。

或

使用querySelector 返回找到的第一个元素：

var first_heading = document.querySelector('.des > h1');

first_heading.style.color = 'blue';

通常与 id 选择器一起使用 #single-header-id。

Here's a demo

【讨论】：

【解决方案4】：

getElementsByTag()

将是一个您可以开始使用的函数，然后您可以过滤具有该类的 DOMElements。

var h1_array = document.getElementsByTag('h1');

var h1_class_array = [];
for (var i=0, len=h1_array.length; i < len; i++) {
    if (h1_array[i].className.indexOf('classname') !== -1) {
        h1_class_array.push(h1_array[i]);
    }
}

如果在大海捞针中找不到针，.indexOf 函数将返回 -1。

现在重新阅读您的问题，为什么不直接给出您的 h1 的 id 呢？

DOM 遍历是 javascript 的突出问题之一（进入 jQuery）。

一个简单的getElementById() 会让你头疼，而且你所有 h1 上的 id 最终会比尝试制定一个算法来通过其他方式选择它们要干净得多。

【讨论】：

谢谢，解决了 :) 但是，出于好奇，假设我用它来查找大约 5 个不同的元素，并且由于为每个
、

、等等等等，因为有很多

或其他标签，数组会变得很大。在现实世界的场景中，它会消耗大量的内存/处理吗？
显然，如果没有给定的限制，所有场景最终都会超出可接受的范围，但同样，vanilla javascript DOM 遍历是您只需微笑和忍受的事情之一。
好吧
只是一个例子，我将不得不将它用于其他元素，想知道是否有一种简单而简洁的方法来使用 javascript 进行 DOM 遍历。我想，提供 id 必须是最聪明的选择，而不是仅仅为了遍历而增加大小和处理
是的，这正是使竞争 JavaScript 库如此受欢迎的问题，因为它们的主要功能是 DOM 遍历和选择。

【解决方案5】：

如果你的意思是选择一个h1，它是在类desleft的第一个元素之前，你总是可以这样做：

document.getElementsByClassName("desleft")[0].previousSibling.previousSibling

示例：http://jsfiddle.net/Xeon06/ZMJJk/

previousSibling 需要调用两次，因为两者之间的文本节点为空。这就是为什么使用库来做这些事情确实是最好的方法。

【讨论】：

请注意，这不适用于旧版本的 IE。（至少我认为需要 IE9）当你做这样的事情时，没有 jQuery 是一个真正的小便，我已经习惯了不用担心 DOM 怪癖。
我以前从未使用过 previousSibling，将通过它，谢谢 :)
@jondavidjohn ：谢谢，不知道。返回更多编码以查找元素：/
@Aaditi，如果您需要支持旧版浏览器并且不能使用第三方库，我会准备好编写更多代码。
相信它正在被推送，因为 html5（FF3、Chrome 和 Opera 9+）已经支持它。

【解决方案6】：

var h1 = document.querySelector('.desleft').previousElementSibling;

使用选择器 '.desleft' 查找 className='desleft' 的元素
只需移回上一个元素（而不是上一个节点！）

【讨论】：

使用 querySelectorAll

或

、

只是一个例子，我将不得不将它用于其他元素，想知道是否有一种简单而简洁的方法来使用 javascript 进行 DOM 遍历。我想，提供 id 必须是最聪明的选择，而不是仅仅为了遍历而增加大小和处理