2018년 11월 22일 영어 독해 연습 - javascript - childNodes

문서 링크

▷ 연습 ▶ 제공된 번역

 

The Node.childNodes read-only property returns a live NodeList of child nodes of the given element where the first child node is assigned index 0.

▷ Node.childNodes는 엘레멘트의 살아있는 자식 노드 리스트를 반환하는 읽기 전용 프로퍼티다.

첫 번째 자식 노드는 인덱스 0이 할당되어 있다.

▶ childNodes는 주어진 요소의 자식 노드 모음( collection )을 반환합니다.

 

var nodeList = elementNodeReference.childNodes;

※ 영문에는 없는 내용

▶ ndList는 현재 요소의 자식인 노드 개체의 순서 있는 모음입니다. 요소가 자식이 없으면, ndList는 아무 노드도 포함하지 않습니다.

▶ ndList는 childNodes의 노드 목록을 저장하는 변수입니다. 그 목록은 NodeList 형입니다. childNodes 속성은 읽기 전용입니다.

 

Simple usage

// parg is an object reference to a <p> element
// ▷ parg는 p 엘레멘트를 참조한 오브젝트다.
// ▶ parg는 <p> 요소 개체 참조

// First check that the element has child nodes 
// ▷ 엘레멘트가 자식 노드들을 소유하고 있는지 먼저 확인한다.
// ▶ 그래서, 먼저 개체가 찼는 지(자식 노드가 있는 지) 검사
if (parg.hasChildNodes()) {
  var children = parg.childNodes;

  for (var i = 0; i < children.length; i++) {
    // do something with each child as children[i]
    // ▷ children[i] 번째의 각 자식은 무언가를 한다.
    // ▶ children[i]로 각 자식에 무언가를 함 
    // NOTE: List is live, adding or removing children will change the list
    // ▷ 메모: 리스트는 살아있다, 자식을 추가하거나 제거하여 리스트를 변경할 수 있다.
    // ▶ 주의: 목록은 유효해(live), 자식 추가나 제거는 목록을 바꿈
  }
}

 

Remove all children from a node

// This is one way to remove all children from a node
// 이것은 한 노드에서 모든 자식을 제거하는 하나의 방법이다.
// box is an object reference to an element
// box는 한 엘레멘트를 참조한 오브젝트다.

while (box.firstChild) {
    //The list is LIVE so it will re-index each call
    // 리스트는 살아있어서 호출할 때마다 다시 인덱싱을 할 것이다.
    box.removeChild(box.firstChild);
}

 

Notes

The items in the collection of nodes are objects and not strings. To get data from node objects, use their properties (e.g. elementNodeReference.childNodes[1].nodeName to get the name, etc.).

▷ 노드들의 모음에 있는 아이템들은 오브젝트이며 문자열이 아니다. 노드 오브젝트들에게 얻은 데이터는 프로퍼티들에 사용한다. (예를 들어, elementNodeReference.childNodes[1].nodeName 는 이름을 가져온다, 기타 등등)

▶ 노드 모음의 항목은 문자열이 아니라 개체입니다. 그 노드 개체에서 데이터를 얻으려면, 속성(예컨대 이름을 얻으려면 elementNodeReference.childNodes[1].nodeName 등)을 써야 합니다.

 

The document object itself has 2 children: the Doctype declaration and the root element, typically referred to as documentElement. (In (X)HTML documents this is the HTML element.)

▷ document 오브젝트 자신은 2개의 자식을 갖고 있다: 일반적으로 documentElement로 참조된 Doctype 선언과 루트 엘레멘트. ((X)HTML documents에서의 이것은 HTML 엘레멘트)

▶ document 개체는 자식이 둘입니다. Doctype 선언과 HTML 요소.

※ declaration 미국·영국 [ˌdekləˈreɪʃn]

1. (정부나 단체의) 선언문; 선언, 공표 2. (특히 감정이나 신념을 나타낸) 맹세 3. (자세한 정보를 담은) 신고서

※ typically 미국·영국 [ˈtɪpɪkli]

1. 보통, 일반적으로 2. 전형적으로, 특징적으로 3. 늘 하는 식으로, 늘 그렇듯이

 

childNodes includes all child nodes, including non-element nodes like text and comment nodes. To get a collection of only elements, use ParentNode.children instead.

childNodes는 모든 자식 노드들을 포함한다, 포함하고 있는 엘레멘트가 아닌 노드들은 텍스트와 코멘트 노드들과 같다. ParentNode.children 대신 사용한 엘레멘트들의 모음에서만 얻는다.