jquery .children()

#hostingforum.kr
javascript

// HTML

<div id="parent">

  <p>자식 1</p>

  <p>자식 2</p>

  <p>자식 3</p>

</div>



// 자바스크립트

const parent = document.getElementById('parent');

const children = parent.children;



console.log(children); // HTMLCollection(3) [p, p, p]



// 각 자식 요소에 접근

for (let i = 0; i < children.length; i++) {

  console.log(children[i].textContent); // 자식 1, 자식 2, 자식 3

}

#hostingforum.kr
javascript

// jQuery

$('#parent').children().each(function() {

  console.log($(this).text()); // 자식 1, 자식 2, 자식 3

});



// 자바스크립트

const parent = document.getElementById('parent');

const children = parent.children;



Array.from(children).forEach(child => {

  console.log(child.textContent); // 자식 1, 자식 2, 자식 3

});

#hostingforum.kr
javascript

// HTML

<div id="parent">

  <p>자식 1</p>

  <p>자식 2</p>

  <p>자식 3</p>

</div>



// 자바스크립트

const parent = document.getElementById('parent');

const children = parent.children;

const childNodes = parent.childNodes;



console.log(children); // HTMLCollection(3) [p, p, p]

console.log(childNodes); // NodeList(5) [ #text, p, #text, p, #text ]



// 각 자식 요소에 접근

for (let i = 0; i < children.length; i++) {

  console.log(children[i].textContent); // 자식 1, 자식 2, 자식 3

}



// 각 자식 노드에 접근

for (let i = 0; i < childNodes.length; i++) {

  console.log(childNodes[i].nodeType); // 3, 1, 3, 1, 3

}