Document Object Model
HTML 요소를 Javascript Object 처럼 조작할 수 있다.
DOM 을 통해 웹페이지의 컨텐츠, 구조, 스타일 읽고 조작
console.dir
: console.log 와 달리 DOM을 객체의 모습으로 출력<html>
<body>
<div id="nav">
<div class="logo"></div>
<div class="menu-wrapper">
<div class="menu">menu</div>
</div>
</div>
<div id="news-contents">
<div class="news-content-wrapper">
<div class="news-picture">news-picture</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>
console.dir(document.body.children)
// HTMLCollection(3)
// 0: div#nav / 1: div#news-contents / 2: div#footer
let newsContents = document.body.children[1]
console.dir(newsContents) // div#news-contents
새로운 <div>
요소를 만들지만, 현재 공중부양 상태, 실제 웹 페이지 상에서도 보이가 하려면 append
를 해야함
document.createElement('div')
****
const tweetDiv = document.createElement('div')
// 변수에 새로운 <div> 요소를 할당
document.body.append(tweetDiv)
append
라는 메서드로 변수 tweetDiv 를 <body>
에 넣음
하지만 내용이 없어서 표시가 container 안에 아무것도 없음
HTML 문서의 요소를 선택하기 위해 사용할 수 있는 document의 메서드
getElementById('아이디명')
: 아이디로 요소 선택
⇒ 출력 결과는 HTMLHeadingElement
getElementByClassName('클래스명')
: 클래스로 요소 선택
⇒ 해당 클래스를 가진 요소 모두 선택 / 출력 결과는 HTMLHeadingElement
getElementByTagName('태그명')
: 태그 이름으로 요소 선택
⇒ 해당 태그를 가진 요소 모두 선택 / 출력 결과는 HTML태그명Element
getElementByName()
: name
속성으로 요소 선택
⇒ 해당 name 속성 값 가진 요소 모두 선택 / 출력 결과는 NodeList에 감싸진 HTML태그명Element
<input type="text" name="user">
<input type="text" name="user">
const inputs = document.getElementsByName('user');
console.log(inputs) // NodeList (2) [input, input]
// 인자로 전달된 문자열과 동일한 name 속성 값을 가진 요소 모두 선택
querySelector()
: 선택자로 첫번째 인자 요소 선택('div')
와 id ('#tweetList')
class ('.tweet ')
으로 가장 많이 사용const oneTweet = document.querySelector('.tweet')
const getOneTweet = document.getElementById('container')
const queryOneTweet = document.querySelector('#container')
console.log(getOneTweet === queryOneTweet) // true
querySelectorAll()
: 선택자로 선택되는 요소 모두 선택클래스 이름이 tweet 인 모든 HTML 요소를 유사 배열로 받아옴
⇒ 출력 결과는 NodeList에 담겨진 HTML태그명Element
const tweets = document.querySelectorAll('.tweet')
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
선택된 특정 요소는 속성 값, 스타일 등의 내용을 변경할 수 있다.
우리가 선택한 요소들이 innerText, textContent 등에 접근할 수 있는 이유는
이들이 HTMLElement
가 가지고 있는 속성(Property)
이고, 선택된 요소들이 HTMLElement
를 상속받기 때문
<h2>Hello</h2>
const oneDiv = document.createElement('div');
console.log(oneDiv) // <div></div>
oneDiv.textContent = 'dev'; // textContent 로 비어있는 div 엘리먼트에 문자열을 입력
console.log(oneDiv) // <div>dev</div>
oneDiv.classList.add('tweet') // classList.add 로 class 추가
console.log(oneDiv) // <div class="tweet">dev</div>
const title = document.querySelector('h2');
title.innerText = '안녕하세요!';
title.style.color = 'red';
⇒ title
은 HTMLHeadingElement
를 가지고는데,
HTMLHeadingElement
는 HTMLElement
를 상속받기 떄문에
HTMLElement
의 속성이나 메서드에 접근할 수 있다.
remove
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.
⇒ id가 container인 요소 아래 tweetDiv 추가하고 remove로 삭제
innerHTML
document.querySelector('#container').innerHTML = '';
⇒ id가 container인 요소 아래의 모든 요소 지우기
⇒ 간단하고 편리하지만 보안에서 몇 가지 문제를 가지고 있음
removeChild
const container = document.querySelector('#container');
while (container.firstChild) {
container.removeChild(container.firstChild);
}
⇒ container의 첫 번째 자식 요소가 존재하면 첫번째 자식 요소를 제거
근데 이러면 제거되지 말아야할 H2 같은 것들이 제거 될 수 있으니
자식 요소가 담고 있는 문자열을 비교해 h2만 남기거나,
const container = document.querySelector('#container');
while (container.children.length > 1) {
container.removeChild(container.lastChild);
}
⇒ container의 자식 요소가 1개만 남을때까지, 마지막 요소를 제거
새로운 변수를 생성하고 h2를 할당해뒀다가 반복문이 끝난 뒤 추가할 수 있다.
const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
tweet.remove();
})
// or
for (let tweet of tweets){
tweet.remove()
}
⇒ 클래스 이름이 Tweet인 요소만 찾아서 제거
선택한 요소에 텍스트를 추가
⇒ 단순히 텍스트를 추가하는게 아니라 노드를 생성하는 것
element.createTextNode('My Text')
form 자체에 name 설정하면 querySelector로 접근하지 않고
바로 document.formname으로 접근 가능
출처
form 에 접근하기
<form>
<input type="radio" name="age" value="10">
<input type="radio" name="age" value="20">
</form>
let ageElems = form.elements.age;
element.setAttribute('속성명', '속성값')
선택한 요소의 속성값을 정함
⇒ 이미 속성값이 존재한다면 그 값을 지우고 새 값 적용
<p>
<a id="link" href="#">moono</a>
</p>
document.querySelector('#link').setAttribute('href', 'https://velog.io/@moonozz')
// link id를 가진 요소 선택 후 href 속성값 변경