DOM 조작 메서드 비교

ParentNode.append() vs. Node.appendChild()

ParentNode.append()	Node.appendChild()
문자열 추가 가능	문자열 추가 불가능
반환값 없음	Node 객체 반환
여러 개 추가 가능	여러개 추가 불가능

 

 

Node.innerText vs. Element.innerHTML

Node.innerText	Element.innerHTML
HTML도 문자열로 인식	HTML을 HTML로 인식

 

Element.innerHTML and XSS(Cross-site Scripting)

공격자가 웹 사이트의 클라이언트 측 코드에 악성 스크립트를 삽입해 공격하는 방법이다.

사용자의 브라우저가 악성 스크립트를 실행하며 공격자가 액세스 제어를 우회하고 사용자를 가장할 수 있다.

innerHTML의 경우 HTML을 태그로 인식하기 때문에 이 공격을 주의해야 한다.

 

 

childNode.remove() vs. Node.removeChild()

childNode.remove()	Node.removeChild()
Node가 속한 트리에서 해당 노드를 제거	자식 Node 제거
반환값 없음	반환값 있음

 

 

Element.setAttribute(name, value) vs. Element.getAttribute(attributeName)

Element.setAttribute(name, value)	Element.getAttribute(attributeName)
지정된 요소의 값 설정	해당 요소의 지정된 값 반환
속성 존재시 값을 갱신, 미존재시 새 속성 추가	인자 = 값을 얻고자 하는 속성의 이름

 

 

element 를 잡아 속성을 바꿔보자

• element 는 '>' 를 활용하여 구체적으로 잡을 수 있다.
• HTML 태그의 속성을 바로 변경할 수 있다.

<img src="img.png" alt="이미지" width="300px">

• 속성 값을 2개 이상 추가할 수 있다.