Question

现在我正在尝试玩webComponent。我创建了一个组件，该组件应该代表我所有其他可翻译组件的父类。它现在可以按我的意愿工作，但是我想有一种方法来选择从该父类继承的当前文档的所有元素。像这样：

document.getElementsByTagName('lsp-motherComposant');

无效。

index.html

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>WebComponentTest</title>
        <!-- motherComponent -->
        <link rel="import" href="components/lsp-translatable/lsp- 
        translatable.html" />
        <!-- child Component -->
        <link rel="import" href="components/lsp-button/lsp-button.html" />
    </head>

    <body>
        <select id="lang">
            <option value="fr" selected>fr</option>
            <option value="en">en</option>
            <option value="zh">zh</option>
        </select>

        <lsp-button i18n="events" width="33%" gradient color1="0,0,0,0" 
        color2="128,0,128,1" direction="left"></lsp-button>

        <script type="text/javascript">
             window.onload = function(){
             document.getElementsByTagName('lsp-translatable');
             // => empty node list

             };
         </script>
    </body>

    </html>

lsp-translatable.js：

class LspTranslatable extends HTMLElement {//some stuff}
customElements.define('lsp-translatable', LspTranslatable);

lsp-button.js：

class LspButton extends LspTranslatable {//some stuff}
customElements.define('lsp-button', LspButton);

Answer 1

您尝试过document.querySelectorAll吗？

const components = document.querySelectorAll('lsp-button');
console.log(components);
console.log(Array.from(components));

lsp-button {
  position: static;
  display: block;
  border: 1px solid #6F6;
  height: 1rem;
  width: 1rem;
}

<lsp-button id="button-0"></lsp-button>
<lsp-button id="button-1"></lsp-button>
<lsp-button id="button-2"></lsp-button>
<lsp-button id="button-3"></lsp-button>
<lsp-button id="button-4"></lsp-button>
<lsp-button id="button-5"></lsp-button>
<lsp-button id="button-6"></lsp-button>
<lsp-button id="button-7"></lsp-button>
<lsp-button id="button-8"></lsp-button>
<lsp-button id="button-9"></lsp-button>

Answer 2

getElementsByTagName对我来说很好

如果要查找特定属性，例如document.querySelectorAll（所有带有标题属性的图像），则可以使用document.querySelectorAll('img[title]')

console.log( Array.from(document.getElementsByTagName('randomComponent')) );

randomComponent {
  position: static;
  display: block;
  border: 1px solid #6F6;
  height: 1rem;
  width: 1rem;
}

<randomComponent id="1"></randomComponent>
<randomComponent id="2"></randomComponent>

Answer 3

要确保您使用querySelector()的属性选择的所有自定义元素确实是从特定的Javascript类继承的，则应测试instanceof的每个元素。

window.onload = function() {
    const els = document.querySelectorAll( '[i18n]' ) 
    const translatableNodes = Array.from(els).filter( el => el instanceof LspTranslatable )
}

Answer 4

这不会对您的生产代码有所帮助，但这是您要寻找的开发版本。

Chrome DevTools具有开发者命令queryObjects，该命令将返回类的所有实例。在Chrome DevTools中，您可以运行以下命令：

queryObjects(LspTranslatable);

如何选择从特定javascript类继承的所有自定义元素

4 个答案: