[Cookbook] 페이지(DOM) 요소에 접근하기

Chapter 11. 페이지(DOM) 요소에 접근하기

1. 주어진 요소에 접근하여 부모와 자식 요소 찾기

생성된 "DOM 트리" 내부의 선택된 요소(부모/자식 관계 포함)에 접근한다.

"document 객체" 맴버(메서드(.getElementById 등) 및 속성(.childNodes 등))를 이용해 DOM 트리 내부의 각 요소에 접근할 수 있다.

   

또한, 각 브라우저 밴더들의 다양한 기술 차이 중 요소의 "앞", "뒤"에 생성되는 "공백 버그"라는 것도 존재한다.(아래 사이트를 참조)

참고 사이트:

DOM 노드 및 탐색:

http://mohwaproject.tistory.com/entry/DOM-%EB%85%B8%EB%93%9C-%ED%83%90%EC%83%89

DOM 사용 최소화 하기:

http://mohwaproject.tistory.com/entry/DOM-%EC%82%AC%EC%9A%A9-%EC%B5%9C%EC%86%8C%ED%99%94-%ED%95%98%EA%B8%B0

DOM 공백 버그 해결하기:

http://mohwaproject.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A1%9C-%EA%B3%B5%EB%B0%B1-%EB%B2%84%EA%B7%B8-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0

DOM 조작 API:

http://mohwaproject.tistory.com/entry/DOM-%EC%A1%B0%EC%9E%91-API

2. 선택자 API(document.querySelectorAll)를 활용한 요소 찾기

P.S: .querySelector 메서드는 .querySelectorAll(요소 컬렉션 반환)와 달리 선택된 한개의 요소만을 반환한다.

3. 주어진 클래스를 가진 모든 요소의 배열 만들기

문서 내 주어진 클래스 이름을 가진 객체 컬렉션을 반환한다.

4. 요소의 스타일 정보 가져오기

요소의 스타일 정보 접근 시 각 "브라우저 밴더"에 따라 접근 방법이 조금씩 달라진다.(아래 코드(_style 함수)를 참조)

 5. 기존 요소의 속성, 추가 및 삭제.

 

 .setAttribute 메서드를 활용해 해당 요소의 속성을 추가할 수 있다.