javascript - :scope pseudo-selector in MS Edge

Question

每当我在 Microsoft Edge 中使用 querySelectorAll 和 :scope 伪选择器时，控制台中就会出现此错误

SCRIPT5022: SCRIPT5022: SyntaxError

我想知道是否有 querySelectorAll 的替代方案，我在其中使用此参数::scope > * > table。我不想为此使用 jQuery。谢谢。

编辑:

我还想补充一点，querySelector 可以单独工作

好的，这是代码示例:

            function pJSON(panel) {
                var json = {tables: [], images: [], text: ""};
                var tables = Array.from(panel.querySelectorAll(":scope > * > table"));
                var images = Array.from(panel.querySelectorAll(":scope > * > img"));
                var text = panel.querySelector(":scope > textarea");
                tables.forEach(table => {
                    json["tables"].push(tJSON(table));
                });
                images.forEach(image => {
                    json["images"].push(image.outerHTML);
                });
                if (text) {
                    json["text"] = text.value;
                }
                return json;
            }

我要再次指出，它适用于除 IE 和 Microsoft Edge 之外的所有浏览器

哦，还有一个可能动态添加的 HTML 示例，这是我调用此方法时的代码:

<div>
    <input type="file" multiple=""><br>
    <button>Add Table</button><br>
    <div>
        <table style="display: inline-table;">
            <tbody>
                <tr>
                    <td>
                        <input type="file" multiple=""><br>
                        <button>Add Table</button><br>
                        <textarea placeholder="Write some text"></textarea>
                    </td>
                    <td>
                        <input type="file" multiple=""><br>
                        <button>Add Table</button><br>
                        <textarea placeholder="Write some text"></textarea>
                    </td>
                    <td>
                        <button style="margin-left: 100px;">x</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="file" multiple=""><br>
                        <button>Add Table</button><br>
                        <textarea placeholder="Write some text"></textarea>  
                    </td>
                    <td>
                        <input type="file" multiple=""><br>
                        <button>Add Table</button><br>
                        <textarea placeholder="Write some text"></textarea>
                    </td>
                    <td>
                        <button style="margin-left: 100px;">x</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <button style="margin-left: 100px;">x</button>
    </div>
</div>

Answer 1

所以你所追求的实际上是 :scope 的填充。

有一个可用:https://github.com/jonathantneal/element-qsa-scope

它的工作原理基本上是首先在要匹配的元素上定义一个足够唯一的选择器，并将其添加到传递给 querySelector 的选择器之前。

const li = document.getElementById('target');
console.log('no :scope', li.querySelector('li>a')) // Link

// workaround
const UUID = Date.now()+'';
li.setAttribute('data-scope-uuid', UUID);
console.log('workedaround', li.querySelector('[data-scope-uuid="'+UUID+'"] li>a'));
li.removeAttribute('data-scope-UUID');

// where supported
console.log(':scope', li.querySelector(':scope li>a'));

<ul>
  <li id="target"><a>Link</a>
    <ul>
      <li><a>Sublink</a></li>
    </ul>
  </li>
</ul>

要测试 native 支持，您只需将 document.querySelector(':scope') === document.documentElement 包装在 try catch block 中。