본문
160115P(금)
웹브라우저 자바스크립트
HTMLCollection
리턴결과가 복수인 경우에 사용되는 객체
배열이 아니라 유사배열이다.
<!DOCTYPE html>
<html>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="active">JavaScript</li>
</ul>
<script>
console.group('before');
var lis = document.getElementsByTagName('li');
for(var i = 0; i < lis.length; i++){
console.log(lis[i]);
}
console.groupEnd();
console.group('after');
lis[1].parentNode.removeChild(lis[1]);
for(var i = 0; i < lis.length; i++){
console.log(lis[i]);
}
console.groupEnd();
</script>
</body>
</html>
consol.group("그룹이름");
consol.groupEnd();
jQuery 객체
var li = $('li');
li가 바로 jQuery 객체이다.
$('li') 이것은 jQuery 함수
암시적 반복
DOM과 다르게 jQuery 객체의 메소드를 실행하면 선택된 엘리먼트 전체에 대해서 동시에 작업이 처리된다.
엘리먼트 정보 조회
<ul>
<li>html</li>
<li>css</li>
<li>JavaScript</li>
</ul>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
console.log($('li').length);
console.log($('li')[0]);
var li = $('li');
for(var i=0; i<li.length; i++){
$(li[i]).css('color', 'red');
}
</script>
각각에 담겨있는 객체는 DOM객체이다.
따라서 $기호로 감싸줘야지만 jQuery 프로퍼티를 사용가능하다.
map
jQuery 객체의 엘리먼트를 하나씩 순환한다.
첫번째 인자로 전달된 함수가 호출되고 첫번째 인자로 인덱스, 두번째로 DOM객체가 전달된다.
<ul>
<li>html</li>
<li>css</li>
<li>JavaScript</li>
</ul>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var li = $('li');
li.map(function(index, elem){
console.log(index, elem);
$(elem).css('color', 'red');
})
</script>
Element 객체
Element와 HTMLElement를 따로 만든 이유는 DOM이 HTML과 js만을 위한것이 아니기 때문이다.
Element는 XML, SVG, XUL 등에 적용 가능하다.
식별자 API
Element.tagName
현재 엘리먼트의 태그 이름을 알아낸다.
수정은 불가
<ul>
<li>html</li>
<li>css</li>
<li id="active" class="important current">JavaScript</li>
</ul>
<script>
console.log(document.getElementById('active').tagName)
</script>
Element.id
문서에서 단 하나만 등장할 수 있다.
따라서 고유 식별자!
수정도 가능하다.
<ul>
<li>html</li>
<li>css</li>
<li id="active">JavaScript</li>
</ul>
<script>
var active = document.getElementById('active');
console.log(active.id);
active.id = 'deactive';
console.log(active.id);
</script>
Element.className
여러개의 엘리먼트를 그룹핑
classList가 훨씬 사용하기 쉽고 진보됐다.
수정도 가능하다.
<ul>
<li>html</li>
<li>css</li>
<li id="active">JavaScript</li>
</ul>
<script>
var active = document.getElementById('active');
// class 값을 변경할 때는 프로퍼티의 이름으로 className을 사용한다.
active.className = "important current";
console.log(active.className);
// 클래스를 추가할 때는 아래와 같이 문자열의 더한다.
active.className += " readed"
</script>
Element.classList
className보다 사용하기 쉬우나 까다롭다.
Token을 사용해서 클래스 네임을 구분하며 유사배열을 리턴한다.
<ul>
<li>html</li>
<li>css</li>
<li id="active" class="important current">JavaScript</li>
</ul>
<script>
function loop(){
for(var i=0; i<active.classList.length; i++){
console.log(i, active.classList[i]);
}
}
// 클래스를 추가
</script>
<input type="button" value="DOMTokenList" onclick="console.log(active.classList);" />
<input type="button" value="조회" onclick="loop();" />
<input type="button" value="추가" onclick="active.classList.add('marked');" />
<input type="button" value="제거" onclick="active.classList.remove('important');" />
// 없으면 만들어서 true리턴, 있으면 지우고 false리턴
<input type="button" value="토글" onclick="active.classList.toggle('current');" />
'낡은 서랍장 > JavaScript' 카테고리의 다른 글
| 160124P(일) (0) | 2016.01.24 |
|---|---|
| 160114P(목) (0) | 2016.01.14 |
| 160113P(수) (0) | 2016.01.13 |
| 160106P(수) (0) | 2016.01.06 |
| 160104P(월) (0) | 2016.01.05 |
댓글