0

配列に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）に存在します

アレイの最初のスパンのみまたは2番目のスパンのみを更新する方法、プログラムの技術的な問題からIDを使用できません。

使ってみまし this.element.children[i]たが、1番目または2番目のスパンを見つける方法がわかりませんでした

4

5 に答える 5

2

を使用this.element[i]して配列内の任意の要素にアクセスすると、それらの要素の子にアクセスできます。

this.element[0].childNodes[0].innerHTML = "paint one";
于 2012-08-05T08:55:13.707 に答える
1

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-05T08:41:54.003 に答える
1

を使用できますgetElementsByClassName()。

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

ただし、次の2つのことを覚えておく必要があります。1。）getElementsByClassName()クロスブラウザとの完全な互換性はありません。color2.）要素がどの位置にあるかを2つ知っています。color例が完全に機能するのは一度だけクラスを使用する場合。

2つは問題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-05T08:42:07.503 に答える
1

クロスブラウザの問題を回避するには、jQueryを使用します。あなたがdivを持っていると仮定して、div.find('span:eq(1)');

実例。

複数のアイテムの実例。

更新されているテキストを示す別の例。

于 2012-08-05T08:34:09.797 に答える
1

jqueryを使用する必要があります。そうすれば、次のように記述できます。

$('.color').html('updated text')
于 2012-08-05T08:34:25.997 に答える