부모 순수한 자바 스크립트의 자식 요소 찾기


142

가장 효율적인 방법은 순수한 자바 스크립트 만 사용하여 특정 부모 요소의 하위 요소 (클래스 또는 ID 포함)를 찾는 것입니다. jQuery 나 다른 프레임 워크가 없습니다.

이 경우, 나는 찾을 필요가 자식 1 또는 자식 2부모를 DOM 트리가 여러 개 가질 수있는 가정, 자식 1 또는 자식 2 트리에서 클래스 요소를. 부모 의 요소 만 원합니다

    <div class="parent">
        <div class="child1">
            <div class="child2">
            </div>
        </div>
    </div>


1
ID가 가장 쉬운 방법입니다. 그들은 독특해야하므로 할 수 있습니다 document.getElementById('element-id').
Felix Kling

1
다음, 일반 DOM 쿼리를 사용하여이 읽기 자식 노드를 얻기 위해 가장 좋은 방법
엘리아스 반 Ootegem

답변:


152

children속성은 다음과 같이 요소 배열을 반환합니다.

parent = document.querySelector('.parent');
children = parent.children; // [<div class="child1">]

당신이 원한다면 querySelector처럼 대안이 있습니다 document.getElementsByClassName('parent')[0].


편집 : 이제 그것에 대해 생각 querySelectorAll하기 때문에 parent클래스 이름이 child1다음 과 같은 데 사용 됩니다 .

children = document.querySelectorAll('.parent .child1');

qS와 qSA의 차이점은 후자가 선택기와 일치하는 모든 요소를 반환 하지만 전자는 첫 번째 요소 만 반환한다는 것입니다.


182

이미 가지고 있다면 var parent = document.querySelector('.parent');검색 범위를 parent어린이의 범위로 지정할 수 있습니다 .

parent.querySelector('.child')

1
당신은 또한 수 parent.querySelectorAll('.child')NodeList를 반환
schmijos

19

자식 선택기를 사용하여 즉각적인 어린이를 얻을 수있는 다른 아이디어를 추가

document.querySelectorAll(".parent > .child1");

클래스 .child1을 가진 모든 직계 자식을 반환해야합니다.


모든 사람들이 getElementBy **보다 querySelector를 제안하는 것을 보았습니다. 더 효율적입니까?
Andre

아마도 이것이 도움이 될 것입니다. stackoverflow.com/questions/14377590/…
웨일즈

2

부모 요소가 있고 특정 속성의 모든 자식을 가져 오려면 1. 부모를 가져옵니다. 2. parent.nodeName.toLowerCase()노드 이름을 소문자로 변환 하여 부모 노드 이름을 가져옵니다. 예를 들어 DIV는 div입니다. 부모 예 parent.getAttribute("id"). 이것은 당신을 줄 것이다 id부모 4. 그런 다음 사용의 document.QuerySelectorAll(paret.nodeName.toLowerCase()+"#"_parent.getAttribute("id")+" input " ); 상위 노드의 입력 자녀를 원하는 경우

let parent = document.querySelector("div.classnameofthediv")
let parent_node = parent.nodeName.toLowerCase()
let parent_clas_arr = parent.getAttribute("class").split(" ");
let parent_clas_str = '';
  parent_clas_arr.forEach(e=>{
     parent_clas_str +=e+'.';
  })
let parent_class_name = parent_clas_str.substr(0, parent_clas_str.length-1)  //remove the last dot
let allchild = document.querySelectorAll(parent_node+"."+parent_class_name+" input")

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.