JavaScript를 사용하여 부모의 하위 요소 찾기

JavaScript를 사용하여 부모의 하위 요소 찾기

순수 javascript만을 사용하여 특정 부모 요소의 (클래스 또는 ID를 가진) 자녀 요소를 찾는 가장 효율적인 방법은 무엇입니까?jQuery 또는 기타 프레임워크가 없습니다.

이 경우 트리에 여러 child1 또는 child2 클래스 요소가 있을 수 있다고 가정할 때 부모의 child1 또는 child2를 찾아야 합니다.나는 부모의 요소만을 원한다.

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

이미 가지고 계신 경우var parent = document.querySelector('.parent');이를 통해 검색 범위를 지정할 수 있습니다.parent의 자녀:

parent.querySelector('.child')

그childrenproperty는 다음과 같은 요소의 배열을 반환합니다.

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의 차이점은 후자는 셀렉터와 일치하는 모든 요소를 반환하는 반면 전자는 이러한 첫 번째 요소만 반환한다는 것입니다.

아이 셀렉터를 사용하여 직계 아동을 얻을 수 있는 다른 아이디어를 추가했습니다.

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

class .child1의 모든 직계자녀를 반환해야 합니다.

요소query Selector()가 최선의 방법입니다.

const parent = document.querySelector('.parent'); 
// Do anything next //When you want
parent.querySelector('.child1'); // <div class="child1">

부모 요소가 있는 경우, 특정 속성 1의 모든 자식을 가져옵니다. 부모 2. 를 사용하여 부모 노드 이름을 가져옵니다.parent.nodeName.toLowerCase()노드명을 소문자로 변환합니다.예를 들어 DIV는 div 3이 됩니다.좀 더 구체적인 목적을 위해 부모 속성을 가져옵니다.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")

언급URL : https://stackoverflow.com/questions/16302045/finding-child-element-of-parent-with-javascript