[자바스크립트]- ★html id class 태그 선택해서 접근/getElementById, getElementsByClassName, getElementsByTagName, querySelector, querySelectorAll / 트리노드 / DOM을 구성하는 기본 원칙 /

 트리 노드

DOM객체에서 부모와 자식 구조로 나눠지는 모든 것을 '노드'라고 표현한다. 
부모 자식 구조를 도표로 표시하면 나무 뿌리의 형태가 되므로 DOM트리라고 부른다고 했다. 
DOM트리에서 가지가 갈라져나온 항목을 노드(node)라고 하고, DOM 트리의 시작 부분인 html 노드를 나무 뿌리에 해당한다고 해서 root node라고 한다. 
root node를 시작으로 웹 문서에서 사용한 요소는 계층 구조를 이룬다. 
따라서 각 노드 사이의 관계를 부모와 자식, 형제 간으로 표현할 수 있다. 
부모노드(parent node)에는 자식노드(child node)가 있고, 부모노드가 같은 형제노드(sibling node)가 있다. 

---

 ★  DOM을 구성하는 기본 원칙  

1. 모든 HTML태그는 요소(element)노드이다. 
2. html에서 사용하는 텍스트 내용은 자식노드인 text노드이다. <title>제목</ title > 제목이 텍스트노드
3. html 태그에 있는 속성은 자식 노드인 속성(attribute)노드이다. <a href = > 에서 href가 속성(attribute)노드
4. 주석은 주석(comment)노드이다.  

---

★ DOM 요소에 접근하고 속성 가져오기 

css에서는 class, id, 태그 등의 스타일을 각각 구별해서 정의해야한다. 
이때 class, id, 태그 등을 '선택자(selector)'라고 한다. 
DOM 요소에 접근하려면 이 선택자들을 이용한다. 

---

속성 변경할 때

html을 선택.style.바꾸고자하는 속성 = '값';
document.querySelector(".textbox").style.display = "none";
colorBox.style.backgroundColor = color;(변수에 태그를 넣어놔서 그걸 선택하고 뒤에 매개변수로 값을 넣음)

 

---

 1. id 선택자로 접근하는 getElementById()매서드

html태그의 id 속성은 html 요소가 문서 안에서 중복되지 않도록 사용하는 css 선택자이다. 
getElementById()를 사용하면 특정한 id가 포함된 해당 요소를 선택할 수 있다. 
해당 매서드를 사용할 때 아이디명은 앞에 #을 붙이지 않고 이름만 문자열로 적어준다. 

getElementById 뒤에 아이디라고 써져있으니 #를 쓰지 않는다. 

 [기본형]
document.getElementById('아이디명')

<h1 id="heading">제목1</h1>

  //h1태그 선택해서 heading 변수에 할당

      const heading = document.getElementById("heading");

 

      //선택한 태그에 style 적용

      heading.style.color = "red";

 

! 선택해서 변수에 담아주고 써야한다. 

---

 2. class 선택자로 접근하는 getElementsByClassName()매서드

 

class 선택자는 웹 문서 안에서 여러 요소에서 사용할 수 있으므로 getElementsByClassName()매서드를 사용한다. 
해당 메서드를 사용하면 반환하는 요소가 2개 이상일 수 있다. 
그래서 이 매서드 이름에는 반환 요소가 여러 개라는 뜻해서 Element에 s가 붙는다. 
불러오는 클래스명에는 . 이 붙지 않으며, 문자열로 불러와야한다. 

[기본형]
document.getElementsByClassName('클래스명')

<h2 class="title1">제목2</h2>

    <h2 class="title1">제목2</h2>

    <h2 class="title1">제목2</h2>

 

  //h2태그들을 선택해서 title 변수에 할당 class가 여러 개기때문에 배열처럼 처리되서 인덱스[]를 써줘야한다. 모든 class    에 적용할려면 반복문을 써야한다.

      const title1 = document.getElementsByClassName("title1");

 

      title1[0].style.color = "blue";

      title1[1].style.color = "blue";

      title1[2].style.color = "blue";

 

      //태그가 잘 선택되었는지 콘솔창에서 확인

      console.log(title1);

 

   

