DOM Scripting. JeremyKeith 저서, 부제 WebDesign with JavaScript and the [DOM], 번역판 제목 DOM 스크립트
관련포스트
주요내용
Node (nodeType)
- element (1)
- attribute (2)
- text (3)
꼭 알아야할 핵심 기본기
- 단계적 기능 축소 (Graceful degration) : 스크립트를 사용하지 않더라도 동작 가능한 웹문서 만들기
스크립트 분리 (Unobtrusive JavaScript) : 웹 문서 구조에서 동작 분리하기
- 하위 호환성 (Backwards compatibility) : 구 웹 브라우저에서도 동작 가능하도록 확인하기
위 내용을 준수한 팝업 윈도우 스크립트 (a tag에 class="popup"을 적은 후)
1 function popUp(winURL) {
2 window.open(winURL, 'Pop-up window', 'width=320, height=480');
3 return false;
4 }
5
6 window.onload = function() {
7 if (!document.getElementsByTagName) return false;
8 var links = document.getElementsByTagName('a');
9 for (var i=0; i<links.length; i++) {
10 if (links[i].className == "popup") {
11 links[i].onclick = function() {
12 return popUp(this.getAttribute('href'));
13 }
14 }
15 }
DOM core and HTML-DOM
document.getElementsByTagName("form") document.forms element.getAttribute("src") element.src element.setAttribute("src", a) element.src = a
노드 메쏘드들
- getElementById
- getElementsByTagName
- getAttribute
- setAttribute
- createElement
- appendChild
- createTextNode
- insertBefore (ex, parentElement.insertBefore(newElement, targetElement) )
노드 속성들
- nodeValue
- firstChild
- lastChild
- parentNode
- nextSibling
- style ( style.color, style.fontFamily... )
직접 구현하는 insertAfter
accesskey 사용 (from http://www.clagnut.com/blog/193/ )
- 1 : Home
- 2 : 본문으로 바로가기
- 4 : 검색페이지
- 9 : 연락처
- 0 : 접근성 문서
- 외부 CSS 파일은 DOM으로 그 정보를 볼 수 없다.
- element.className += " intro";
CSS class 추가하기와 특정 테그 다음 테그의 스타일 번경하기
1 function addClass(element, value) {
2 if (!element.className) {
3 element.className = value;
4 } else {
5 newClassName = element.className;
6 newClassName+= " ";
7 newClassName+= value;
8 element.className = newClassName;
9 }
10 }
11
12 function styleElementSiblings(tag, theclass) {
13 if (!document.getElementsByTagName) return false;
14 var elems = document.getElementsByTagName(tag);
15 for (var i=0; i < elems.length; i++) {
16 var elem = getNextElement(elems[i].nextSibling);
17 addClass(elem, theclass);
18 }
19 }