HTMLの段落がネストされている場合、JSで取得するのはまだ非常に面倒です。私はいくつかのソリューションのセットを書きました、あなたはそれらを参照することができます。良い方法がある場合は、共有してください。見てみましょう。
HTML:
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>要素は複数のレイヤーでネストされています。 href = ""> <span> 1 </span> </a> </div> <div> <a href = ""> <span> 2 </span> </a> </div> <div> <a href = "" "> <span> 3 </a> </div> </body> </html>
スパンを下にしたい。
アイデア1:最初に親要素を取得し、次にこの要素の下の要素をforループを介して取得し、次にターゲット要素が取得されるまで今回得られた要素を通して下の要素をループします。
//親要素を取得var dbox = document.getElementById( 'box'); //すべてのdivvar ddiv = dbox.getelementsbytagname( 'div'); //すべてのタグをdarr var aarr = []; i = 0; i <ddiv.length; i ++){aarr.push(ddiv [i] .getelementsbytagname( 'a')[0]);} //すべてのspanvar spanarr = []; for(var i = 0; i <aarr.length; i ++){spanarr.push(aarr [i] .getelementsbytagname( 'span')[0]);} console.log(spanarr);短所:パフォーマンスの消費。もう少しネストすると、ターゲット要素を取得するのは非常に面倒です。
アイデア2:親要素を使用してターゲット要素を直接取得しますが、親要素の下にすべてのスパンを取得するため、これを行うことは間違いなく問題があります。私の考えは、親要素がタグであるかどうかを判断することです。
var box = document.getElementbyid( 'box'); //すべてのspanvar span = box.getelementsbytagname( 'span'); // filtered spanvar arr = []; for(var i = 0; i <span.length; i ++){// spanは親の基本であるかどうかを判断するために(var i = 0; i <span.length; i ++){// if(span [i] .parentnode.tagname === 'a'){arr.push(span [i]);}} console.log(arr);アイデア1とアイデア2は大丈夫ですが、実際には欠点があります。レイアウトがより複雑な場合、得られるものがそれほど正確ではないかもしれません。
正確に取得したい場合は、各要素にクラスを追加できます。しかし、クラスの場合、ブラウザには互換性の問題があります。
突然、私は別の方法を考えました。
アイデア:属性をカスタマイズすることにより、JSでJSカスタム属性を取得することに互換性のある問題があるため、この要素にカスタマイズされた属性があるかどうかを判断するために規則性を使用します。
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>要素は複数のレイヤーでネストされています。 ISSPAN = 'SPAN'> 1 </span> </a> </div> <div> <a href = ""> <span isspan = 'span'> 2 </span> </a> </div> <a href = "" "> <span isspan = 'span'> 3 </span> </a> </div> </html>
JS
//親要素を取得するvar dbox = document.getElementbyid( 'box'); //すべての子要素var dspan = dbox.getelementsbytagname( 'span'); // current element var str = ''; //すべてのフィルターされたスパン要素var spans = []; dspan [i] .outerhtml; console.log(str); //現在の要素にカスタム属性があるかどうかを決定するif(/sisspan = "span"/。test(str)){//アレイspans.push(dspan [i]);}} console.log(spans);クラスまたはカスタム属性を使用して取得することをお勧めします。最初と2番目の方法は不正確です。
上記は、編集者が紹介したJS要素の多層ネスティングです。それがあなたに役立つことを願っています、そしてあなたがwulin.comのウェブサイトをもっとサポートすることを願っています!