getElementsByClassName()을 사용하면 클래스 이름이 같은 DOM 요소들이 HTMLCollaction안에 객체로 저장된다. 

HTMLCollaction객체는 배열과 비슷하지만 객체는 아니다. HTMLCollaction은 html 태그 요소들을 저장하는 공간. 

배열처럼 저장되기 때문에 하나하나 style을 적용할 땐 인덱스번호를 적어 불러와줘야한다. 

 title1[0].style.color = "blue";

만약 모든 class 에 적용할려면 반복문을 써야한다. 

 

---

 3. 태그 이름으로 접근하는 getElementsByTagName()매서드

 

class나 id를 지정하지 않은  DOM요소에 접근하려면 태그를 이용한다. 
getElementsByTagName()매서드를 사용하면 해당 태그명을 사용한 요소에 접근할 수 있다. 
getElementsByClassName()과 마찬가지로 HTMLCollaction안에 배열형태로 저장된다. 그래서 인덱스 번호로 불러와야한다. 

 [기본형]
document.getElementsByTagName('태그명')

<p>내용1</p>

<p>내용2</p>

<p>내용3</p>

  //p태그들을 선택해서 elementPtag 변수에 할당

      const elementPtag = document.getElementsByTagName("p");

      console.log(elementPtag);

      elementPtag[0].style.backgroundColor = "skyblue";

      elementPtag[1].style.backgroundColor = "skyblue";

      elementPtag[2].style.backgroundColor = "skyblue";

---

 4.  다양한 방법으로 접근하는 querySelector(), querySelectorAll()

 

1.  querySelector() - 반환값이 1개일때 / 속성에 접근할 때 사용

2.  querySelectorAll() - 반환값이 여러 개일때

 

위에 있는 getElement~매서드의 반환값은 HTMLCollaction에 저장된다. 
HTMLCollaction에는 요소만 저장된다. 즉, 'p'나 'a'같은 태그의 형태만 저장된다. 

DOM트리의 텍스트, 속성노드까지 자유롭게 제어하려면 querySelector()나 querySelectorAll()매서드를 사용해야한다. 

※ 마우스 행위로 이미지를 바꿀려할 땐(이미지 속성을 바꿀 땐) 이것을 써줘야한다. getEle...쓰면 불가능

 

만약 querySelector()로 class나 태그를 선택하면 여러 개의 요소 중 첫번째에 위치한 태그 요소 한 개만 선택해준다. 

id 선택자처럼 반환값이 1개라면  querySelector()를 사용하고, 
class선택자나 태그 선택자처럼 반환값이 여러 개라면 querySelectorAll()을 사용한다. 

또한 이름에 뭘 지정할지 안적혀 있기 때문에 매서드의 ()안에는 #,.과 같은 선택자 기호가 함께 들어가야한다.

(위의 애들과 달리 id인지 class인지 명시하지 않았으니깐.)

태그를 선택할 때는

document.querySelector("img");

처럼 ' '  안에 img 든 a든 써주면 된다. 

해당 메서드의 반환값은 노드이거나 노드리스트(node list)이다. 노드리스트에 저장된다. 
노드 리스트도 노드를 한꺼번에 여러 개 저장한 것으로 배열과 비슷하다. 

querySelector(), querySelectorAll()는  HTMLCollaction이 아닌 노드에 저장된다. 

[기본형]
document.querySelector('#아이디명')
document.querySelectorAll('.클래스명 또는 태그명')

 <h3 id="title2">제목3</h3>

    <h3 class="title3">제목3</h3>

    <h3 class="title3">제목3</h3>

    <h3 class="title3">제목3</h3>

 //h3태그 중 id 선택자인 요소를 선택해서 title2 변수에 할당

      const title2 = document.querySelector("#title2");

      title2.style.color = "steelblue";

      //h3태그 중 클래스 선택자인 요소들을 선택해서 title3에 할당

      const title3 = document.querySelectorAll(".title3");

      console.log(title3);

      title3[0].style.color = "tomato";

      title3[1].style.color = "green";

      title3[2].style.color = "#777";