반응형
Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Life goes slowly...

[Javascript] 자바스크립트(JS)의 자식노드 접근 - childNodes 본문

프로그래밍/Javascript

[Javascript] 자바스크립트(JS)의 자식노드 접근 - childNodes

빨강소 2021. 3. 24. 16:27
728x90
반응형

 

 

자바스크립트(Javascript)의 자식노드 접근방법

childNodes은 자바스크립트(Javascript)에서 자식 element나 노드에 접근하는 방법으로, 현재 element의 자식 노드가 포함된 노드 List를 반환합니다. 이때 반환되는 노드 List에는 element의 노드 뿐만 아니라 주석 노드와 같은 비요소 노드를 포함합니다.

 

//childNodes 사용방법

element.childNodes

 

<ul>
    <li>1. 철수</li>
    <li id="test">2. 동건</li>
    <li>3. 토마스</li>
    <li>4. 원빈</li>
    <li>5. 인성</li>
</ul>


console.log(document.querySelector("ul").childNodes)

 

[object NodeList] {
  0: [object Text] {
    addEventListener: function addEventListener() { [native code] },
    after: function after() { [native code] },
    appendChild: function appendChild() { [native code] },
    appendData: function appendData() { [native code] },
    assignedSlot: null,
    ATTRIBUTE_NODE: 2,
    baseURI: "https://null.jsbin.com/runner",
    before: function before() { [native code] },
    CDATA_SECTION_NODE: 4,
    childNodes: [object NodeList] { ... },
    cloneNode: function cloneNode() { [native code] },
    COMMENT_NODE: 8,
    compareDocumentPosition: function compareDocumentPosition() { [native code] },
    contains: function contains() { [native code] },
    data: "
    ",
    deleteData: function deleteData() { [native code] },
    dispatchEvent: function dispatchEvent() { [native code] },
    DOCUMENT_FRAGMENT_NODE: 11,
    DOCUMENT_NODE: 9,
    DOCUMENT_POSITION_CONTAINED_BY: 16,
    DOCUMENT_POSITION_CONTAINS: 8,
    DOCUMENT_POSITION_DISCONNECTED: 1,
    DOCUMENT_POSITION_FOLLOWING: 4,
    DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32,
    DOCUMENT_POSITION_PRECEDING: 2,
    DOCUMENT_TYPE_NODE: 10,
    ELEMENT_NODE: 1,
    ENTITY_NODE: 6,
    ENTITY_REFERENCE_NODE: 5,
    firstChild: null,
    getRootNode: function getRootNode() { [native code] },
    hasChildNodes: function hasChildNodes() { [native code] },
    insertBefore: function insertBefore() { [native code] },
    insertData: function insertData() { [native code] },
    isConnected: true,
    isDefaultNamespace: function isDefaultNamespace() { [native code] },
    isEqualNode: function isEqualNode() { [native code] },
    isSameNode: function isSameNode() { [native code] },
    lastChild: null,
    length: 5,
    lookupNamespaceURI: function lookupNamespaceURI() { [native code] },
    lookupPrefix: function lookupPrefix() { [native code] },
    nextElementSibling: [object HTMLLIElement] { ... },
    nextSibling: [circular object HTMLLIElement] :
<li>1. 철수</li>,
    nodeName: "#text",
    nodeType: 3,
    nodeValue: "
    ",
    normalize: function normalize() { [native code] },
    NOTATION_NODE: 12,
    ownerDocument: [object HTMLDocument] { ... },
    parentElement: [object HTMLUListElement] { ... },
    parentNode: [circular object HTMLUListElement] :
<ul>
        <li>1. 철수</li>
        <li id="test">2. 동건</li>
        <li>3. 토마스</li>
        <li>4. 원빈</li>
        <li>5. 인성</li>
    </ul>,
    previousElementSibling: null,
    previousSibling: null,
    PROCESSING_INSTRUCTION_NODE: 7,
    remove: function remove() { [native code] },
    removeChild: function removeChild() { [native code] },
    removeEventListener: function removeEventListener() { [native code] },
    replaceChild: function replaceChild() { [native code] },
    replaceData: function replaceData() { [native code] },
    replaceWith: function replaceWith() { [native code] },
    splitText: function splitText() { [native code] },
    substringData: function substringData() { [native code] },
    TEXT_NODE: 3,
    textContent: "
    ",
    wholeText: "
    "
  },
  1: [circular object HTMLLIElement] :
<li>1. 철수</li>,
  10: [object Text] {
    addEventListener: function addEventListener() { [native code] },
    after: function after() { [native code] },
    appendChild: function appendChild() { [native code] },
    appendData: function appendData() { [native code] },
    assignedSlot: null,
    ATTRIBUTE_NODE: 2,
    baseURI: "https://null.jsbin.com/runner",
    before: function before() { [native code] },
    CDATA_SECTION_NODE: 4,
    childNodes: [object NodeList] { ... },
    cloneNode: function cloneNode() { [native code] },
    COMMENT_NODE: 8,
    compareDocumentPosition: function compareDocumentPosition() { [native code] },
    contains: function contains() { [native code] },
    data: "
",
    deleteData: function deleteData() { [native code] },
    dispatchEvent: function dispatchEvent() { [native code] },
    DOCUMENT_FRAGMENT_NODE: 11,
    DOCUMENT_NODE: 9,
    DOCUMENT_POSITION_CONTAINED_BY: 16,
    DOCUMENT_POSITION_CONTAINS: 8,
    DOCUMENT_POSITION_DISCONNECTED: 1,
    DOCUMENT_POSITION_FOLLOWING: 4,
    DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32,
    DOCUMENT_POSITION_PRECEDING: 2,
    DOCUMENT_TYPE_NODE: 10,
    ELEMENT_NODE: 1,
    ENTITY_NODE: 6,
    ENTITY_REFERENCE_NODE: 5,
    firstChild: null,
    getRootNode: function getRootNode() { [native code] },
    hasChildNodes: function hasChildNodes() { [native code] },
    insertBefore: function insertBefore() { [native code] },
    insertData: function insertData() { [native code] },
    isConnected: true,
    isDefaultNamespace: function isDefaultNamespace() { [native code] },
    isEqualNode: function isEqualNode() { [native code] },
    isSameNode: function isSameNode() { [native code] },
    lastChild: null,
    length: 1,
    lookupNamespaceURI: function lookupNamespaceURI() { [native code] },
    lookupPrefix: function lookupPrefix() { [native code] },
    nextElementSibling: null,
    nextSibling: null,
    nodeName: "#text",
    nodeType: 3,
    nodeValue: "
",
    normalize: function normalize() { [native code] },
    NOTATION_NODE: 12,
    ownerDocument: [circular object HTMLDocument],
    parentElement: [circular object HTMLUListElement] :
<ul>
        <li>1. 철수</li>
        <li id="test">2. 동건</li>
        <li>3. 토마스</li>
        <li>4. 원빈</li>
        <li>5. 인성</li>
    </ul>,
    parentNode: [circular object HTMLUListElement] :
<ul>
        <li>1. 철수</li>
        <li id="test">2. 동건</li>
        <li>3. 토마스</li>
        <li>4. 원빈</li>
        <li>5. 인성</li>
    </ul>,
    previousElementSibling: [object HTMLLIElement] { ... },
    previousSibling: [circular object HTMLLIElement] :
<li>5. 인성</li>,
    PROCESSING_INSTRUCTION_NODE: 7,
    remove: function remove() { [native code] },
    removeChild: function removeChild() { [native code] },
    removeEventListener: function removeEventListener() { [native code] },
    replaceChild: function replaceChild() { [native code] },
    replaceData: function replaceData() { [native code] },
    replaceWith: function replaceWith() { [native code] },
    splitText: function splitText() { [native code] },
    substringData: function substringData() { [native code] },
    TEXT_NODE: 3,
    textContent: "
",
    wholeText: "
"
  },
  2: [object Text] {
    addEventListener: function addEventListener() { [native code] },
    after: function after() { [native code] },
    appendChild: function appendChild() { [native code] },
    appendData: function appendData() { [native code] },
    assignedSlot: null,
    ATTRIBUTE_NODE: 2,
    baseURI: "https://null.jsbin.com/runner",
    before: function before() { [native code] },
    CDATA_SECTION_NODE: 4,
    childNodes: [object NodeList] { ... },
    cloneNode: function cloneNode() { [native code] },
    COMMENT_NODE: 8,
    compareDocumentPosition: function compareDocumentPosition() { [native code] },
    contains: function contains() { [native code] },
    data: "
    ",
    deleteData: function deleteData() { [native code] },
    dispatchEvent: function dispatchEvent() { [native code] },
    DOCUMENT_FRAGMENT_NODE: 11,
    DOCUMENT_NODE: 9,
    DOCUMENT_POSITION_CONTAINED_BY: 16,
    DOCUMENT_POSITION_CONTAINS: 8,
    DOCUMENT_POSITION_DISCONNECTED: 1,
    DOCUMENT_POSITION_FOLLOWING: 4,
    DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32,
    DOCUMENT_POSITION_PRECEDING: 2,
    DOCUMENT_TYPE_NODE: 10,
    ELEMENT_NODE: 1,
    ENTITY_NODE: 6,
    ENTITY_REFERENCE_NODE: 5,
    firstChild: null,
    getRootNode: function getRootNode() { [native code] },
    hasChildNodes: function hasChildNodes() { [native code] },
    insertBefore: function insertBefore() { [native code] },
    insertData: function insertData() { [native code] },
    isConnected: true,
    isDefaultNamespace: function isDefaultNamespace() { [native code] },
    isEqualNode: function isEqualNode() { [native code] },
    isSameNode: function isSameNode() { [native code] },
    lastChild: null,
    length: 5,
    lookupNamespaceURI: function lookupNamespaceURI() { [native code] },
    lookupPrefix: function lookupPrefix() { [native code] },
    nextElementSibling: [object HTMLLIElement] { ... },
    nextSibling: [circular object HTMLLIElement] :
<li id="test">2. 동건</li>,
    nodeName: "#text",
    nodeType: 3,
    nodeValue: "
    ",
    normalize: function normalize() { [native code] },
    NOTATION_NODE: 12,
    ownerDocument: [circular object HTMLDocument],
    parentElement: [circular object HTMLUListElement] :
<ul>
        <li>1. 철수</li>
        <li id="test">2. 동건</li>
        <li>3. 토마스</li>
        <li>4. 원빈</li>
        <li>5. 인성</li>
    </ul>,
    parentNode: [circular object HTMLUListElement] :
<ul>
        <li>1. 철수</li>
        <li id="test">2. 동건</li>
        <li>3. 토마스</li>
        <li>4. 원빈</li>
        <li>5. 인성</li>
    </ul>,
    previousElementSibling: [circular object HTMLLIElement] :
<li>1. 철수</li>,
    previousSibling: [circular object HTMLLIElement] :
<li>1. 철수</li>,
    PROCESSING_INSTRUCTION_NODE: 7,
    remove: function remove() { [native code] },
    removeChild: function removeChild() { [native code] },
    removeEventListener: function removeEventListener() { [native code] },
    replaceChild: function replaceChild() { [native code] },
    replaceData: function replaceData() { [native code] },
    replaceWith: function replaceWith() { [native code] },
    splitText: function splitText() { [native code] },
    substringData: function substringData() { [native code] },
    TEXT_NODE: 3,
    textContent: "
    ",
    wholeText: "
    "
  },
  3: [circular object HTMLLIElement] :
<li id="test">2. 동건</li>,
  4: [object Text] {
    addEventListener: function addEventListener() { [native code] },
    after: function after() { [native code] },
    appendChild: function appendChild() { [native code] },
    appendData: function appendData() { [native code] },
    assignedSlot: null,
    ATTRIBUTE_NODE: 2,
    baseURI: "https://null.jsbin.com/runner",
    before: function before() { [native code] },
    CDATA_SECTION_NODE: 4,
    childNodes: [object NodeList] { ... },
    cloneNode: function cloneNode() { [native code] },
    COMMENT_NODE: 8,
    compareDocumentPosition: function compareDocumentPosition() { [native code] },
    contains: function contains() { [native code] },
    data: "
    ",
    deleteData: function deleteData() { [native code] },
    dispatchEvent: function dispatchEvent() { [native code] },
    DOCUMENT_FRAGMENT_NODE: 11,
    DOCUMENT_NODE: 9,
    DOCUMENT_POSITION_CONTAINED_BY: 16,
    DOCUMENT_POSITION_CONTAINS: 8,
    DOCUMENT_POSITION_DISCONNECTED: 1,
    DOCUMENT_POSITION_FOLLOWING: 4,
    DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32,
    DOCUMENT_POSITION_PRECEDING: 2,
    DOCUMENT_TYPE_NODE: 10,
    ELEMENT_NODE: 1,
    ENTITY_NODE: 6,
    ENTITY_REFERENCE_NODE: 5,
    firstChild: null,
    getRootNode: function getRootNode() { [native code] },
    hasChildNodes: function hasChildNodes() { [native code] },
    insertBefore: function insertBefore() { [native code] },
    insertData: function insertData() { [native code] },
    isConnected: true,
    isDefaultNamespace: function isDefaultNamespace() { [native code] },
    isEqualNode: function isEqualNode() { [native code] },
    isSameNode: function isSameNode() { [native code] },
    lastChild: null,
    length: 5,
    lookupNamespaceURI: function lookupNamespaceURI() { [native code] },
    lookupPrefix: function lookupPrefix() { [native code] },
    nextElementSibling: [object HTMLLIElement] { ... },
    nextSibling: [circular object HTMLLIElement] :
<li>3. 토마스</li>,
    nodeName: "#text",
    nodeType: 3,
    nodeValue: "
    ",
    normalize: function normalize() { [native code] },
    NOTATION_NODE: 12,
    ownerDocument: [circular object HTMLDocument],
    parentElement: [circular object HTMLUListElement] :
<ul>
        <li>1. 철수</li>
        <li id="test">2. 동건</li>
        <li>3. 토마스</li>
        <li>4. 원빈</li>
        <li>5. 인성</li>
    </ul>,
    parentNode: [circular object HTMLUListElement] :
<ul>
        <li>1. 철수</li>
        <li id="test">2. 동건</li>
        <li>3. 토마스</li>
        <li>4. 원빈</li>
        <li>5. 인성</li>
    </ul>,
    previousElementSibling: [circular object HTMLLIElement] :
<li id="test">2. 동건</li>,
    previousSibling: [circular object HTMLLIElement] :
<li id="test">2. 동건</li>,
    PROCESSING_INSTRUCTION_NODE: 7,
    remove: function remove() { [native code] },
    removeChild: function removeChild() { [native code] },
    removeEventListener: function removeEventListener() { [native code] },
    replaceChild: function replaceChild() { [native code] },
    replaceData: function replaceData() { [native code] },
    replaceWith: function replaceWith() { [native code] },
    splitText: function splitText() { [native code] },
    substringData: function substringData() { [native code] },
    TEXT_NODE: 3,
    textContent: "
    ",
    wholeText: "
    "
  },
  5: [circular object HTMLLIElement] :
<li>3. 토마스</li>,
  6: [object Text] {
    addEventListener: function addEventListener() { [native code] },
    after: function after() { [native code] },
    appendChild: function appendChild() { [native code] },
    appendData: function appendData() { [native code] },
    assignedSlot: null,
    ATTRIBUTE_NODE: 2,
    baseURI: "https://null.jsbin.com/runner",
    before: function before() { [native code] },
    CDATA_SECTION_NODE: 4,
    childNodes: [object NodeList] { ... },
    cloneNode: function cloneNode() { [native code] },
    COMMENT_NODE: 8,
    compareDocumentPosition: function compareDocumentPosition() { [native code] },
    contains: function contains() { [native code] },
    data: "
    ",
    deleteData: function deleteData() { [native code] },
    dispatchEvent: function dispatchEvent() { [native code] },
    DOCUMENT_FRAGMENT_NODE: 11,
    DOCUMENT_NODE: 9,
    DOCUMENT_POSITION_CONTAINED_BY: 16,
    DOCUMENT_POSITION_CONTAINS: 8,
    DOCUMENT_POSITION_DISCONNECTED: 1,
    DOCUMENT_POSITION_FOLLOWING: 4,
    DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32,
    DOCUMENT_POSITION_PRECEDING: 2,
    DOCUMENT_TYPE_NODE: 10,
    ELEMENT_NODE: 1,
    ENTITY_NODE: 6,
    ENTITY_REFERENCE_NODE: 5,
    firstChild: null,
    getRootNode: function getRootNode() { [native code] },
    hasChildNodes: function hasChildNodes() { [native code] },
    insertBefore: function insertBefore() { [native code] },
    insertData: function insertData() { [native code] },
    isConnected: true,
    isDefaultNamespace: function isDefaultNamespace() { [native code] },
    isEqualNode: function isEqualNode() { [native code] },
    isSameNode: function isSameNode() { [native code] },
    lastChild: null,
    length: 5,
    lookupNamespaceURI: function lookupNamespaceURI() { [native code] },
    lookupPrefix: function lookupPrefix() { [native code] },
    nextElementSibling: [object HTMLLIElement] { ... },
    nextSibling: [circular object HTMLLIElement] :
<li>4. 원빈</li>,
    nodeName: "#text",
    nodeType: 3,
    nodeValue: "
    ",
    normalize: function normalize() { [native code] },
    NOTATION_NODE: 12,
    ownerDocument: [circular object HTMLDocument],
    parentElement: [circular object HTMLUListElement] :
<ul>
        <li>1. 철수</li>
        <li id="test">2. 동건</li>
        <li>3. 토마스</li>
        <li>4. 원빈</li>
        <li>5. 인성</li>
    </ul>,
    parentNode: [circular object HTMLUListElement] :
<ul>
        <li>1. 철수</li>
        <li id="test">2. 동건</li>
        <li>3. 토마스</li>
        <li>4. 원빈</li>
        <li>5. 인성</li>
    </ul>,
    previousElementSibling: [circular object HTMLLIElement] :
<li>3. 토마스</li>,
    previousSibling: [circular object HTMLLIElement] :
<li>3. 토마스</li>,
    PROCESSING_INSTRUCTION_NODE: 7,
    remove: function remove() { [native code] },
    removeChild: function removeChild() { [native code] },
    removeEventListener: function removeEventListener() { [native code] },
    replaceChild: function replaceChild() { [native code] },
    replaceData: function replaceData() { [native code] },
    replaceWith: function replaceWith() { [native code] },
    splitText: function splitText() { [native code] },
    substringData: function substringData() { [native code] },
    TEXT_NODE: 3,
    textContent: "
    ",
    wholeText: "
    "
  },
  7: [circular object HTMLLIElement] :
<li>4. 원빈</li>,
  8: [object Text] {
    addEventListener: function addEventListener() { [native code] },
    after: function after() { [native code] },
    appendChild: function appendChild() { [native code] },
    appendData: function appendData() { [native code] },
    assignedSlot: null,
    ATTRIBUTE_NODE: 2,
    baseURI: "https://null.jsbin.com/runner",
    before: function before() { [native code] },
    CDATA_SECTION_NODE: 4,
    childNodes: [object NodeList] { ... },
    cloneNode: function cloneNode() { [native code] },
    COMMENT_NODE: 8,
    compareDocumentPosition: function compareDocumentPosition() { [native code] },
    contains: function contains() { [native code] },
    data: "
    ",
    deleteData: function deleteData() { [native code] },
    dispatchEvent: function dispatchEvent() { [native code] },
    DOCUMENT_FRAGMENT_NODE: 11,
    DOCUMENT_NODE: 9,
    DOCUMENT_POSITION_CONTAINED_BY: 16,
    DOCUMENT_POSITION_CONTAINS: 8,
    DOCUMENT_POSITION_DISCONNECTED: 1,
    DOCUMENT_POSITION_FOLLOWING: 4,
    DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32,
    DOCUMENT_POSITION_PRECEDING: 2,
    DOCUMENT_TYPE_NODE: 10,
    ELEMENT_NODE: 1,
    ENTITY_NODE: 6,
    ENTITY_REFERENCE_NODE: 5,
    firstChild: null,
    getRootNode: function getRootNode() { [native code] },
    hasChildNodes: function hasChildNodes() { [native code] },
    insertBefore: function insertBefore() { [native code] },
    insertData: function insertData() { [native code] },
    isConnected: true,
    isDefaultNamespace: function isDefaultNamespace() { [native code] },
    isEqualNode: function isEqualNode() { [native code] },
    isSameNode: function isSameNode() { [native code] },
    lastChild: null,
    length: 5,
    lookupNamespaceURI: function lookupNamespaceURI() { [native code] },
    lookupPrefix: function lookupPrefix() { [native code] },
    nextElementSibling: [circular object HTMLLIElement] :
<li>5. 인성</li>,
    nextSibling: [circular object HTMLLIElement] :
<li>5. 인성</li>,
    nodeName: "#text",
    nodeType: 3,
    nodeValue: "
    ",
    normalize: function normalize() { [native code] },
    NOTATION_NODE: 12,
    ownerDocument: [circular object HTMLDocument],
    parentElement: [circular object HTMLUListElement] :
<ul>
        <li>1. 철수</li>
        <li id="test">2. 동건</li>
        <li>3. 토마스</li>
        <li>4. 원빈</li>
        <li>5. 인성</li>
    </ul>,
    parentNode: [circular object HTMLUListElement] :
<ul>
        <li>1. 철수</li>
        <li id="test">2. 동건</li>
        <li>3. 토마스</li>
        <li>4. 원빈</li>
        <li>5. 인성</li>
    </ul>,
    previousElementSibling: [circular object HTMLLIElement] :
<li>4. 원빈</li>,
    previousSibling: [circular object HTMLLIElement] :
<li>4. 원빈</li>,
    PROCESSING_INSTRUCTION_NODE: 7,
    remove: function remove() { [native code] },
    removeChild: function removeChild() { [native code] },
    removeEventListener: function removeEventListener() { [native code] },
    replaceChild: function replaceChild() { [native code] },
    replaceData: function replaceData() { [native code] },
    replaceWith: function replaceWith() { [native code] },
    splitText: function splitText() { [native code] },
    substringData: function substringData() { [native code] },
    TEXT_NODE: 3,
    textContent: "
    ",
    wholeText: "
    "
  },
  9: [circular object HTMLLIElement] :
<li>5. 인성</li>,
  entries: function entries() { [native code] },
  forEach: function forEach() { [native code] },
  item: function item() { [native code] },
  keys: function keys() { [native code] },
  length: 11,
  values: function values() { [native code] }
}

 

 

728x90
반응형
저작자표시 비영리 변경금지

'프로그래밍 > Javascript' 카테고리의 다른 글

[Javascript] 자바스크립트(JS) Image 크기값 알아보기  (0) 2021.03.29
[jQuery] 제이쿼리(jquery)의 이벤트 취소함수 - stopPropagation()  (0) 2021.03.27
[jQuery] 제이쿼리(jquery)의 이벤트 위임 - preventDefault()  (0) 2021.03.26
[Javascript] 자바스크립트(JS)의 부모노드 접근 - parentNode  (0) 2021.03.25
[jQuery] 제이쿼리(jquery)의 형제요소를 찾는함수 - Siblings()  (0) 2021.03.23
[Javascript] 자바스크립트(JS) - UTC 날짜를 현지시간(Local)으로 변경  (0) 2021.03.20
[Javascript] 자바스크립트(JS)의 객체정렬함수 - sort(), reverse()  (0) 2021.03.16
[Javascript] 자바스크립트(JS)의 HTML 내용을 엑셀 다운로드하기  (0) 2021.03.15
'프로그래밍/Javascript' Related Articles more
Comments