<DOM 제어 명령어>
이벤트 삽입
대기타고 있다가 이벤트를 감지하면 발사!
target.addEventListener( type, listener) 실행될 콜백 함수
= type이라는 이벤트가 작성했을때 listener를 실행해라
여러가지의 종류가 있다.
👉 click, mouseover, mouseout, wheel 등 다양한 이벤트를 감지한다.
listener 함수의 인수에는 이벤트에 대한 정보가 담겨있다.
const myBtn = document.querySelector("button");
myBtn.addEventListener('click', function(){
console.log("hello world");
})클래스 제어
: DOM api를 통해 요소의 class 속성을 제어할 수 있다.
👀 근데 왜 classList을 써야할까?
만약 해당 태그에 class=btn 추가 하고,
class가 btn -> click 바뀌고 한번 더 2번 클릭하면 " " 의 상태로 바뀐다. !!!
즉, 기존의 클래스가 사라지게 된다. 이런 class 교체 문제를 해결하기 위해 사용해야 한다.!
classList를 사용하게 되면 클래스를 조작하는 다양한 메서드를 쓸 수 있다.
const myBtn = document.querySelector("button");
myBtn.addEventListener('click', function(){
// blue 라는 클래스의 속성 값을 지정 할 수 있습니다.
myBtn.classList.add("blue");
// myBtn.classList.add(“blue”); 클래스를 추가
// myBtn.classList.remove(“blue”); 클래스를 제거
// myBtn.classList.toggle(“blue”); 클래스를 토글. 없으면 넣어주고, 있으면 제거(=스위치)
// myBtn.classList.contains(“blue”); 해당하는 클래스가 있는지 확인(true/false)
})DOM 조작 방식 _ 요소 제어
: DOM api를 이용하면 요소를 새롭게 생성하고, 위치하고, 제거할 수 있다.
innerHTML을 사용하지 않고 새로운 콘텐츠를 추가하는 방법이다.
- document.createElement(target); target 요소를 생성합니다.
- document.createTextNode(target); target 텍스트를 생성합니다.
- element.appendChild(target); target 요소를 element의 자식으로 위치합니다.
- element.removeChild(target); element의 target 자식 요소를 제거합니다.
// HTML
//<ul></ul>
//<button>Make me MORE!</button>
const myBtn = document.querySelector("button");
const myUl = document.querySelector("ul");
// 버튼을 클릭 하면 li 가 다섯개 출력
myBtn.addEventListener('click', function(){
for(let i=0; i < 5; i++){
const myLi = document.createElement('li');
myUl.appendChild(myLi);
}
}) parentElement.insertBefore(target, location);
target요소를 parentElement의 자식인 location 위치 앞으로 이동한다.
// HTML
// <div id="parentElement">
// <span id="childElement">hello guys~</span>
// </div>
var span = document.createElement("span");
var sibling = document.getElementById("childElement");
var parentDiv = document.getElementById("parentElement");
parentDiv.insertBefore(span, sibling);HTML 콘텐츠 조작하기
: DOM api를 이용하면 요소 안의 값에 접근하여 값을 가져오거나, 변경할 수 있다.
👉 innerHTML
: 요소내에 포함된 HTML 마크업을 가져오거나 설정한다.
자식요소를 하나의 문자열로 얻는다. 또한 마크업을 포함하여 값을 추가하기 때문에 XSS 취약
script 태그가 실행되지 않도록 지정해야함.(인라인 스크립트는 먹힌다.) -> 위험할 수 있으니 파일 분리
👉 innerText
: 마크업을 제외한 문자열을 리턴한다. 즉, "사람이 읽을 수 있는" 요소만 처리한다.
하지만 값을 변경할때 마크업을 그대로 추가해야한다. (XSS에 취약하므로 위험) 또한 CSS고려해야 하므로 느리다.
👉 textContent
: 노드의 텍스트 콘텐츠를 전부 가져온다. 마크업은 무시된다.
( script, style 요소를 포함한 모든 요소의 콘텐츠를 가져온다)
XSS(Cross-Site Scripting Attacks):
공격자가 상대방의 브라우저에 스크립트가 실행되도록 하여 사용자의 세션을 가로채거나, 웹사이트를 변조하거나, 악의적 콘텐츠를 삽입하거나, 피싱 공격을 진행하는 것을 말한다.
🤯 그래서 뭘 사용하는걸 권장할까?
텍스트 추가 또는 변경시에는 textContent
새로운 요소 추가,삭제시에는 DOM 조작방식 사용하기
더 인접한곳(Adjacent)으로 정밀하게 배치하기: insertAdjacentHTML
// HTML
// <strong class="sayHi"> 반갑습니다. </strong>
const sayHi = document.querySelector('.sayHi');
// element 앞에
sayHi.insertAdjacentHTML('beforebegin', '<span>안녕하세요 저는</span>');
// element 안에 가장 첫번째 child
sayHi.insertAdjacentHTML('afterbegin', '<span>데브빈입니다</span>');
// element 안에 가장 마지막 child
sayHi.insertAdjacentHTML('beforeend', '<span>면접왔는데</span>');
// element 뒤에
sayHi.insertAdjacentHTML('afterend', '<span>치킨주실꺼죠?</span>');
DOM 안에서 노드 탐색하기
<body>
<!-- 주석입니다 주석. -->
<article class="cont">
<h1>안녕하세요 저는 데브빈 입니당</h1>
<p>지금부터 자기소개 올리겠습니다</p>
저는야 돔을 공부중입니다. 어려워여 살려줘
<strong>감사합니다!</strong>
</article>
<script>
const cont = document.querySelector(".cont");
console.log(cont.firstElementChild); // 첫번째 자식을 찾습니다.
// <h1>안녕하세요 저는 데브빈 입니당</h1>
console.log(cont.lastElementChild); // 마지막 자식을 찾습니다.
// <strong>감사합니다!</strong>
console.log(cont.nextElementSibling); // 다음 형제요소를 찾습니다.
// <script>
console.log(cont.previousSibling); // 이전 형제요소를 찾습니다.
// #text
console.log(cont.children); // 모든 직계자식을 찾습니다.
// HTMLCollection(3)
console.log(cont.parentElement); // 부모 요소를 찾습니다.
// body
</script>
</body>
'JavaScript' 카테고리의 다른 글
| | JavaScript | 'DOM' preventDefault() 마우스 우클릭 제한, stopPropagation() 이벤트 전파 막기 (0) | 2022.05.18 |
|---|---|
| | JavaScript | 'DOM' 이벤트 흐름(Event Flow), target, currentTarget, 이벤트 위임 (0) | 2022.05.18 |
| | JavaScript | 'DOM' 접근하기, HTMLCollection 와 NodeList (0) | 2022.05.16 |
| |JavaScript | 반복문 for...in , for...of (0) | 2022.05.10 |
| JavaScript _배열 [Array].from, fill, flat, some, every (0) | 2022.05.10 |