在javascript中按属性选择元素，其中属性名称有冒号？答案

【问题标题】：Selecting elements by attribute in javascript, where attribute name has colon?在javascript中按属性选择元素，其中属性名称有冒号？
【发布时间】：2019-12-17 19:36:36
【问题描述】：

我正在尝试编写一个快速的 javascript 简介，以便从 Inkscape 生成的 SVG 文件中为图层设置动画。 Inkscape 可以很好地将 inkscape:groupmode 属性设置为图层组的“图层”：

<g
   transform="translate(-12.681101,-9.7947913)"
   id="g2179"
   inkscape:groupmode="layer"
   inkscape:label="Frame 2"
   style="display:inline"
>

所以我写了一个小脚本来查找所有这些节点，隐藏它们，然后显示它们一个一个循环，有延迟：

<script type="text/javascript">
    <![CDATA[
        var layers;
        var current = 0;

        // show one at a time
        function animate() {
            if (layers.length > 0) {
                layers[current].style.display = "none";
                current = (current+1) % layers.length;
                layers[current].style.display = "inline";
            }
        }

        // on load, get layers and hide them
        function init() {
            layers = document.querySelectorAll("g[inkscape\\:groupmode='layer']");
            alert(layers.length);

            // hide all layers
            for (var ii=0; ii < layers.length; ii++) {
                layers[ii].style.display = "none";
            }

            setInterval(animate, 500);
        }
    ]]>
  </script>

init() 由 svg 元素上的 onload 调用：

<svg onload="init()">

不幸的是，querySelectorAll 调用返回了一个空的图层数组（警报显示为“0”）。我可以通过删除属性标识符来查询所有组元素，但这不是我想要的。

如何只选择图层元素？

编辑：完整示例，在 Firefox 71.0 和 Chrome 79.0.3945.79 在 Linux 中弹出“0”：

<svg
   onload="init()"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="79.63958mm"
   height="79.63958mm"
   viewBox="0 0 79.63958 79.63958">

  <script type="text/javascript">
    <![CDATA[
        var layers;
        var current = 0;

        // show one at a time
        function animate() {
            if (layers.length > 0) {
                layers[current].style.display = "none";
                current = (current+1) % layers.length;
                layers[current].style.display = "inline";
            }
        }

        // on load, get layers and hide them
        function init() {
            layers = document.querySelectorAll("g[inkscape\\:groupmode='layer']");
            alert(layers.length);

            // hide all layers
            for (var ii=0; ii < layers.length; ii++) {
                layers[ii].style.display = "none";
            }

            setInterval(animate, 500);
        }
    ]]>
  </script>

  <g
     inkscape:label="Frame 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(-12.681101,-9.7947913)"
     style="display:inline">
  </g>
</svg>

【问题讨论】：

您正在寻找 g 元素而不是 .g 类。更改为"g[inkscape\\:groupmode='layer']"，或直接删除.g。
很好，将编辑修复。不幸的是仍然没有得到元素
没有类点它可以工作 - jsfiddle.net/d1kh20np
在 Chrome 或 Firefox 中仍然对我不起作用，我用无法正常工作的完整代码更新了问题。
再次，我复制了所有内容，将其粘贴到一个新文档 (this one) 中，它会在 Chrome 中提醒 1。如果您创建一个新的 HTML 文档并在其中粘贴 this，这至少对您有用吗？

标签： javascript svg

【解决方案1】：

你不能通过那种类型的querySelector选择get元素，但是你可以尝试过滤，你需要的G元素

const g = document.querySelectorAll('g')
const layers = Array.from(g)
    .filter(g => g.getAttribute('inkscape:groupmode') === 'layer')

【讨论】：

这基本上也是我刚刚想出的。全选，然后筛选。知道为什么不能选择该属性的值吗？
HTML 不支持 XML 命名空间，在这种情况下，inkscape 是一个命名空间。