3-2. selector api

www.javaspecialist.co.kr
Selector API와 DOM 조작
HTML5의 추가된 Selector API는 DOM조작을 더욱 쉽게 한다.
1

1. Selector API
함수 설명 비고
getElementById( )
특정 id 속성값에 해당하는 요소를 반환
<div id ="foo">
getElementById("foo");
HTML5 이전에 사
용
getElementsByName( )
특정 name 속성값에 해당하는 요소를 반환
<input type="text" name="foo">
getElementsByName("foo");
getElementsByTagName( )
특정 태그 이름과 일치하는 모든 요소를 반환
<input type="text">
getElementsByTagName("input");
getElementsByTagNameNS()
태그의 name 속성의 값과 일치하는 모든 요소를 반환
<input type="text" name="emai");
getElementsByTagNameNS("email");
querySelector()
페이지내에서 특정 선택자 규칙과 일치하는 첫 번째 요소를 반환
<input class="error">
querySelector("input.error");
HTML5에 추가됨
CSS 선택자에 대한
이해가 필요함querySelectorAll()
특정 선택자 규칙 또는 여러 규칙과 일치하는 모든 요소를 반환
<div id="results"><table><tr><td>…
querySelectorAll("#results td")
• DOM Tree에서 요소를 빠르고 쉽게 찾아낼 수 있다.
• 기존 자바스크립트 라이브러리(jQuery 등)들이 지원하던DOM Selector의 네이티브 구현이다.
• getElementByClassName도 추가적으로 사용할 수 있게 되었다.
• 검색 조건에는 우리가 일반적으로 많이 사용하는 CSS 선택 문법을 그대로 사용할 수 있으며, 쉼표(',')로 구분하여 하나 이
상의 검색 조건을 추가할 수 있다.
2

2. Selector API 사용 예
• // 클래스 이름이 'warning', 또는 'note'인 단락 요소(<p>)를 모두 찾음
• var special = document.querySelectorAll("p.warning, p.note");
• // id 가 'main', 'basic', 'exclamation'인 요소들 중 첫 번째 발견된 요소를 찾음
• var el = document.querySelector("#main, #basic, #exclamation");
• // HTML 문서의 <body>에 속한 <style> 요소들 중
• // 'type' 속성이 없거나, 'text/css'인 첫 번째 발견된 요소를 찾음
• var style = document.body.querySelector("style[type='text/css'], style:not([type])");
• // id 가 'fruits'인 요소의 <input> 요소(체크박스)들 중 선택된(checked) 요소를 찾음
• var list = document.querySelectorAll("#fruits input:checked");
• // 또는
• var list = document.getElementByID('fruits').querySelectorAll("input:checked");
• //또는
• var fruits = document.getElementById("fruits");
• var list = fruits.querySelectorAll("input:checked"); //이 부분의 실행 횟수가 많을 때 권장함
3

3. HTML 파싱과 자바스크립트 코드 실행
• Selector API를 이용해 DOM 트리로부터 HTML DOM 객체를 가져오기 위해서는 자바스크립
트 코드이 실행이 HTML 문서가 파싱된 다음 실행되어야 함
• HTML 문서가 파싱되기 전에 자바스크립트 코드가 실행되면 Selector API로 HTML DOM 객
체를 DOM Tree 에서 찾지 못함
– 이 때 Selector API는 null을 반환함
• 자바스크립트 코드가 HTML 파싱이 완료된 다음 실행되게 하기 위해서 다음 3가지 방법 중
하나를 사용할 수 있음
– 1. HTML 문서 본문의 맨 아래 <script>코드를 이용하여 자바스크립트 코드를 작성함
• 권하고 싶지 않음
– 2. <script>요소를 이용해 자바스크립트 코드를 <head>요소에 포함시킴
• 이때 onload 이벤트를 이용하여 페이지가 로드된 다음 자바스크립트 코드가 실행되도록
함
– 3. 자바스크립트 코드를 외부 파일로 작성했을 경우 defer 속성을 부여함
• <script src="xxx.js" defer></script>
4

4. 본문의 맨 아래에 자바스크립트 코드 삽입
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Emp 목록</title>
</head>
<body>

<div>

</div>

<script>
var nameList = document.querySelectorAll("table tr > td:nth-child(2)");
var salList = document.querySelectorAll("table tr > td:nth-child(6)");
// 생략…
</script>
</body>
</html>
5

5. head 안에 삽입 후 onload 이벤트 처리
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./default.css" type="text/css" >
<script>
window.onload = function() {
//생략…
}
</script>
</head>
<body>
</body>
</html>
6

6. 외부 파일로 작성 및 defer 속성 이용
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./default.css" type="text/css" >
<script src="sample.js" defer></script>
</head>
<body>
</body>
</html>
-------------------------------
sample.js 파일
(function(){
//생략…
})();
7

