如何在带有变量元素的 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>

Answer 2

你需要调用getAttribute()作为元素的方法，你可以使用document.getElementById()获取。

function GetWordFile(id) {
    var el = document.getElementById(id);
    var attr1 = el.getAttribute('attr1');
    var opened = window.open("");
    opened.document.write(attr1);
}

您可以考虑只传递this，而不是传递this.id 作为函数参数。当您可以直接提供元素时，为什么要强制函数搜索元素？那么函数会是这样的：

function GetWordFile(el) {
    var attr1 = el.getAttribute('attr1');
    var opened = window.open("");
    opened.document.write(attr1);
}

Answer 3

当您加载一个新窗口时，您正在创建一个不一定知道存在任何其他文档的新文档。为了让文档知道存在任何其他文档，您必须将所需信息作为参数传递，如上所述。

onclick="someFunction(this)" // which passes in the current scope 
// you could then define someFunction like so to get the desired
// result
function someFunction ( htmlObject ) {
attributeList = htmlObject.attributes;
attributeArray = [...attributeList];//now can perform arrayfunctions
let a = "";
for (value in attributeArray) {
a += attributeArray[value].value + " "; // creates a string of 
attributes
}
let s = window.open("");
s.document.write(a)}

请注意，您可能想要进行一些数组过滤，因为它会返回所有属性，但一般原则有效。