クラス名で子要素を取得する方法 -- javascript フィールド と yui フィールド 関連 問題

How to get child element by class name?












154
vote

問題

日本語

クラス= 4の子スパンを取得しようとしています。ここに例の要素は例:

<事前> <コード> <div id="test"> <span class="one"></span> <span class="two"></span> <span class="three"></span> <span class="four"></span> </div>

私が利用できるツールはJSとYUI2です。私はこのようなことができる:

<事前> <コード> doc = document.getElementById('test'); notes = doc.getElementsByClassName('four'); //or doc = YAHOO.util.Dom.get('#test'); notes = doc.getElementsByClassName('four');

これらはIEでは機能しません。オブジェクト(doc)がこのメソッドまたはプロパティ(getElementsByClassName)をサポートしていないというエラーが発生します。 getElementsByClassNameのクロスブラウザ実装の例をいくつか試しましたが、それらを作業にすることができず、まだそのエラーが発生しました。

私は私が必要なものをクロスブラウザのgetelementsByClassNameであるか、doc.getElementsBytagname( 'span')を使用する必要があります。

英語

I'm trying to get the child span that has a class = 4. Here is an example element:

<div id="test">  <span class="one"></span>  <span class="two"></span>  <span class="three"></span>  <span class="four"></span> </div> 

The tools I have available are JS and YUI2. I can do something like this:

doc = document.getElementById('test'); notes = doc.getElementsByClassName('four');  //or  doc = YAHOO.util.Dom.get('#test'); notes = doc.getElementsByClassName('four'); 

These do not work in IE. I get an error that the object (doc) doesn't support this method or property (getElementsByClassName). I've tried a few examples of cross browser implementations of getElementsByClassName but I could not get them to work and still got that error.

I think what I need is a cross browser getElementsByClassName or I need to use doc.getElementsByTagName('span') and loop through until I find class 4. I'm not sure how to do that though.

</div
     
         
         

回答リスト

103
 
vote
vote
ベストアンサー
 

-N3 を使用して、各<コード> -N4 を繰り返し、<コード> -N5 が -N6 :<:<符号>:< / P> <事前> <コード> -N7

 

Use doc.childNodes to iterate through each span, and then filter the one whose className equals 4:

var doc = document.getElementById("test"); var notes = null; for (var i = 0; i < doc.childNodes.length; i++) {     if (doc.childNodes[i].className == "4") {       notes = doc.childNodes[i];       break;     }         } 

</div
 
 
         
         
167
 
vote

QuerySelectorとQuerySelectorall

を使用 <事前> <コード> -N8

IE9と上限

;)

 

Use querySelector and querySelectorAll

var testContainer = document.querySelector('#test'); var fourChildNode = testContainer.querySelector('.four'); 

IE9 and upper

;)

</div
 
 
   
   
48
 
vote

受け入れられた回答は即時の子供だけをチェックします。多くの場合、そのクラス名の子孫を探しています。

また、がclassnameを含む任意の子が必要な場合もあります。

<div class="img square"></div> は、 exact classNameが "img"ではありませんが、classname "img"の検索と一致する必要があります。

これはこれらの問題の両方の解決策です。

Class className

を使用して、子孫要素の最初のインスタンスを見つけます。 <事前> <コード> function findFirstChildByClass(element, className) { var foundElement = null, found; function recurse(element, className, found) { for (var i = 0; i < element.childNodes.length && !found; i++) { var el = element.childNodes[i]; var classes = el.className != undefined? el.className.split(" ") : []; for (var j = 0, jl = classes.length; j < jl; j++) { if (classes[j] == className) { found = true; foundElement = element.childNodes[i]; break; } } if(found) break; recurse(element.childNodes[i], className, found); } } recurse(element, className, false); return foundElement; }
 

The accepted answer only checks immediate children. Often times we're looking for any descendants with that class name.

Also, sometimes we want any child that contains a className.

For example: <div class="img square"></div> should match a search on className "img", even though it's exact className is not "img".

Here's a solution for both of these issues:

Find the first instance of a descendant element with the class className

   function findFirstChildByClass(element, className) {         var foundElement = null, found;         function recurse(element, className, found) {             for (var i = 0; i < element.childNodes.length && !found; i++) {                 var el = element.childNodes[i];                 var classes = el.className != undefined? el.className.split(" ") : [];                 for (var j = 0, jl = classes.length; j < jl; j++) {                     if (classes[j] == className) {                         found = true;                         foundElement = element.childNodes[i];                         break;                     }                 }                 if(found)                     break;                 recurse(element.childNodes[i], className, found);             }         }         recurse(element, className, false);         return foundElement;     } 
</div
 
 
       
       
22
 
vote

Element.QuerySelector()を使用します。 させる: 'myElement'はあなたがすでに持っている親要素です。 'sonclassname'はあなたが探している子供のクラスです。

<事前> <コード> let child = myElement.querySelector('.sonClassName');

詳細については、vish: HTTPS:// Developer。 mozilla.org/en-us/docs/web/api/element/querySelector

 

Use element.querySelector(). Lets assume: 'myElement' is the parent element you already have. 'sonClassName' is the class of the child you are looking for.

let child = myElement.querySelector('.sonClassName'); 

For more info, visit: https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector

</div
 
 
   
   
11
 
vote

試すことができます:

<事前> <コード> notes = doc.querySelectorAll('.4');

または

<事前> <コード> notes = doc.getElementsByTagName('*'); for (var i = 0; i < notes.length; i++) { if (notes[i].getAttribute('class') == '4') { } }
 

You could try:

notes = doc.querySelectorAll('.4'); 

or

notes = doc.getElementsByTagName('*'); for (var i = 0; i < notes.length; i++) {      if (notes[i].getAttribute('class') == '4') {     } } 
</div
 
 
 
 
8
 
vote

私にはあなたが4番目のスパンが欲しいようです。もしそうなら、あなたはただこれをすることができます:

<事前> <コード> document.getElementById("test").childNodes[3]

または

<事前> <コード> document.getElementById("test").getElementsByTagName("span")[3]

この最後のものはそれを台無しにすることができる隠されたノードがないことを保証します。

 

To me it seems like you want the fourth span. If so, you can just do this:

document.getElementById("test").childNodes[3] 

or

document.getElementById("test").getElementsByTagName("span")[3] 

This last one ensures that there are not any hidden nodes that could mess it up.

</div
 
 
       
       
7
 
vote

現代の解決策

<事前> <コード> const context = document.getElementById('context'); const selected = context.querySelectorAll(':scope > div');

ドキュメント

 

Modern solution

const context = document.getElementById('context'); const selected = context.querySelectorAll(':scope > div'); 

documentation

</div
 
 
5
 
vote

しかし、古いブラウザが getElementsByClassName をサポートしていないことに注意してください。

それでは、

<事前> <コード> className0

それはうまくいくようですが、HTMLクラス

に注意してください。
  • 文字で始める必要があります:a-zまたはa-z
  • の後に、文字(A-ZA-Z)、数字(0~9)、ハイフン(「 - 」)、およびアンダースコア(「_」)
 

But be aware that old browsers doesn't support getElementsByClassName.

Then, you can do

function getElementsByClassName(c,el){     if(typeof el=='string'){el=document.getElementById(el);}     if(!el){el=document;}     if(el.getElementsByClassName){return el.getElementsByClassName(c);}     var arr=[],         allEls=el.getElementsByTagName('*');     for(var i=0;i<allEls.length;i++){         if(allEls[i].className.split(' ').indexOf(c)>-1){arr.push(allEls[i])}     }     return arr; } getElementsByClassName('4','test')[0]; 

It seems it works, but be aware that an HTML class

  • Must begin with a letter: A-Z or a-z
  • Can be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), and underscores ("_")
</div
 
 
3
 
vote

className1 、<コード> className2 符号を持つIDの名前を使用します。その後、<コード> className4 を使用して className3 子ノードを取得し、正しいクラスの1つを見つけることができます。

<事前> <コード> className5

デモ: http://jsfiddle.net/guffa/xb62u/

 

Use the name of the id with the getElementById, no # sign before it. Then you can get the span child nodes using getElementsByTagName, and loop through them to find the one with the right class:

var doc = document.getElementById('test');  var c = doc.getElementsByTagName('span');  var e = null; for (var i = 0; i < c.length; i++) {     if (c[i].className == '4') {         e = c[i];         break;     } }  if (e != null) {     alert(e.innerHTML); } 

Demo: http://jsfiddle.net/Guffa/xB62U/

</div
 
 
   
   
3
 
vote

私の意見では、あなたができるたびに、あなたは配列とその方法を使うべきです。それらは多くの場合、DOM /ラッパー全体を越えてループする、または物を空の配列に押し込みます。ここに記載されているソリューションの大部分は、ここに記載されているようにナイーブを呼ぶことができます(素晴らしい記事BTW):

https:// midied.com/@chuckdries/traversing-the-dom-with-filter-map-and - " - 関数 - 関数 - 関数 - 関数 - 関数-functions-1417d326d2bc

私の解決策 :( Codepenのライブプレビュー: https:// codepen 。iio / nikolaus91 / pen / wegeye )

<事前> <コード> document.getElementById("test").childNodes[3] 16
 

In my opinion, each time you can, you should use Array and its methods. They are much, much faster then looping over the whole DOM / wrapper, or pushing stuff into empty array. Majority of solutions presented here you can call Naive as described here (great article btw):

https://medium.com/@chuckdries/traversing-the-dom-with-filter-map-and-arrow-functions-1417d326d2bc

My solution: (live preview on Codepen: https://codepen.io/Nikolaus91/pen/wEGEYe)

const wrapper = document.getElementById('test') // take a wrapper by ID -> fastest const itemsArray = Array.from(wrapper.children) // make Array from his children  const pickOne = itemsArray.map(item => { // loop over his children using .map() --> see MDN for more    if(item.classList.contains('four')) // we place a test where we determine our choice      item.classList.add('the-chosen-one') // your code here }) 
</div
 
 
2
 
vote

下記の行を追加して、親クラスを取得できます。 IDがあった場合は、 getElementById で簡単になります。それにもかかわらず、

<事前> <コード> var parentNode = document.getElementsByClassName("progress__container")[0];

その後、親 querySelectorAll querySelectorAll をクラス<コード> .progress__marker < <<符号> < / P> <事前> <コード> var progressNodes = progressContainer.querySelectorAll('.progress__marker');

querySelectorAll div ごとに 9988777669

のクラスでフェッチします。

 

You can fetch the parent class by adding the line below. If you had an id, it would be easier with getElementById. Nonetheless,

var parentNode = document.getElementsByClassName("progress__container")[0]; 

Then you can use querySelectorAll on the parent <div> to fetch all matching divs with class .progress__marker

var progressNodes = progressContainer.querySelectorAll('.progress__marker'); 

querySelectorAll will fetch every div with the class of progress__marker

</div
 
 
1
 
vote

jQueryを使ってこれを行う方法はこのようなものです..

var targetedChild = $( "#test")。子供()Find( "span.four");

 

The way i will do this using jquery is something like this..

var targetedchild = $("#test").children().find("span.four");

</div
 
 
 
 
1
 
vote

は比較的単純な再帰的解です。私は幅優先探索がここに適切であると思います。これは見つかったクラスに一致する最初の要素を返します。

<事前> <コード> var parentNode = document.getElementsByClassName("progress__container")[0]; 0
 

Here is a relatively simple recursive solution. I think a breadth-first search is appropriate here. This will return the first element matching the class that is found.

function getDescendantWithClass(element, clName) {     var children = element.childNodes;     for (var i = 0; i < children.length; i++) {         if (children[i].className &&             children[i].className.split(' ').indexOf(clName) >= 0) {             return children[i];          }      }      for (var i = 0; i < children.length; i++) {          var match = getDescendantWithClass(children[i], clName);          if (match !== null) {              return match;          }      }      return null; } 
</div
 
 
1
 
vote

私はこの質問が数歳で、これに対するいくつかの答えがあることを知っていますが、私はそれが誰かを助けるために私の解決策を追加するだろうと思いました。 user2795540 で与えられた答えと同じ静脈内にあり、アレイイテレータが含まれます。

var parentNode = document.getElementsByClassName("progress__container")[0]; 1 クラスを持つ最初の子を手に入れたい場合は、 var parentNode = document.getElementsByClassName("progress__container")[0]; 2 iteratorを使用できます。あなたのブラウザはES6をサポートできるか、Babelを使用してJSをすべてのブラウザにコンパイルできるようにすることができます。 IEは、ポリフィルなしでこれをサポートしないでしょう

あなたの質問で提供されたのと同じ詳細を使ってこのようなものを見ることができます:

 <コード> var parentNode = document.getElementsByClassName("progress__container")[0]; 3  

上記の解決策は、ターゲットをターゲットにしたいノードを返し、保存します。 var parentNode = document.getElementsByClassName("progress__container")[0]; 4 変数。

https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/array/find

 

I know this question is a few years old and there have been a few answers to this but I thought I would add my solution just in case it helps anyone. It's in the same vein as the answer given by user2795540 and involves an array iterator.

If you're just wanting to get the first child that has the four class then you could use the find array iterator. Your browser will need to be able to support ES6 or you can use Babel to compile your JS into something all browsers will support. IE will not support this without a polyfill.

Using the same details you provided in your question it could look something like this:

const parentNode = document.getElementById('test'); const childNode = Array.from(parentNode.childNodes).find(({ className }) => className === 'four'); 

The above solution will return the node you want to target and store it in the childNode variable.

You can find out more about the find array iterator at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

</div
 
 
 
 
0
 
vote

2018年6月ES6

に更新 <事前> <コード> var progressNodes = progressContainer.querySelectorAll('.progress__marker'); 16
 

June 2018 update to ES6

    const doc = document.getElementById('test');     let notes = null;     for (const value of doc) {         if (value.className === '4') {             notes = value;             break;         }         } 
</div
 
 
0
 
vote

QuerySelector

を使用しています

 <コード> var doc=document.getElementById("test"); console.log(doc.querySelector('.two').innerHTML)  
 <コード> <div id="test">  <span class="one"></span>  <span class="two">two</span>  <span class="three"></span>  <span class="four"></span> </div>  
QuerySelectorAllを使用してください

 <コード> var doc=document.getElementById("test"); console.log(doc.querySelectorAll('*')[1].innerHTML)  
 <コード> <div id="test">  <span class="one"></span>  <span class="two">two</span>  <span class="three"></span>  <span class="four"></span> </div>  

GetElementsByTagnames

を使用しています

 <コード> var doc=document.getElementById("test"); console.log(doc.getElementsByTagName("SPAN")[1].innerHTML);  
 <コード> <div id="test">  <span class="one"></span>  <span class="two">two</span>  <span class="three"></span>  <span class="four"></span> </div> <span>ss</span>  

getElementsByClassName

を使用しています

 <コード> var doc=document.getElementById("test"); console.log(doc.getElementsByClassName('two')[0].innerHTML)  
 <コード> <div id="test">  <span class="one"></span>  <span class="two">two</span>  <span class="three"></span>  <span class="four"></span> </div>  
 

using querySelector

var doc=document.getElementById("test"); console.log(doc.querySelector('.two').innerHTML)
<div id="test">  <span class="one"></span>  <span class="two">two</span>  <span class="three"></span>  <span class="four"></span> </div>
Using querySelectorAll

var doc=document.getElementById("test"); console.log(doc.querySelectorAll('*')[1].innerHTML)
<div id="test">  <span class="one"></span>  <span class="two">two</span>  <span class="three"></span>  <span class="four"></span> </div>

using getElementsByTagNames

var doc=document.getElementById("test"); console.log(doc.getElementsByTagName("SPAN")[1].innerHTML);
<div id="test">  <span class="one"></span>  <span class="two">two</span>  <span class="three"></span>  <span class="four"></span> </div> <span>ss</span>

Using getElementsByClassName

var doc=document.getElementById("test"); console.log(doc.getElementsByClassName('two')[0].innerHTML)
<div id="test">  <span class="one"></span>  <span class="two">two</span>  <span class="three"></span>  <span class="four"></span> </div>
</div
 
 
-2
 
vote

YUI2には、 getElementsByClassName のクロスブラウザ実装

 

YUI2 has a cross-browser implementation of getElementsByClassName.

</div
 
 
     
     
-3
 
vote

これは私がYuiセレクタを使った方法です。ハンクゲイの提案をおかげで。

<事前> <コード> notes = YAHOO.util.Dom.getElementsByClassName('four','span','test');

ここで、4 = classname、span =要素型/タグ名、およびtest =親ID。

 

Here is how I did it using the YUI selectors. Thanks to Hank Gay's suggestion.

notes = YAHOO.util.Dom.getElementsByClassName('four','span','test'); 

where four = classname, span = the element type/tag name, and test = the parent id.

</div
 
 
-4
 
vote

<div id="test"> <span class="one"></span> <span class="two">two</span> <span class="three"></span> <span class="four"></span> </div>0 からこちら< / a>。

 

Use YAHOO.util.Dom.getElementsByClassName() from here.

</div
 
 

関連する質問

1  YUI、2列レイアウトの余白を取り除く方法は?  ( Yui how to remove the margins for a 2 column layout ) 
2列に触れることを望みます。余白を取り除く、どうすればいいですか? マイコード: <事前> <コード> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <H...

2  JavaScriptフレームワークの人気[クローズ]  ( Javascript framework popularity ) 
この質問はスタックオーバーフローガイドラインを満たしていません。現在答えを受け付けていません。 この質問を改善したいですか? O...

3  ASP.NET MVCと... YUI? jQuery?他の  ( Asp net mvc and yui jquery other ) 
最後のプロジェクトの後、Webフォームを使用していた後、将来そのフレームワークの使用を継承することにしました。それはあなたの基本的な機能をそこに入れるのに素晴らしいことです...あなたがより複雑なUIロジックを持っているときそれほど素晴らしくはありません。 私...

2  YUI、ASP.NET、またはGoogleデータソースに相当するjQueryはありますか?  ( Is there a jquery equivalent to the yui asp net or google datasource ) 
私が好きなことの1つは yui framework が datasource コントロール。さまざまなソースからデータをインテリジェントに取得し、標準的な方法で他のUIウィジェットに差し込む一般的なウィジェット。そのため、表形式のデータをデータソースに取り出し...

0  互いに別のYUIオブジェクトにアクセスする方法  ( How to access separate yui object from one another ) 
「ワークフローの開始」ページでは、Form-Engineから「Workflowの起動」フォームが生成されます。 フォームを送信するときに「ワークフローの開始」ボタンを無効にしたい。いつ コールバック、このボタンを有効にしたいです。 start-wo...

2  YUI3リッチテキストエディタ:動的ビジュアルスタイル  ( Yui3 rich text editor dynamic visual styles ) 
完全なYui Newbieここに。 次のように、YUI3テキストエディタコントロールのテキストをユーザータイプとしてテキストの背景を動的にカラーに色付ける必要があります。 テキストの最初の行はオレンジ色です。 -- で始まる行がオレンジ色になるまでのすべ...

0  yui 3 datableの列のドロップダウン  ( Yui 3 rendering dropdown in a column on a datatable ) 
列の1つをドロップダウンにカスタマイズしようとしています。これはJSONレスポンスであり、ドロップダウンリストにカスタマイズしたい列に対する応答は配列です。 SELECTタグとオプションタグに文字列を作成できますが、データテーブルでは、ドロップダウンとしては文...

1  既存のYUIベースのスクリプトをjQueryコードに変換する良い方法はありますか?  ( Is there any good way to convert existing yui based scripts into jquery code ) 
私のサイトはyuiに基づいていましたが、私のサイトを.NET MVCとjQueryにアップグレードする予定です。既存のYUIスクリプトをjQueryに変換する予定です。 ...

1  YUIメニューのjQueryの置き換え - >メニューの失敗  ( Jquery replacement of yui menu menu fail ) 
私は、とりわけ、単純なYUIメニューを含むDIVを持っています - それはDIVの内側のウィジェットに接続されているポップアップです。メニュー内のアクションの1つは、サーバーへのAJAX呼び出しを行うJavaScript関数を呼び出し、DIVの新しいコンテンツ...

2  DjangoとAjax - 私は何が間違っていますか?  ( Django and ajax what am i doing wrong ) 
Djangoをajaxで使って、簡単な検索サーバーを書いています。 サーバー自体はうまく機能しますが、検索ウィジェットにオートコンプリートを追加するのに苦労しています。 (私は利用可能なDjangoスニペットを使用したくない、彼らは私が欲しいものを正確にしな...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有