1. 계층이동
parentElement
한단계 위로 올라가서 부모 요소가 나오는 대신에 밑으로 내려가서 자녀요소를 출력하는 것이다.
-모든요소에게 그 요소를 포함하고 있는 직속 부모 요소는 단 한개이다.(자식요소는 여러개일 수 있다.)
2. 새 DOM 요소 만들기
appendChild()
한 특정 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막에 삽입하는것이다.
append()
한번에 한개 이상을 삽입할수 있고 최근에 나왔다.
그래서인지 익스플로어에서는 실행이 불가하다.
prepend()
특정 요소의 앞에 무언가를 삽입할때 사용한다.
3. 제거하기
-removeChild
먼저 제거하려는 부모요소를 부르면 되는데 parentElement 로 불러주고
removeChild(제거할 요소)를 입력하면 제거된다.
const img = document.querySelector('img')
img.parentElement.removeChild(img)
-remove()
익스플로어에서는 실행이 안되며 제거할요소를 doucment.querySelector(제거요소)로 불러온후에
remove로 제거가 가능하다.
const img = document.querySelector('img')
img.remove()
4. 인라인 이벤트
-사용자가 무언가를 할때마다 바뀌게 하는 이벤트를 넣을수 있다.
먼저 onclick이 있는데 이벤트를 html 안에 넣을수도 있지만 효율이 좋지않다. 따라서 js에 넣으면 된다.
- html 파일
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>loui3</h1>
<button id ="v2">loui</button>
<script src="loui.js"></script>
</body>
</html>js 파일
const btn = document.querySelector('#v2');
btn.onclick = function() {
console.log("click")
console.log("end")
}
- 주의할점으로 그냥 한줄이라도 입력하려면 함수로 만들어야 한다.
document.querySelector('h1'.onclick) = alert("nono")위로 하면 바로 실행되므로 주의하자.
5. 최신방법 addEventListner(이벤트의 종류, 함수의 콜백)
쓰는 이유로는 원하는 만큼 콜백을 집어 넣을수 있다.
예를 들어 아래와 같은 경우는 shout이라는 함수가 twist 함수를 덮어버린다.
loui.onclick = twist;
loui.onclick = shout;
아래와 같이 addEventListener() 를 쓰면 둘다 실행이 되는 것을 알수 있다.
loui.addEventListener('click', twist)
loui.addEventListener('click', shout)
또한 객체를 전달하는데 once를 true로 설정하면 해당 이벤트가 실행될때 한번만 실행할수 있다.
loui.addEventListener('click', twist, {{once: true}) //한번 실행
loui.addEventListener('click', shout) //여러번 실행된다
