Question

我在数组中有DOM元素

this.object = 
     <div>
     <span class="color">"color1</span> 
     <span class="text">text1</span>
     </div>

     <div>
     <span class="color">"color2</span> 
     <span class="text">text2</span>
     </div>

     <div>
     <span class="color">"color3</span> 
     <span class="text">text3/span>
     </div>

     <div>
     <span class="color">"color4</span> 
     <span class="text">text4</span>
     </div>

这个DOM存在于DOM（this.object）数组中

我如何仅更新阵列中的第一个跨度或仅更新第二个跨度，我无法使用我的程序技术问题中的ID。

我试过用 this.element.children[i]但后来我不知道如何找到第一个或第二个跨度

Answer 1

您可以使用this.element[i]访问数组中的任何元素，然后您可以访问这些元素的子元素：

this.element[0].childNodes[0].innerHTML = "paint one";

Answer 2

使用jQuery避免任何跨浏览器问题。假设您有div，请使用div.find('span:eq(1)');

Working example.

Working example了解多个项目。

另一个example显示正在更新的文字。

Answer 3

你应该使用jquery然后你可以这样写：

$('.color').html('updated text')

Answer 4

您可以使用querySelectors：

//find first element with class 'color' within a div
//returns an element Node
[yourdiv].querySelector('.color');
//find all elements with class 'color' within a document
//returns a nodeList
document.querySelectorAll('.color');

或getElementsByClassName：

//find first element with class 'color' within a div
//returns a nodeList with 1 or more elements
[yourdiv].getElementsByClassname('.color')[0];
//find all elements with class 'color' within a document
//returns a nodeList
document.getElementsByClassName('.color');

Answer 5

您可以使用getElementsByClassName()。

document.getElementsByClassName("color")[0];

但你必须记住两件事：1。）getElementsByClassName()并非完全跨浏览器兼容。 2.）您有两个知道color元素的位置。如果您只使用了类color，那么该示例可以完美运行。

两个解决问题1.）您可以使用以下解决方法：

function getElementsByClassName(node, classname) {
    var a = [];
    var re = new RegExp('(^| )'+classname+'( |$)');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}

如何在不使用ID的情况下查找元素

5 个答案: