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> </a> </div> </body> </html>
나는 그 범위를 아래에서 얻고 싶다.
아이디어 1 : 먼저 부모 요소를 얻은 다음이 요소 아래의 요소를 for 루프를 통해 가져온 다음 대상 요소가 얻어 질 때까지 이번에 얻은 요소를 통해 아래의 요소를 루프하십시오.
// 부모 요소 var dbox = document.getElementByid ( 'box'); // 모든 divvar ddiv = dbox.getElementsBytagName ( 'div'); // 모든 태그를 darr var aarr = []; for (var에 넣습니다. 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'); // 필터링 된 스팬 바 ARR = []를 저장하기 위해 배열을 정의합니다. 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> 요소는 여러 계층이 중첩되며, js 획득 문제 </title> </head> <div id = "box"> <span "> <span"> <href = <a href = ""> isspan = 'span'> 1 </span> </a> </div> <div> <a href = ""> <span isspan = 'span'> 2 </span> </a> </div> <a href = ""> <span isspan = 'span'> 3 </span> </a> </body> </html>
JS
// 부모 요소 var dbox = document.getElementById ( 'box'); // 모든 자식 요소를 가져옵니다 var dspan = dbox.getElementsByTagName ( 'span'); // 현재 요소 var str = ''; // 모든 필터링 된 스팬 요소 var spans = []; for (var i =; i <dspan.length; i ++) dspan [i] .outerhtml; console.log (str); // 현재 요소에 사용자 정의 속성이 있는지 결정합니다. (/isspan = "span"/. test (str)) {// 그렇다면 배열 spans.push (dspan [i]);} console.log (spans)에 추가합니다.클래스 또는 사용자 정의 속성을 사용하여 얻는 것이 좋습니다. 첫 번째와 두 번째 방법은 정확하지 않습니다.
위는 편집자가 소개 한 JS 요소의 다층 중첩입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 그리고 당신이 wulin.com 웹 사이트를 더 지원하기를 바랍니다!