DOM (생성, 조회, 수정 1)

정승원·2023년 5월 13일
0

JavaScript

목록 보기
56/69
post-thumbnail

document.createElement()


document.createElement()는 메모리에만 존재하는 새로운 HTML 요소를 생성해 반환하는 것이다. 즉 실제 HTML에는 작동하지 않는 것이다.

E.prepend() / E.append()


이렇게 E.prepend() / E.append() 로 HTML에 실제로 삽입 하는 것이다.
.parent로 넣고
div안에 textContent로 문자를 적으면

<div> 안녕 예림 </div>

가 출력이 되는 것이다. 또,
prepend로 맨 첫 번째 요소에 주석을 주는 것이다. 그리고
append로 마지막에 그냥 문자만 예림! 하고 주는 것이다.

E.remove()


remove는 요소를 제거하는 것이다. child를 remove를 하면,
첫 번째 요소인 1이 제거가 된다.

E.insertAdjacentElement()


E.insertAdjacentElement()는 새로운 요소를 삽입하는 것이다.
그래서 주석으로 html을 보면 저런식으로 되어 있다. 그래서 한 번 출력을 해 보겠다. qureySelector에 .child를 넣고 새로운 요소를 span을 넣는다. 그리고 textContent로 문자를 넣고,
insertAdjacentElement()를 사용해 어디에 넣을지 적는 것이다.

N.insertBefore()


N.insertBefore()는 이전 형제로 노드를 삽입하는 것이다.
querySelector('.parent')를 넣고,
그리고 querySelector('.child')를 넣는것이다 그리고 span태그로 textContent로 문자를 넣고 insertBefore로 출력을 하면, 출력 값이 잘 나온다. 하지만 insertBefore는 순서도 중요하다.

이것이 순서도 이다.

N.contains()


contains는 자신을 포함한 후손인지 확인을 하는 것이다.
이것도 간단하다. ()안에 후손이거나, 자기자신이면 불린으로 출력이 되는 것이다.

N.textContent()


textContent는 모든 텍스트를 얻거나 변경하는 것이다.
그래서 .child로 textContent를 출력하면 1이라는 출력 값이 뜬다. 이유는 html에 1이라는 숫자가 있기 때문이다. 그리고 변경을 해 보겠다.

이렇게 변경을 하는 것이다. 그럼 1이 아닌 문자로 변경이 되는 걸 확인할 수 있을 것이다.

innerHTML()


innerHTML은 모든 내용을 하나의 문자로 얻는다고 했다. 그럼 지금 예제를 보면

이렇게 출력이 되는 것을 확인할 수 있다. 또 새로운 것을 변경 하려면

el.innerHTML = '<span style="color: red;">아 개발 진짜 힘들고 어렵다</span>'

이렇게 작성해 주면
값이 이렇게 뜨는 것을 확인할 수 있다. 하지만 좀 더 복잡하게,

템플릿 리터럴

템플릿 리터럴 방식으로도 쓸 수 있다.

이렇게 빽틱기호 ``로 조금 더 복잡하게 innerHTML을 활용할 수 있다.

profile
프론트엔드 개발자 준비

0개의 댓글