[DOM & BOM] DOM을 조작하는 메서드를 2가지 이상 말하고, 각각의 특징을 비교해서 설명해주세요.

[shinsehantan]

DOM 조작 메서드에는 removeChild(), append(), appendChild(), insertBefore(), cloneNode(), replaceChild(), closest() 등이 있습니다. 이중에서 부모 노드에 자식 노드를 추가하는 메서드인 append와 appendChild의 특징을 비교해서 설명드리겠습니다. append 메서드는 ParentNode의 마지막 자식 뒤에 Node 객체 또는 DOMString 객체를 삽입하는 메서드입니다. 매개변수로는 노드의 객체나 DOM String이 올 수 있고, 여러 개의 매개변수를 한 번에 전달하여 여러개의 자식 요소를 추가할 수도 있습니다. appendChild 메서드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙이는 메서드인데요. append와는 달리 오직 node 객체만 매개변수로 받을 수 있고, 한 번에 여러 개의 노드를 받아 추가하는 것도 불가능합니다. append와 appendChild의 또다른 차이점 하나는 return 값의 유무인데요. append는 return값을 반환하지 않는 메서드라면, appendChild는 추가한 Node 객체를 반환합니다.

[bucketHaneul]

appendChild() 와 insetAdacentHTML() 을 비교해보겠습니다.

appendChild() 는 기준 노드의 가장 마지막 자식 요소로 새로운 노드를 삽입할 수 있습니다. 반면, insetAdacentHTML() 은 기준 노드 주위 원하는 위치에 새로운 노드를 삽입할 수 있습니다.

appendChild() 의 경우 문자열이 아닌 노드 자체를 생성하여 삽입해야 하므로, 코드의 양이 다소 많고 복잡해 보일 수 있습니다. 반면에 insetAdacentHTML() 은 간단히 문자열로 노드를 작성하면 되므로 훨씬 편리합니다. 하지만, XSS공격에 취약하므로 사용자로부터 직접 입력 받는 콘텐츠를 추가할 때는 주위하여 사용하여야합니다.

[Tanney-102]

DOM요소들은 내부 요소를 조작 하는 여러 메서드를 제공한다. 대표적으로 다음의 두 가지를 들 수 있다.

• insertAdjacentHTML
• appendChild

두 메서드 모두 자식 엘리먼트를 추가하는 기능을 제공한다. 먼저 insertAdjacentHTML은 두개의 인자를 받는다. 첫 번째 인자로 요소를 추가할 위치를 받는다. 이때 해당 위치는 현재 엘리먼트의 여는 태그와 닫는 태그를 기준으로 설정한다. 두 번째 인자로 추가할 엘리먼트를 받는다. 주목할 만한 점은 인자로 엘리먼트 자체가 아닌 문자열을 받는다는 것이다. html 태그로 구성된 문자열을 통해 추가하고자 하는 요소를 전달한다. 이러한 특징 덕에 겪는 문제가 필연적으로 존재한다. insertAdjacentHTML과 같이 문자열을 통해 요소를 전달하는 방법은 xss 공격에 취약하다.

appendChild도 마찬가지로 자식 요소를 추가하는데 사용된다. 앞선 메서드와 다른점은 엘리먼트 자체를 인자로 받는다. 따라서 xss 공격에 대해 비교적 안전하다. 이름에서 알 수 있듯 인자로 받은 요소를 마지막 자식으로 추가하게 된다.

[devhyun637]

DOM 요소를 생성하는 메서드에는 createElement()가 있습니다. 또 텍스트만을 인자로 받아서 텍스트노드를 생성하는 createTextNode()가 있습니다.

DOM요소를 삽입하는 메서드에는 호출된 노드의 가장 마지막 자식으로 노드를 추가하는 appendChild(), 원하는 위치에 요소를 삽입할 수 있는 insertAdjectionHtml(), 기존의 모든 요소를 삭제하고 쉽게 새로운 요소를 추가할 수 있는 innerHTML이 있습니다.

insertAdjectionHtml()은 원하는 위치에 요소를 추가해야 하기 때문에, element의 어느 위치에 값을 넣을지 beforebegin, afterbegin, beforeend, afterend의 position에 대한 인자를 첫번째로 받아야하고, 두번째 인자로 DOM String을 받습니다. 하지만, 기존의 모든 요소를 삭제하고 새로운 요소를 넣는 innerHTML의 경우에는 Html 문자열을 직접 할당해줍니다.

DOM요소를 삭제하는 메서드에는 removeChild()가 있습니다. 이는 선택할 노드를 인자로 받습니다. DOM요소를 수정하는 메서드는 replaceChild(newChild, oldChild)가 있습니다. 이는 특정 부모의 바꾸고 싶은 노드를 다른 노드로 교체합니다.

[jum0]

DOM을 조작하는 메서드로 innerHTML와 appendChild가 있습니다.

innerHTML을 사용하는 경우는, 브라우저가 element의 현재 모든 자식 노드를 삭제하고 String을 해석한 후 element의 자식으로 해석한 string을 할당합니다. innerHTML의 특징으로는 string을 해석하는 과정에서 속도가 느릴 수 있다는 점입니다. 규격에 맞지 않은 html을 가지고 있는 경우, 브라우저가 string을 해석하는는 과정에서 처리해야하기 때문입니다.

다음으로 appendChild가 있습니다. appendChild는 새로운 element를 만듭니다. 이 과정에서 브라우저는 string을 해석하지 않아도 됩니다. 간단하게 자식을 넘기면 부모에 추가됩니다.

[ddongule]

DOM을 조작하는 메서드로는 querySelectorAll, getElementsByClassName이 있습니다. querySelectorAll의 Element.childNodes는 NodeList 객체를 반환하지만 정적 콜렉션이고, getElementsByClassName으로 가져온 리스트는 Live Collection으로 DOM의 변경사항이 실시간으로 적용되는 차이가 있습니다.