TIL 001 JavaScript_DOM

aliceinkorea·2021년 2월 5일
0

TIL

목록 보기
1/23
post-thumbnail

🎯 JavaScript이용하여 HTML에 list추가하는 방법 익히기

<body>
	<h1 id="main-title">DOM(Document Object Model)</h1>
	<ul class='website-mom'>
		<li class="website">
			<a class="link-google" href="http://google.com">Google</a>
		</li>
	</ul>
</body>

HTML element를 JavaScript로 가져오기

JavaScript에서 동적으로 브라우저를 변경해주기 위해서는 가정 먼저 HTML의 tag element를 JavaScript file에 불러와야 한다.

document.querySelector();
const link = document.querySelector('.website a');

class가 website인 element의 a tag를 가져오기 위해서는 document.querySelector()를 쓰면된다.
또한 element안의 element를 가져올 때는 띄어쓰기로 구분하여 적는다.

console.log();

console.log를 통해 link를 확인해본 결과, a tag가 console에 잘 찍힌다. 즉, HTML의 a tag를 JavaScript로 잘 불러왔음을 의미한다.

JavaScript로 불러온 HTML element의 특정 attribute 값만 필요하다면?

link.getAttribute('가져오고 싶은 attribute');
console.log(link.getAttribute('href'));

getAttribute()를 사용하여 console에 출력해보면 내가 원하는 값만 받아볼 수 있는 것을 확인할 수 있다.

HTML element의 attribute를 JavaScript에서 설정해줄 수 있다.

link.setAttribute('바꿔 줄 attribute name', '바꿀 contents');
console.log(link.setAttribue('href', 'www.naver.com'));

HTML element의 class를 JavaScript에서 추가/제어 할 수 있다.

link.classList.add();
link.classList.remove();

HTML에 없던 element를 JavaScript로 만들어 줄 수 있다.

document.creatElement()
const list = document.creatElement('li')

새로 만들어 준 li tag에 contents를 추가해 완전한 element(node)를 만들어 줄 수 있다.
이 때 쓰는 property가 innerHTML

list.innerHTML = '이것은 HTML인가 JavaScript인가!';

새로운 list element를 부모 element 안에 넣어주기 위해서는 부모 element를 JavaScript로 불러와야한다.

const websiteMom = document.querySelector('.websute-mom');

불러운 부모 element 안에 자식 element인 list를 추가하는 method는 appendChild()

websiteMom.appendChild(list);

profile
If you don't build your dream, someone will hire you to help build theirs.

1개의 댓글

comment-user-thumbnail
2021년 3월 10일

Selector 이용하는건 익숙하지 않아서 잘 이용해보지 않았는데 되게 유용해 보이네요!!

답글 달기