추가로 정리할 부분이 있어 정리하였다.
-
insertAdjacentElement
-
document.querySelector('태그 > 태그')
-
childElementCount
Dom.insertAdjacentElement( Position , Dom2)
Element는 호출 된 요소에 상대적인 지정된 위치에 지정된 요소 노드를 삽입합니다.
position
- 'beforebegin': targetElement자체 전에 .
- 'afterbegin': targetElement 첫 번째 자식 앞에.
- 'beforeend': targetElement, 마지막 자식 뒤.
- 'afterend': targetElement자체 후 .
ex)
<html>
<head>
</head>
<body>
<ul>
<li class='B'>B</li>
<li>D</li>
</ul>
</body>
<script>
let b = document.querySelector('.B');
let li = document.createElement('li');
li.innerHTML = 'C';
b.insertAdjacentElement('afterend',li)
let li2 = document.createElement('li');
li2.innerHTML = 'A';
b.insertAdjacentElement('beforebegin',li2);
</script>
</html>
결과
li가 B와 D밖에 존재하지 않았지만 필요에 따라 B를 가진 태그를 기준으로 그 앞과 뒤에 적용시킨다.
document.querySelector('태그 > 태그')
목표 : count값을 통해 숫자 7을 나타내기
>를 사용하지않은 안좋은 예시
<html>
<head>
</head>
<body>
<ul>
<li class='B'>공부 하루에 제발 좀 <strong></strong>시간 만큼 하자 </li>
<li>AWS 언제 할 거니 </li>
</ul>
</body>
<script>
let count = 7;
let ul = document.querySelector('ul');
ul.childNodes[1].childNodes[1].innerHTML = count;
</script>
</html>
childNodes를 반복하고 그안에 숫자로 넣어서 가독성도 떨어진다.
>를 사용한 예시
<html>
<head>
</head>
<body>
<ul>
<li class='B'>공부 하루에 제발 좀 <strong></strong>시간 만큼 하자 </li>
<li>AWS 언제 할 거니 </li>
</ul>
</body>
<script>
let count = 7;
let strong = document.querySelector('ul > li > strong');
strong.innerHTML = count;
</script>
</html>
눈으로 봐도 간단하게 strong 태그를 대상으로 count값을 넣은 것을 알 수 있다.
childElementCount
주어진 요소의 자식 요소 개수를 unsigned long 타입으로 반환합니다.
<html>
<body>
<ul id='ul'>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>
</body>
<script>
let ul = document.getElementById('ul');
console.log(ul.childElementCount)
</script>
</html>=>결과는 li의 갯수인 7이 나온다.
Dom 삽입하는 방법 3가지
변수로 모양 설정 후 insertAdjacentHTML 사용
함수로 모양 설정 후 insertAdjacentHTML 사용
함수로 모양 설정 후 innerHTML 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<body>
<ul id='a'>
</ul>
<ul id='b'>
</ul>
<ul id='c'>
</ul>
</body>
<script>
const moving1 = `<li>a</li>`;
document.querySelector('#a').insertAdjacentHTML('afterbegin',moving1)
const moving2 = (b)=>`<li>${b}</li>`
document.querySelector('#b').insertAdjacentHTML('afterbegin',moving2('b'))
const moving3 = (c)=>`<li>${c}</li>`
document.querySelector('#c').innerHTML = moving3('c');
</script>
</html>결과
a
b
c
나의 하루를 가능한 기억하고 즐기고 후회하지말자
js 에서 공부한 dom 들을 기억해 뒀다가 블랙커피 스터디에서 활용하고 복습까지.. 만점