728x90 java script/DOM15 1.15 Converting a NodeList or HTML Collection to a JavaScript Array NodeList와 HTML Collection은 array 메서드를 상속받고 있는 유사베열이지 실제 js 배열이 아니다. 이런 유사배열을 실제 js 배열로 변환하면 다음과 같은 이점을 얻을 수 있다. 1. DOM을 참조하고 있지 않는 리스트의 스냅샷을 만들 수 있다. 2. Array 객체에서 제공하는 메서드들을 사용할 수 있다. 유사 배열을 배열로 변환하기 위해서는 다음과 같은 코드를 사용하면 된다. 1 Array.prototype.slice.call(liveLists); cs ES6부터 Array 객체에 Array.from()이라는 메서드가 추가됬다. 이 메서드는 유사배열 객체를 new Array()로 바꾸고 이를 반환한다 출처: DOM Enlightement 2021. 9. 25. 1.14 Getting a List/Collection of all Immediate Child Nodes childNodes 프로퍼티를 사용하면 유사배열(NodeList) 형태로 자식 노드들을 가져올 수 있다. 여기서 가져올 수 있는 노드들은 childNodes를 사용할 리시버 객체의 직접적인 자식이다. 다음과 같은 노드들을 직접적인 자식이라 한다. 1 2 3 4 5 6 7 8 e r Colored by Color Scripter cs childNodes는 Element 노드들 뿐만 아니라 다른 노드들도 포함한다. 출처: DOM Elightement 2021. 9. 7. 1. 13 Grokking Node Collections(i.e. NodeList and HTMLCollection) 트리에 있는 노드 그룹을 선택하거나 접근하게 되면 그 노드들인 NodeList 또는 HTMLCollection에 위치하게 된다. 이런 유사배열 객체는 다음과 같은 성질을 가진다 1. 하나의 컬랙션은 라이브 객체 또는 스태틱 객체이다. 즉, 컬랙션에 포함된 노드들은 라이브 문서의 한 부분이거나 라이브 문서의 스냅샷이다. 2. 기본적으로, 컬랙션 내부에 있는 노드들은 트리의 노드 순서대로 정렬되 있다. 3. 컬랙션들을 length프로퍼티로 해당 리스트에 존재하는 노드들의 갯수를 반영한다. 2021. 9. 2. 1.12 Using cloneNode() to Clone Nodes cloneNode()를 사용하면 하나의 노드 또는 하나의 노드와 그의 자식 노드들을 복사할 수 있다. 하나의 노드만 복사하고 싶다면 인자를 넘기지 않으면 되고 하나의 노드와 그의 자식 노드들을 전부 복사하고 싶다면 인자고 ture를 넘기면 된다. Element 노드를 복사하게 되면 그의 속성과 값들이 전부 복사 된다. 하지만 addEventListener() 또는 node.onClick으로 추가된 이벤트들은 복사되지 않는다. 또 한 요소로 그려진 이미지도 복사되지 않는다. cloneNode()를 사용해 복제된 노드들은 appendChild()와 같은 메서드들을 사용하지 않는 한 문서에 존재하지 않는다. cloneNode(true)는 NodeList를 반환하지 않는다. cloneNode()는 요소의 id값.. 2021. 9. 1. 이전 1 2 3 4 다음 728x90