• HTML 태그를 포함한 요소를 추가할 경우
– 태그를 포함한 컨텐츠를 갖게 함
– 링크 또는 이미지 등을 동적으로 추가하거나 제
거해야 할 경우 사용
• 방법
– innerHTML 속성을 이용
• HTMLElement 객체의 속성
• 직접 태그를 문자열 리터럴로 입력
– appendChild()/removeChild() 등 메서드를 이용
• Node 객체(document, element 객체, attribut
e 객체, Text, comment)의 속성
• createElement()로 요소를 생성한다.
• Element 객체의 setAttribute() 메서드로 속성
의 값을 지정한다.
• appendChild()로 다른 요소의 자식 요소로 추
가한다.
• 예)
– <div id="content"></div>에 <img
src="sample.png">를 포함하여 동적으로 이미
지가 보여지게 해야 할 경우
– 오른쪽 예에서 주석처리된 부분은 바로 윗 라인
과 동일한 기능을 함
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta charset="euc-kr">
5. <title>컨텐츠 제어</title>
6. <script>
7. window.onload = function() {
8. var contentArea = document.getElementById("content
");
9.
10. var showBtn = document.getElementById("show");
11. var hideBtn = document.getElementById("hide");
12.
13. var imgElem = document.createElement("img");
14. imgElem.setAttribute("src", "victory.png");
15.
16. showBtn.onclick = function() {
17. contentArea.innerHTML = "<img src='victory.png
'>";
18. //contentArea.appendChild(imgElem);
19. }
20.
21. hideBtn.onclick = function() {
22. contentArea.innerHTML = "";
23. //contentArea.removeChild(imgElem);
24. }
25. }
26. </script>
27. </head>
28.
29. <body>
30. <input type="button" id="show" value="Show">
31. <input type="button" id="hide" value="Hide">
32. <div id="content"></div>
33. </body>
34. </html>
7. HTML 요소의 컨텐츠 제어 (1/2) (SelectorAPI/appendChild.html)

• 단순 텍스트(CDATA)의 데이터를 조회하거나
변경할 경우
– 태그가 포함되지 않는 텍스트(Char Data)를
포함하도록 함
– 요소의 텍스트 컨텐츠를 변경하거나 조회함
• 방법
– textContent 속성
• Node 객체(document, element 객체, attri
bute 객체, Text, comment)의 속성
• 폼 요소가 아닐 경우
– value 속성
• Text객체의 속성
• input 엘리먼트 등 폼 요소일 경우
• 예)
– <div id="content"></div>에 입력 필드에 입력
한 내용을 보여지게 하거나 입력필드에 값을
지정한다.
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta charset="euc-kr">
5. <title>텍스트 컨텐츠 제어</title>
6. <script>
7. window.onload = function() {
8. var contentArea =
document.getElementById("content");
9.
10. var getBtn = document.getElementById("get");
11. var setBtn = document.getElementById("set");
12.
13. var textField =
document.querySelector("[type=text]");
14.
15. getBtn.onclick = function() {
16. contentArea.textContent = textField.value;
17. textField.value = "";
18. }
19.
20. setBtn.onclick = function() {
21. textField.value = "Some Value";
22. }
23. }
24. </script>
25. </head>
26.
27. <body>
28. <input type="text">
29. <input type="button" id="get" value="Get">
30. <input type="button" id="set" value="Set">
31. <div id="content"></div>
32. </body>
33. </html>
7. HTML 요소의 컨텐츠 제어 (2/2) (SelectorAPI/textContent.html)

Lab - HTML 문서 파싱하기
• 다음 HTML 문서가 로드되면 HTML 문서를 파싱하여 모든사원의 이름과 연봉(급여*12 + 커
미션)을 브라우저 콘솔에 출력하고, 표 아래에 총 급여액을 출력하는 프로그램을 작성세요.
– 외부 파일로 작성되어야 한다.
– 제공되는 HTML 소스코드의 표 아래에 <div id="total_sal"></div>를 추가하고 이곳에 총 급
여액을 출력하라.
– document.querySelectorAll()
– document.querySelector()
– 배열의 길이는 .length
• nameList.length
– 요소의 내용 텍스트는
• DOM객체.textContent
– 요소의 내용 HTML은
• DOM객체.innerHTML
– window.parseFloat("문자열");
– for 문 이용해서 반복 처리
– (function() {
//코드 작성
})();
10

Lab - Solution (SelectorAPI/Lab/end/emp.js)
1. (function(){
2. var nameList=document.querySelectorAll("table tr > td:nth-child(2)");
3. var salList=document.querySelectorAll("table tr > td:nth-child(6)");
4. var commList=document.querySelectorAll("table tr > td:nth-child(7)");
5. var name,sal,comm;
6. var annualSal;
7. var totalSal=0;
8.
9. for(var i=0;i<nameList.length;i++){
10. name=nameList[i].textContent;
11. sal=parseFloat(salList[i].textContent);
12. comm=parseFloat(commList[i].textContent);
13. annualSal=sal*12+comm;console.log("%s님의 연봉은 %f입니다...",name,annualSal);
14. totalSal+=annualSal}document.querySelector("#total_sal").textContent=totalSal
15. }
16.)();
11

Lab - Solution (SelectorAPI/Lab/end/EmpList.html)
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="EUC-KR">
5. <title>Emp 목록</title>
6. <link rel="stylesheet" href="./default.css" type="text/css" >
7. <script src="emp.js" defer></script>
8. </head>
9. <body>
10. <div>
11. <table>
12. 
13. </table>
14. <div id="total_sal"></div>
15. </div>
16. 
17. </body>
18. </html>
12

3-2. selector api

More Related Content

What's hot

Viewers also liked

Similar to 3-2. selector api

3-2. selector api

Editor's Notes