프론트엔드 개발일지 #19 - DOM이란 ? (getElementById,getElementsByTagName,getElementByClass,querySelector의 차이 /innerText,innerContent,textContent차이)
DOM
Document Object Model은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
요소를 선택하는 방법
Document.getElementId()
일치하는 ID요소를 찾아준다. 없으면 undefined
이미지의 아이디는 유니콘,
h1의 아이디는 메인 헤딩
이렇게 선택해주면 된다 !
Document.getElementsByTagName & document.className
getElementsByTagName 메소드는 엘리먼트의 HTMLCollection 과 주어진 태그명을 반환.
루트 노드를 포함해 전체 다큐먼트를 대상으로 검색된다.
const allImages = document.getElementsByTagName('img');
for (let img of allImages) {
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Silky_bantam.jpg/440px-Silky_bantam.jpg'
}
const squareImages = document.getElementsByClassName('square');
for (let img of squareImages) {
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Silky_bantam.jpg/440px-Silky_bantam.jpg';
}document.querySelector()
이 하나의 메서드를 사용해서 ID든, 클래스 이름이든, 요소타입이든, 속성, CSS스타일이든 원하는 선택자를 무엇이든 이용해서 선택할 수 있다.
const links = document.querySelectorAll('p a');
for (let link of links) {
console.log(link.href)
}querySelector 실습
"done" 클래스를 가진 모든 요소를 선택하고 그것을 doneTodos라는 변수에 저장하세요.
하나의 체크박스를 선택하고 그것을 checkbox라는 변수에 저장하세요. 페이지에 입력 요소가 두 개 이상 있으니 주의하세요! type 속성을 사용하여 선택해야 할 것입니다. (CSS 속성 선택자가 기억나지 않는다면 구글에서 검색해 보세요! 저라면 그렇게 할 거에요!)
app.js에 코드를 작성하세요. index.html의 어떤 요소도 변경하지 마세요.
<!DOCTYPE html>
<html>
<head>
<title>Todos</title>
</head>
<body>
<h1>Garden Todos</h1>
<input type="text" placeholder="New Todo">
<ul>
<li>Start Seedlings</li>
<li class="done">Deadhead Zinnias</li>
<li class="done">Water Tomatoes</li>
<li class="done">Harvest Potatoes</li>
<li>Prune Roses</li>
</ul>
<label>Delete All</label>
<input type="checkbox" id="scales" name="scales" checked>
</body>
</html>.done {
color: grey;
text-decoration: line-through;
}const doneTodos = document.querySelectorAll('.done')
const checkbox = document.querySelector('#scales')이렇게 풀어주었다. done은 전부니까 All을 넣어주고, 클래스니까 앞에.까지, 그리고 체크박스는 아이디니까 # !
innerHTML, textContent, & innerText
이것처럼
-
innerHTML은 'element'내에서 사용자에게 '보여지는' 텍스트의 값을 읽어온다.원래 div안에는
'안녕하세요? 만나서 반가워요'가 입력되어 있지만,
브라우저가 사용자에게 이 내용을 보여줄 때는, 연속되는 공백은 무시하고 하나의 공백만 처리하여
'안녕하세요? 만나서 반가워요.'라고 보여진다. -
innerText는 이처럼 사용자에게 보여지는 텍스트를 가져온다. 사용자가 브라우저에서 디브의 내용을 복사하여 클립보드에 복사한 내용을 가져온다고 생각하면 된다.
-
textContent는 innetText와는 달리 script나 style'안녕하세요? 만나서 반가워요.'의 연속된 공백이 그대로 표현된 것을 확인 할 수 있습니다.
또한, 'display:none' 스타일이 적용된 '숨겨진 텍스트' 문자열도 그대로 출력되는 것을 확인 할 수 있습니다.태그와 상관없이 해상 노드가 가지고 있는 텍스트 값을 그대로 읽는다.
피클 연습
JavaScript를 사용하여 현재 "Delicious"라고 쓰여 있는 span 요소를 선택하세요.
JavaScript를 사용하여 해당 텍스트를 "Disgusting"으로 변경하세요. 여러분이 피클을 좋아하는 별난 입맛을 가졌더라도 텍스트를 'Disgusting'로 변경해 주세요.
<!DOCTYPE html>
<head>
<title>Pickles</title>
<!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
<script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<!--PLEASE LEAVE THIS LINE ALONE! MAKE YOUR CHANGES USING JAVASCRIPT!!-->
<h1>Pickles Are <span>Delicious</span></h1>
</body>
</html>document.querySelector('span').innerText="Disgusting"ㅋㅋ내가 피클을 디스거스팅하다구 만들어줬당...!
