Javascript DOM 怎么做？答案

【问题标题】：Javascript DOM howto?Javascript DOM 怎么做？
【发布时间】：2010-03-29 23:26:29
【问题描述】：

我是一个 JavaScript 菜鸟。

我想选择 div.box 的第二个“p”元素。我该怎么做？

非常感谢！汤姆

【问题讨论】：

【解决方案1】：

要使用类框获取 div 的第二个 p 元素，您可以这样做：

var paragraph = null;
var divs = document.findElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
    var div = divs[i];
    if (div.class == 'box') {
        var paragraphs = div.getElementsByTagName('p');
        if (paragraphs.length > 1)
            paragraph = paragraphs[1];
        break;
    }
}

然后该段落将位于 paragraph 变量中（如果未找到，则为 null）。

但是，您可以使用诸如 jQuery 之类的库更轻松地做到这一点：

var paragraph = $('div.box p:eq(1)');

【讨论】：

在 jQuery 中，您必须专门选择 DOM 节点：$('div.box p:eq(1)').get(1)。否则，你只会得到一个 jQuery 对象，而这实际上是缺少所有 DOM 接口。
其实用 .get(0) 或者只是 [0]，因为 p:eq(1) 已经选择了第二段。

【解决方案2】：

不使用 jQuery，基本的方法是给你的 Dom 元素附加一个唯一的 ID

<p id="second_p_elmt"> [...] </p>

然后通过getElementById()方法访问它：

<script ...>
  var second_p_elmt = document.getElementById('second_p_elmt');
</script>

【讨论】：

我同意你的看法。附加 id 的可能性要小得多。然后，当您插入一个新段落并成为第三段时，您的所有 DOM 遍历都不会中断。

【解决方案3】：

<script type="text/javascript">
    var boxElem = document.getElementById('box'),
        pElems = boxElem.getElementsByTagName('p'),
        whatYouWant = pElems[1]; // [1] is the second element in the response from getElementsByTagName
</script>

【讨论】：

对不起 - 我误读了这个问题。这个答案将适用于“div#box p[1]”

【解决方案4】：

您有多种选择。如上所述，您可以使用优秀的框架之一，例如 jQuery 或原型。或者你给<p/>一个ID，你可以简单地和document.getElementById()一起使用。

然后，正如 reko_t 指出的那样，如果没有上述内容，您必须编写冗长的 DOM 遍历代码（如果您不在其他地方使用 JS 框架，则最好不要将它们嵌入仅用于此任务）。

在最新的浏览器中（即IE>=8，FF>=3.5，最近的Opera和Safari>3）你也可以使用这个简单的sn-p：

var p = document.querySelectorAll("div.box p");

【讨论】：

@Boldewyn: querySelector 和 querySelectorAll 都受 IE8 支持。事实上，IE8 在 Firefox（2009 年 6 月 v3.5）之前就有（2009 年 3 月）
@Andy E：感谢您的指出。但是，您称之为支持：ejohn.org/blog/selectors-api-test-suite-in-ie8 ？不过，你说得有道理，我会更正答案。