[JavaScript] HTML 태그 불러오는 방법

자바스크립트에서
 태그를 불러오는 방법 

자바스크립트를 사용하는 이유는 특정 조건이 충족될 때 웹 문서 전체 또는 일부분을 제어하기 위해서이다.
동적으로 반응하게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있어야한다.
이러한 경우 문서객체모델(DOM)을 사용하면 요소를 제어할 수있다.

CSS 에서 class, id, 태그 등의 '선택자(selector)'로 스타일을 구별해서 정의했던 것처럼 자바스크립트에서도 HTML태그를 불러올 때 '선택자(selector)'로 구분하여 불러온다.

---

 getElementBy 

getElementBy는 요소를 불러오는 메서드이다.
각각 Id와 Name, TagName, Class 종류에 따라 이름이 달라지며, 소괄호 안에 선택자명을 입력하여 불러올 수 있다.
메서드명에서 각각의 선택자를 구별하고 있기 때문에 선택자를 불러올 때 따로 기호를 붙이지 않는다는 특징이 있다.

---

1. getElementById()

getElementById 는 html의 태그 중 id가 있는 태그를 선택하고 싶을 때 사용하는 메서드이다.
해당 메서드를 사용할 때 아이디명은 앞에 #을 붙이지 않고 이름만 문자열로 작성한다.    

 // 기본형
 document.getElementById("id명")

---

2. getElementsByName()

getElementByName 메서드는 네임 선택자를 불러오는 메서드이다. 
html의 태그 중 name이 있는 태그를 선택할 때 사용한다.

 // 기본형
 document.getElementByName("name명")

---

3. getElementsByTagName()

getElementByName 메서드는 html 문서의 네임태그 중 일치하는 객체를 선택할 때 사용한다. 
이곳에서 태그네임은 h1, h2, div 등과 같은 태그들을 말한다.
class나 id를 지정하지 않은 DOM요소에 접근하고자 할 때 이 태그를 이용한다.

태그네임은 요소가 2개 이상일 수 있으며, 이러할 경우 HTMLCollaction안에 배열 형태로 저장된다. 

 // 기본형
 document.getElementById("nameTag 명")

---

4. getElementsByClassName()

getElementByClassName 메서드는 클래스 선택자를 불러오는 메서드이다. 
불러오는 클래스 명에는 온점(.)이 붙지 않으며 이름만 문자열로 작성한다.   
 
class 선택자는 웹 문서 안에서 여러 요소에서 사용할 수 있으므로 getElementsByClassName()메서드를 사용한다.        해당 메서드를 사용하면 반환하는 요소가 2개 이상일 수 있다.
그래서 이 메서드 이름에는 반환 요소가 여러개라는 뜻에서 Element에 s가 붙는다.
getElementsByClassName()를 사용하면 클래스 이름이 같은 DOM 요소들이 HTMLCollaction안에 객체로 저장된다.
HTMLCollaction객체는 배열과 비슷하지만 객체는 아니다.
HTMLCollaction은 html 태그 요소들을 저장하는 공간이다. 

 // 기본형
document.getElementsByClassName("class명")

---

 querySelector() 
 querySelectorAll() 

getElementBy를 사용한 메서드에서 여러개의 선택자를 선택할 경우 반환 값이 HTMLCollaction에 저장된다.
또한 HTMLCollaction에는 p태그나 a태그의와 같은 요소만 저장된다.
DOM트리의 텍스트, 속성노드까지 자유롭게 제어하려면 querySelector()나 querySelectorAll()메서드를 사용해야한다.

id 선택자처럼 반환값이 1개라면 querySelector()를 사용하고,
class 선택자나 태그 선택자처럼 반환값이 여러개라면 querySelectorAll()를 사용한다.
또한 메서드의 ()안에는 샵(#)이나 온점(.)과 같은 선택자 기호가 함께 들어가야한다

해당 메서드들의 반환값은 노드이거나 노드리스트(node list)이다.
노드 리스트도 노드를 한꺼번에 여러개 저장한 것으로 배열과 비슷하다.
만약 querySelector()로 class나 태그를 선택하면 여러개의 요소 중 첫번째에 위치한 태그요소 한개만 선택된다.

---

1. querySelector("선택자기호+선택자")

선택자로 가장 처음 선택되는 선택자를 가져온다.

// 기본형
document.querySelector("#아이디명")       
document.querySelector(".클래스명")       
document.querySelector("태그명")

---

2. querySelectorAll("선택자기호+선택자") 

선택자로 선택되는 모든 선택자를 배열로 가져온다.

// 기본형
document.querySelectorAll(".클래스명")       
document.querySelectorAll("태그명")

 

---

jQuery 각 태그별 값 불러오기

https://seokbong.tistory.com/77

jQuery 각 태그별 값 불러오기

---