【发布时间】：2018-09-29 22:02:58
【问题描述】：
我是 JS 的新手，我可以手动进行 DOM 操作和 if/else 语句。现在我正在尝试一些不合我意的东西，将迭代与数组结合起来，但我有点难以理解它们。
考虑到这一点：考虑到这个 div：<div id="firstAnchor"> 将充当此链接的锚点：<a href="#firstAnchor"></a>
我想存储这些 div 的 ID（id 应该可以是任何东西）：
<div id="firstAnchor" style="display: inline-block;">First title</div>
<div id="secondAnchor" style="display: inline-block;">Second title</div>
<div id="thirdAnchor" style="display: inline-block;">Third title</div>
放入一个数组，然后自动创建这三个链接*放置在一个名为“anchorLinks”的div中：
<a href="#firstAnchor">Link to first title</a>
<a href="#seconAnchor">Link to second title</a>
<a href="#thirdAnchor">Link to third title</a>
我该怎么做呢？
* 例如在这个函数中：
(function create_anchor_link_list() {
//placed here
})();
编辑：
这是我尝试开始的内容。我首先在我的 div 元素上使用了data-anchor="firstAnchor" 等，直到我意识到我无法基于data- 属性值链接到 div 元素。所以我尝试了data- 属性：
(function anchorsInPage2(attrib) {
console.log("=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#");
console.log("=#=#=#=#=# anchorsInPage2 function #=#=#=#=#");
console.log("=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#");
console.log(" ");
var elements = document.getElementsByTagName("*");
var foundelements = [];
for (var i = 0; i < elements.length; i++) {
if (elements[i].attributes.length > 0) {
for (var x = 0; x < elements[i].attributes.length; x++) {
if (elements[i].attributes[x].name === attrib) {
foundelements.push(elements[i]);
}
}
}
}
return foundelements;
console.log(" ");
console.log("=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#");
console.log("=#=#=#=#=# / anchorsInPage2 function #=#=#=#=#");
console.log("=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#");
})();
function anchorsInPage3() {
console.log("=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#");
console.log("=#=#=#=#=# anchorsInPage3 function #=#=#=#=#");
console.log("=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#");
console.log(" ");
var elements = document.getElementsByTagName("*");
var foundelements = [];
for (var i = 0; i < elements.length; i++) {
if (elements[i].attributes.length > 0) {
for (var x = 0; x < elements[i].attributes.length; x++) {
if (elements[i].attributes[x].name === "anchor") {
foundelements.push(elements[i]);
}
}
}
}
return foundelements;
console.log(" ");
console.log("=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#");
console.log("=#=#=#=#=# / anchorsInPage3 function #=#=#=#=#");
console.log("=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#");
}
(function anchorsInPage1() {
console.log("=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#");
console.log("=#=#=#=#=# anchorsInPage1 function #=#=#=#=#");
console.log("=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#");
console.log(" ");
var anchors = document.querySelectorAll('[anchor]');
for(var i in anchors){
console.log(i);
}
console.log(" ");
console.log("=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#");
console.log("=#=#=#=#=# / anchorsInPage1 function #=#=#=#=#");
console.log("=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#");
})();
进一步测试后首次更新：
使用了 Barmar 的例子。下面的文字是对 Barmar 的直接回答（对于其他评论字段来说太长了）
测试： http://jsfiddle.net/e5u03g4p/5/
我的回复：
使用第一个变量，您找到所有具有属性data-anchor 的元素，所以我猜querySelectorAll 中的括号告诉它我们指的是哪个特定属性，而不是我们想要的元素ID，这是“标准”写作@ 987654337@ 而不是 document.querySelectorAll("[attributeName]")。
使用第二个变量，您可以找到 ID 为 anchorLinks 的第一个元素。需要标签来指定 ID，因为querySelector 代表div 所以结果是div#anchorLinks(?)。
然后，您获取变量 anchors（这会导致具有 data-anchor 属性的 div 的 data-anchor 值的数组），对于每个变量，一个函数会触发其中的 d 参数函数等于具有data-anchor 属性的元素的元素ID。对于每个具有data-anchor 属性（即variable anchors）的元素，此函数中的所有内容都会重复。
函数中发生的事情是：
-您创建一个变量 (a)，其中包含 <a> 元素的元素创建
-然后将新创建的<a> 元素的href 属性设置为ID
的data-anchor 元素。
-然后我将<a>元素的属性title分配给data-anchor元素的内容（而不是原来的想法textContent被设置为<a>元素`as我希望链接是图像而不是文本）
-然后我还向<a> 元素添加了一个新的class 属性以设置它们的样式
【问题讨论】：
-
StackOverflow 不是免费的编码服务。 SO希望您try to solve your own problem first。请更新您的问题以在minimal reproducible example 中显示您已经尝试过的内容。如需更多信息，请参阅How to Ask，并拨打tour :)
-
我们希望通过指出您做错了什么以及如何解决它来帮助您学习。如果你不展示你的尝试，我们怎么能做到这一点？
-
而不是循环检查所有属性检查
attributes[x].name == "anchor"，只需调用elements[i].getAttribute("anchor")并查看它是否返回结果。 -
您是否要查找以
Anchor结尾的ID，例如firstAnchor、secondAnchor等？ -
你可以使用
if (element[x].id.test(/Anchor$/))
标签： javascript arrays iteration