如何找到不使用ID元件

我在阵列DOM元素如何找到不使用ID元件

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]但我不知道如何找到第一或第二跨度

来源

2012-08-05 user1365697

这是什么？ 'div'元素？ – 2012-08-05 08:35:22

对不起，这应该是DOM元素的数组，具有结构

– user1365697 2012-08-05 08:38:01

也许http://jsfiddle.net可以帮助说明您的问题，如果你没有得到一个好的答案。 – 2012-08-05 08:48:56

使用jQuery，以避免任何跨浏览器的问题。假设你已经在div，使用div.find('span:eq(1)');

Working example.

Working example多个项目。

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

来源

2012-08-05 08:34:09

谢谢，我更新我的问题怎么可能做到DOM数组？ – user1365697 2012-08-05 08:39:22

我更新了我的问题 – user1365697 2012-08-05 08:41:46

@ user1365697查看具有多个div的新示例。 – 2012-08-05 08:44:52

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

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

来源

2012-08-05 08:34:25

它可能没有jQuery？ – user1365697 2012-08-05 08:35:57

我也有DOO数组有相同的信息，我怎么能找到相关的实例 – user1365697 2012-08-05 08:37:00

你可以使用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');

来源

2012-08-05 08:41:54 KooiInc

虽然注意两个选项都不是跨浏览器兼容的。 – 2012-08-05 08:50:55

*不跨浏览器兼容*大部分时间表示：IE有问题。对于这些方法：IE> 7支持'querySelector'。对于'getElementsByClassName'，有垫片，如http://code.google.com/p/getelementsbyclassname/source/browse/trunk/getElementsByClassName.js。 – KooiInc 2012-08-05 08:57:27

你可以使用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; 
}

来源

2012-08-05 08:42:07 Amberlamps

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

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

来源

2012-08-05 08:55:13 Guffa

如何找到不使用ID元件

回答

相关问题