: псевдо-селектор области действия в MS Edge - PullRequest
Новая
       8

: псевдо-селектор области действия в MS Edge

0 голосов
/ 23 октября 2018

Всякий раз, когда я использую querySelectorAll в Microsoft Edge с псевдоселектором :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>

1 Ответ

0 голосов
/ 24 октября 2018

То, что вы ищете, на самом деле является полифилом для :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>

А чтобы проверить встроенную поддержку, вы можете просто обернуть document.querySelector(':scope') === document.documentElement в блок try try.

...