판봉 개발 일기
Javascript-Document-manipulation[0816] 본문
manipulation
이번시간에는 저번에 이어서 manipulation에 정리하겠습니다.
manipulation이란 뭐 "조작"이란 의미를 가지고 있습니다.
그렇다면 Document에서 무언가 조작하는걸 의미하겠죠?
<html>
<body>
<style>
.alert {
padding: 15px;
border: 1px solid #d6e9c6;
border-radius: 4px;
color: #3c763d;
background-color: #dff0d8;
}
</style>
<div id="container">
<div>annother 태그</div>
</div>
<script>
// document.createElement(태그)
// 1.해당 태그의 요소를 생성함
let div = document.createElement("div");
// 2. 해당 요소의 속성들을 설정함(div class="alert")
div.className = "alert";
// 3. 해당 요소의 내용을 채워넣음
let strong = document.createElement("strong");
strong.innerHTML = "안녕하세요!";
div.append(strong);
div.innerHTML += "중요 메시지를 확인하셨습니다.";
// 요소.append(요소) -> 가장 뒤쪽에 삽입
// 4. 어떤 요소에 만든 요소를 삽입함
const container = document.querySelector("#container");
setTimeout(() => {
container.append(div); // 요소 안에 가장 마지막 자식으로 추가함
container.prepend(div); // 요소 안에 가장 첫번째 자식으로 추가함
container.before(div); // 요소 이전에 형제요소로 추가됨
container.after(div); // 요소 다음에 형제요소로 추가됨
}, 2000);
</script>
</body>
</html>먼저 DOM 노드를 만들때 쓰는 두가지 메서드가 있습니다.
위의 코드에 있는 것 처럼
그리고 저번시간에 배운 innerHTML을 이용해서 해당 요소의 내용을 채워 넣을 수 있습니다.
그렇지만 이 3가지만으로는 아직까지 웹페이지에는 요소들이 나타나지 않습니다.
그래서 이 요소를 넣기위한 방법들이 여럿 존재합니다.
그 방법을 밑에서 알아보겠습니다.
삽입 메서드
보시면 자식요소와 형제요소로 나누어서 추가를 할 수 있습니다.
중간에 setTimeout이란 메서드를 이용해서 시간이 좀 지난뒤에 나타나게끔 조정했죠?
결과를 보시면 아래사진과 같습니다.
insertAdjacentHTML
만약에 문자열 형태의 HTML자체를 삽입하고 싶다면 어떤 방법을 써야할까요?
바로 insertAdjacentHTML를 사용하면 됩니다.
- beforebehin : 시작태그 이전에 넣음
- afterbegin : 시작태그 다음에(첫번째 자식요소로 넣음)
- beforeend : 끝태그 이전에(마지막 자식요소)
- afterend : 끝 태그 다음에
그리고 만약에 동적으로 생성된 요소에 이벤트를 부착을 어떻게 할 수 있을 까요?
생기지도 않은것에 미리 코드를 작성해서 이벤트를 부착을 할 수는 없는 노릇이죠
그러기 위해 약간의 테크닉이 필요한데
그 방법을 소개해드리겠습니다.
바로 이미 태그가 작성되어져 있는 최상위 요소를 선택하는 방법입니다.
문자열을 쓸수있는 백틱을 사용하여 const 에 문자열을 넣고 inserAdjacentHTML을 이용해서 시작태그 다음
즉 첫번째 자식요소에 alert라는 const를 최소 2초가 지난 뒤에 삽입했습니다.
보시면 container의 첫번째 자식요소에 동적으로 alert가 생성이 된것이죠
참고로 /*html*/은 익스텐션을 이용해서 한것입니다.
event안에 있는 것들을 이용하면 이런것도 가능합니다.
뭐가 있는지 확인하려면 event에 .을 찍어도 되고 아니면 console창을 이용해서 확인해볼 수도 있습니다.
remove
remove는 해당 노드를 삭제하는 방법입니다.
container라는 const에 id가 container인것을 선택해주고 마찬가지로 div도 그렇게 해줍니다.
그리고나서 div의 클래스 속성을 alert라고 넣어주고 innerHTMl을 사용해서 문자열을 넣어줍니다.
그리고 시간이 좀 지난뒤에 container에 넣어주는 코드이죠
밑에 보시면
2가지 방법이 나와있는데 remove를 이용해서 node를 삭제시켜주는 방법도 있지만
저번시간에 배운 outerHTML을 이용해서 본인의 태그를 빈값으로 만들어주는 방법이 있습니다.
bubbling
버블링이란 자식요소에 이벤트를 하면 부모요소에까지 거슬러 올라가는 것을 말합니다.
마치 흐르는 강물을 거슬러 오르는 연어들과 같죠
하위 요소에서 상위요소로 이벤트가 전파가 됩니다.
아마 대부분의 모든 이벤트가 버블링이 일어나는것으로 알고 있습니다.
그래서 이것을 멈추기 위해 stopPropagation()이 있습니다.
이름에서 유추할 수 있듯이 이 속성을 이용하셔 이벤트의 전파를 막을 수 있습니다.
하지만 이방법은 정말 필요할때만 사용하는게 좋습니다.
저도 처음에는 아이러니 했지만 버블링은 굉장히 사용을 잘하면 유용한 현상입니다.
커스텀 이벤트는 나중에 추후에 배우겠지만 그래도 일단을 버블링을 막는 메서드는 알고있는게 좋습니다.
오늘의 판봉의 바닥글
얼른 DB도 배워서 뭔가 작업을 실제로 해보고싶은맘이 큽니다.
모두가 화이팅해봅시다.
'JAVA 웹개발 과정' 카테고리의 다른 글
| javascript-todolist[0816] (0) | 2021.08.16 |
|---|---|
| [04]Browser[document] - javascript (0) | 2021.08.12 |
| [03]Browser[document] - javascript (0) | 2021.08.12 |
| [02]Browser[document] - javascript (0) | 2021.08.12 |
| [01]Browser[document] - javascript (0) | 2021.08.12 |
