DOM객체에서 부모와 자식구조로 나눠지는 모든 것을 '노드'라고 표현한다.
부모 자식 구조를 표시하면 나무 뿌리의 형태가 되므로 DOM트리라고 부른다고 했다.
DOM트리에서 가직가 갈라져나온 항목을 노드(node)라고 하고 DOM트리의 시작부분인 html노드를
나무뿌리에 해당한다고 해서 root node라고 부른다.
루트 노드를 시작으로 웹 문서에서 사용한 구조는 계층 구조를 이룬다.
따라서 각 노드 사이의 관계를 부모와 자식, 형제간으로 표현할 수 있다.
부모노드 (partent node)에는 자식노드 (chaild node)가 있고, 부모노드가 같은 형제노드
(sibling node)가 있다.
DOM을 구성하는 기본 원칙 ★
- 모든 HTML태그 요소(element)노드이다.
2. html에서 사용하는 텍스트 내용은 자식노드인 text노드이다.
3. html태그에 있는 속성은 자식노드인 속성(attribute)노드이다.
4. 주석은 주석(comment)노드이다.
DOM요소에 접근하고 속성 가져오기
CSS에서는 class, id, 태그등의 스타일을 각각 구별해서 정의해야한다.
이때 class, id 태그등을 '선택자(selector)'라고 한다.
DOM요소에 접근하려면 이 선택자들을 이용한다.
1. id선택자로 접근하는 getElementById()매서드
html태그의 id속성은 html요소가 문서 안에서 중복되지 않도록 사용하는 css선택자이다.
getElementById()를 사용하면 특정한 id가 포함된 해당 요소를 선택할 수 있다.
해당메서드를 사용할때 아이디명은 앞에 #을 붙이지 않고 이름만 문자열로 표현한다.
[기본형]
document.getElementById("id명")id명으로 접근예시)
html문서 최상단에 h1적기
해당 아이디로 불러와서 스타일 적용
아이디로 해당 태그에 스타일 적용된 걸 볼 수 있다.
2. class선택자로 접근하는 getElementByClassName()메서드
class선택자는 웹 문서 안에서 여러 요소에서 사용할 수 있으므로
getElementsByClassName()메서드를 사용한다.
해당 메서드를 사용하면 반환하는 요소가 2개 이상일 수 있다.
그래서 이 메서드 이름에는 반환 요소가 여러개라는 뜻에서 Element에 s가 붙는다.
불러오는 Class에는 .이붙지않으며, 문자열로 불러와야한다. getElemenstByClassName()를 사용하면 클래스 이름이 같은 DOM요소들이 HTMLCalloaction안에
객체로 저장된다. HTMLCollaction객체는 배열과 비슷하지만
객체는 아니다. HTMLCollaction은 html태그요소들을 저장하는 공간이다.
[기본형]
document.getElemenstByClassName('class명')
html 최상단에 같은 태그 세개를 붙여넣기한다.
0.1.2의 순서 배열같아보이지만 배열은 아님 !!!!!!!!!
위의 순서대로 배열같은 번호를 작성해줘야지 직접 효과가 들어간다 !
html collaction안에 배열 데이터처럼 요소객체가 저장되므로 인덱스로 불러온다.
이런식으로 응용이 가능하다.
3.태그 이름으로 접근하는 getElemenstByTagName()메서드
class나 id를 지정하지 않는 DOM요소에 접근하려면 태그를 이용한다.
getElemenstByTagName()메서드를 사용하면 해당 태그명을 사용한 요소에 접근 할 수 있다.
getElemenstByTagName()과 마찬가지로 HTMLCollaction 안에 배열형태로 저장된다.
[기본형]
document.getElemenstsByTagName('tag명')
4. 다양한 방법으로 접근하는 querySelector(), querySelectorAll()
위에 있는 getElement~메서드의 반환값은 HTMLCollactiion에 저장된다.
HTMLCollaction에는 요소만 저장된다. 즉, 'p'나 'a'같은 태그의 형태만
저장된다.
DOM트리의 텍스트, 속성노드까지 자유롭게 제어하려면 querySelector()나
querySelectorALL()메서드를 사용해야 한다.
ID선택자처럼 반환값이 1개라면 querySelector()를 사용하고
class선택자나 태그선택자처럼 반환값이 여러 개라면 querySelectorALL()을
사용한다. 또한 메서드의 ()안에는 #,.과 같은 선택자 기호가 함께 들어가야한다.
해당 메서드들의 반환값은 노드이거나 노드리스트(node list)이다.
노드 리스트도 노드를 한꺼번에 여러개 저장한 것으로 배열과 비슷하다.
만약 querySelector()로 class나 태그를 선택하면 여러개의 요소 중 첫 번째에
위치한 태그요소 한 개만 선택해준다.
[기본형]
하나일때
document.querySelector("#아이디명")
여러개일때
document.querySelectorALL(".클래스명 또는 태그이름")단순하게 내용만을 바꾸는 거면 아래처럼 하면 된다.
- 만약
어떤 동작을 해서 어떤 식으로 scr속성이 바뀌는 것을 할때는
아래의 노드로 선택을 해줘야한다. 복잡한 것들을 바로 밑을 사용한다.
위와 같은 방법으로 배열같은 숫자로 데려와서 속성값을 변경해주면 된다.
