我对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的直接回答(对于其他评论字段来说太长了(
测试：http://jsfiddle.net/e5u03g4p/5/
我的回复：
使用第一个变量，您找到了所有具有属性data-anchor的元素，所以我想querySelectorAll中的括号告诉它我们指的是哪个特定属性，而不是我们想要的元素 ID，这是"标准"写作document.querySelectorAll("tagName")而不是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>元素的原始想法'因为我希望链接是图像而不是文本(
-然后我还在<a>元素中添加了一个新的class属性，以便设置它们的样式
如果您在 DIV 中使用了data-anchor="something"，那么您应该使用
var anchors = document.querySelectorAll('[data-anchor]');
不[anchor].
然后，您可以使用forEach()遍历它们
var anchorLinks = document.querySelector("#anchorLinks");
anchors.forEach(function(d) {
var a = document.createElement('a');
a.href = '#' + d.id;
a.textContent = 'Link to ' + d.textContent.toLowerCase();
anchorLinks.appendChild(a);
});
如果正确制作查询选择器，则可以一次获取所有"锚点"元素，然后迭代它们以添加相关链接。
var links = document.getElementById('anchorLinks');
document.querySelectorAll('#anchors div[id]').forEach(function(anchor) {
var link = document.createElement('a');
link.href = '#' + anchor.id;
link.textContent = 'Link for ' + anchor.textContent;
links.appendChild(link);
});<div id="anchors">
<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>
</div>
<div id="anchorLinks">
</div>这个怎么样：
document.getElementsByTagName('div').forEach(function(d) {
var a = document.createElement('a');
a.setAttribute('href', '#' + d.id);
a.innerHTML = 'Link to ' + d.textContent.toLowerCase();
document.getElementById('anchorLinks').appendChild(a);
});
或者，如果您有更多的div(当然(并且它们具有特定的类，则可以执行以下操作：
document.getElementsByClassName('your-class-name').forEach(function(d) {
var a = document.createElement('a');
a.setAttribute('href', '#' + d.id);
a.innerHTML = 'Link to ' + d.textContent.toLowerCase();
document.getElementById('anchorLinks').appendChild(a);
});