通过Id获取多个元素

Question

我的整个身体都有一个带有锚标签的页面,如下所示:

<a id="test" name="Name 1"></a>
<a id="test" name="Name 2"></a>
<a id="test" name="Name 3"></a>

ID始终相同,但名称更改.

例如,我需要填充这些锚标记的名称列表; 名称1,名称2,名称3.这是我到目前为止所处的位置:

document.write(document.getElementById("readme").name);

这会写出第一个锚标记的名称.我需要一种通过Id获取多个元素的方法.

---

任何帮助是极大的赞赏.

Answer 1

如果您可以更改标记,则可能需要使用class.

<!-- html -->
<a class="test" name="Name 1"></a>
<a class="test" name="Name 2"></a>
<a class="test" name="Name 3"></a>

// javascript
var elements = document.getElementsByClassName("test");
var names = '';
for(var i=0; i<elements.length; i++) {
    names += elements[i].name;
}
document.write(names);

jsfiddle演示

Answer 2

与其他人可能会说的相反,对多个元素使用相同的Id不会阻止页面被加载,但是当尝试通过Id选择元素时,返回的唯一元素是指定了id的第一个元素.更不用说使用相同的ID甚至不是有效的HTML.

既然如此,永远不要使用重复的id属性.如果您认为自己需要,那么您正在寻找课程.例如:

<div id="div1" class="mydiv">Content here</div>
<div id="div2" class="mydiv">Content here</div>
<div id="div3" class="mydiv">Content here</div>

注意每个给定元素如何具有不同的id,但是同一个类.与上面所做的相反,这是合法的HTML语法.用于".mydiv"(点表示类)的任何CSS样式都将正确地用于具有相同类的每个单独元素.

在Snipplr的帮助下,您可以通过指定某个类名来使用它来获取每个元素:

function getAllByClass(classname, node) {

    if (!document.getElementsByClassName) {
        if (!node) {
            node =  document.body;
        }

        var a = [],
            re = new RegExp('\\b' + classname + '\\b'),
            els = node.getElementsByTagName("*");

        for (var i = 0, j = els.length; i < j; i++) {
            if (re.test(els[i].className)) {
                a.push(els[i]);
            }
        }
    } else {
        return document.getElementsByClassName(classname);
    }

    return a;
}

上面的脚本将返回一个数组,因此请确保为此正确调整.

Answer 3

你不能有重复的id.Ids应该是独一无二的.您可能希望使用专门的类.

Answer 4

今天你可以用这种方式选择具有相同id属性的元素:

document.querySelectorAll('[id=test]');

或者用jQuery这种方式:

$('[id=test]');

CSS选择器#test { ... }也适用于所有元素id = "test".Вut唯一的事情:( document.querySelectorAll('#test')或$('#test')) - 将只返回具有此id的第一个元素.是好还是不好 - 我说不出来.但有时很难遵循独特的标准.

例如,你有使用HTML-id的注释小部件和JS代码,使用这些HTML-id.迟早你需要多次渲染这个小部件,将不同的对象注释到一个页面中:这里的标准将被打破(通常没有时间或不允许 - 重写内置代码).

Answer 5

这是我想出的一个功能

function getElementsById(elementID){
    var elementCollection = new Array();
    var allElements = document.getElementsByTagName("*");
    for(i = 0; i < allElements.length; i++){
        if(allElements[i].id == elementID)
            elementCollection.push(allElements[i]);

    }
    return elementCollection;
}

显然,有一个由原型支持的约定,可能还有其他主要的JavaScript库.

但是,我发现美元符号函数已经成为document.getElementById()或多或少的事实上的快捷方式.让我们面对现实吧,我们都使用了document.getElementById().键入不仅需要时间,而且还会为代码添加字节.

这是原型的功能:

function $(element) {
  if (arguments.length > 1) {
    for (var i = 0, elements = [], length = arguments.length; i < length; i++)
      elements.push($(arguments[i]));
    return elements;
  }
  if (Object.isString(element))
    element = document.getElementById(element);
  return Element.extend(element);
}

[资源]

Answer 6

您应该使用 querySelectorAll，它将每个出现的地方写入一个数组，并允许您使用 forEach 来获取单个元素。

document.querySelectorAll('[id=test]').forEach(element=> 
    document.write(element);
});