Question

考虑以下最小示例：

<p>
    <ol id="First list">
        <li>foo</li>
        <li>bar</li>
    </ol>
    <ol id="Second list">
        <li>baz</li>
    </ol>
</p>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
    sel = d3.selectAll("ol")

    console.log(sel)
</script>

这很好用：选择包含一个组，该组又包含两个元素（两个元素）。

但是如果我将选择更改为

sel = d3.select("p").selectAll("ol")

由于使用更准确的地址，它对我来说看起来“更精确”，选择返回的一组是空的（显然是错误的）。

这是什么原因？

Answer 1

来自MDN文档中有关p元素的信息：

开始标记是必需的。如果<p>可以省略end标记元素后紧跟一个<address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol> , <pre>, <section>, <table>, <ul>或另一个<p>元素，或者如果没有父元素中的内容更多，而父元素不是元件。（link）

在<ol>标签之后/之内使用<p>标签会关闭<p>。就您而言，这意味着<p>标签没有内容。看看下面的代码片段，我在ol中有两个p，在div中也有两个，然后我选择了带有纯JavaScript的父级并记录了它们的内部html：

var p = document.getElementsByTagName("p")[0]

console.log("p:", p.innerHTML);

var div = document.getElementsByTagName("div")[0]

console.log("div:", div.innerHTML);

<p> 
    <ol id="First list">
        <li>foo</li>
        <li>bar</li>
    </ol>
    <ol id="Second list">
        <li>baz</li>
    </ol>
</p>

<div>
    <ol id="First list">
        <li>foo</li>
        <li>bar</li>
    </ol>
    <ol id="Second list">
        <li>baz</li>
    </ol>
</div>



<script src="https://d3js.org/d3.v4.min.js"></script>

因此，如果将ol放在div中，则应该可以使它工作：

<div>
    <ol id="First list">
        <li>foo</li>
        <li>bar</li>
    </ol>
    <ol id="Second list">
        <li>baz</li>
    </ol>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
    sel = d3.select("div").selectAll("ol")

    console.log("number of elements in selection: ", sel.size())
</script>

如果“太精确”，则选择不起作用

1 个答案: