html - 如果为 "too exact"，则选择不起作用

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

来自关于 p 的 MDN 文档元素:

The start tag is required. The end tag may be omitted if the <p> element is immediately followed by an <address>, <article>, <aside>,
<blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>,
<h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>,
<section>, <table>, <ul> or another <p> element, or if there is no more content in the parent element and the parent element is not an element. (link)

<ol>的使用在 <p> 之后/内部标记标签关闭 <p> .在您的情况下，这意味着 <p>标签没有内容。看看下面的代码片段，我有两个 ol s 在 p或者在 div 中然后我用纯 javascript 选择 parent 并记录他们的内部 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 s 在 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>