javascript - 如何在带有变量元素的 JavaScript 函数中获取 html 属性？

Question

当用户单击 HTML 中的某个元素时，我希望他们的浏览器中出现一个新选项卡，并在该窗口中打印他们单击的元素的属性。

这是 HTML 中的典型元素:

<a id="d0e110" onclick="GetWordFile(this.id)" attr1="attr1_value" attr2="attr2_value" attr3="attr3_value">ElementContent</a>

这样的元素有很多。 UID 是在 XLST 转换期间为每个生成的 ('id="{generate-id()}"')。

这是我当前的 JavaScript 函数:

            <script>
                function GetWordFile(id) {
                var opened = window.open("");
                opened.document.write();
                }
            </script>

如果函数的最后一行是“opened.document.write(id);”，并且单击了某个元素，则新窗口将显示所单击元素的正确 UID。这样就已经成功建立连接了。

但是，我无法使该元素的任何其他属性出现在新窗口中。例如，以下函数会生成一个空白的新窗口:

            <script>
                function GetWordFile(id) {
                var opened = window.open("");
                opened.document.write(attr1);
                }
            </script>

尝试将属性作为变量获取也是如此:

            <script>
                function GetWordFile(id) {
                var opened = window.open("");
                var a1 = getAttribute("attr1");
                opened.document.write(a1);
                }
            </script>

我还尝试用内部 HTML 替换 document.write。

任何人都可以确定我做错了什么以及我的下一步应该是什么？

Answer 1

您可以将 this.attributes 传递给函数，.filter() 属性不是 onclick、.map( ) 属性的 .value 到数组

<script>
  function GetWordFile(attrs) {
    attrs = [...attrs].filter(attr => {
      return attr.name !== "onclick"
    }).map(attr => attr.value);
    
    console.log(attrs);
  }
</script>

<a id="d0e110" onclick="GetWordFile(this.attributes)" attr1="attr1_value" attr2="attr2_value" attr3="attr3_value">ElementContent</a>