본문
160114P(목)
웹브라우저 자바스크립트
DOM(Document Object Model)
제어 대상을 찾기
document.getElementsByTagName();
유사배열을 리턴
<!DOCTYPE html>
<html>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<script>
var lis = document.getElementsByTagName('li');
for(var i=0; i < lis.length; i++){
lis[i].style.color='red';
}
</script>
</body>
</html>
조회 대상을 좁히기
<!DOCTYPE html>
<html>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<script>
var ul = document.getElementsByTagName('ul')[0];
var lis = ul.getElementsByTagName('li');
for(var i=0; lis.length; i++){
lis[i].style.color='red';
}
</script>
</body>
</html>
클래스 네임을 기준으로 조회하기
<!DOCTYPE html>
<html>
<body>
<ul>
<li>HTML</li>
<li class="active">CSS</li>
<li class="active">JavaScript</li>
</ul>
<script>
var lis = document.getElementsByClassName('active');
for(var i=0; i < lis.length; i++){
lis[i].style.color='red';
}
</script>
</body>
</html>
css선택자를 사용해서 객체 조회하기
하나만 선택해서 객체 조회
<!DOCTYPE html>
<html>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>HTML</li>
<li class="active">CSS</li>
<li>JavaScript</li>
</ol>
<script>
var li = document.querySelector('li');
li.style.color='red';
var li = document.querySelector('.active');
li.style.color='blue';
</script>
</body>
</html>
모든 객체를 조회
<!DOCTYPE html>
<html>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>HTML</li>
<li class="active">CSS</li>
<li>JavaScript</li>
</ol>
<script>
var lis = document.querySelectorAll('li');
for(var name in lis){
lis[name].style.color = 'blue';
}
</script>
</body>
</html>
jQuery
라이브러리
자주 사용하는 로직을 재사용가능하도록 고안된 소프트웨어
jQuery
DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 도구
<!DOCTYPE html>
<html>
<body>
// jQuery 파일 포함
// Using jQuery with a CDN
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
jQuery( document ).ready(function( $ ) {
$('body').prepend('<h1>Hello world</h1>');
});
</script>
</body>
</html>
$('body').prepend('<h1>Hello world</h1>');
태그 이름이 body인 것을 선택해서, 앞쪽(prepend)에 지정된 문자 삽입
jQuery로 객체를 조회하기
$ ('li')
css 선택자
객체 호출
css('color', 'red');
css 컬러를 red로 변경
<!DOCTYPE html>
<html>
<head>
<style>
#demo{width:200px;float: left; margin-top:120px;}
#execute{float: left; margin:0; font-size:0.9em;}
#execute{padding-left: 5px}
#execute li{list-style: none}
#execute pre{border:1px solid gray; padding:10px;}
</style>
</head>
<body>
<ul id="demo">
<li class="active">HTML</li>
<li id="active">CSS</li>
<li class="active">JavaScript</li>
</ul>
<ul id="execute">
<li>
<pre>
var lis = document.getElementsByTagName('li');
for(var i=0; i<lis.length; i++){
lis[i].style.color='red';
</pre>
<pre>
$('li').css('color', 'red') </pre>
<input type="button" value="execute" onclick="$('li').css('color', 'red')" />
</li>
<li>
<pre>
var lis = document.getElementsByClassName('active');
for(var i=0; i < lis.length; i++){
lis[i].style.color='red';
}</pre>
<pre>
$('.active').css('color', 'red')</pre>
<input type="button" value="execute" onclick="$('.active').css('color', 'red')" />
</li>
<li>
<pre>
var li = document.getElementById('active');
li.style.color='red';
li.style.textDecoration='underline';</pre>
<pre>
// Chaining
$('$active').css('color', 'red').css('textDecoration', 'underline');
</pre>
<input type="button" value="execute" onclick="$('#active').css('color', 'red').css('textDecoration', 'underline')" />
</li>
</ul>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</body>
</html>
HTMLElement
getElement* 메소드를 통해서 객체를 조회했다면, 이 객체들을 대상으로 구체적인 작업을 처리해야 한다.
객체.constructor.name
객체의 이름을 알아낼 수 있다.
객체가 하나만 리턴되는 getElement* 메소드의 리턴 데이터 타입
HTML***Element
객체가 여러개 리턴되는 getElement* 메소드의 리턴 데이터 타입
HTMLCollection
각각의 객체의 쓰임에 따라서 다른 리턴 타입을 가진다.
<a id="anchor" href="http://opentutorials.org">opentutorials</a>
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="list">JavaScript</li>
</ul>
<input type="button" id="button" value="button" />
<script>
// HTMLLIElement
var target = document.getElementById('list');
console.log(target.constructor.name);
// HTMLAnchorElement
var target = document.getElementById('anchor');
console.log(target.constructor.name);
// HTMLInputElement
var target = document.getElementById('button');
console.log(target.constructor.name);
</script>
DOM 스펙
위의 리턴타입들은 HTMLElement를 상속받고 있다.
DOM tree
'낡은 서랍장 > JavaScript' 카테고리의 다른 글
| 160124P(일) (0) | 2016.01.24 |
|---|---|
| 160115P(금) (0) | 2016.01.15 |
| 160113P(수) (0) | 2016.01.13 |
| 160106P(수) (0) | 2016.01.06 |
| 160104P(월) (0) | 2016.01.05 |
댓글