7-2 DOM 요소에 접근하기/웹 요소에서 가져와 수정하기/폼 요소에 접근하기

 1. getElementById() : Id 속성을 기반으로 DOM 요소에 접근하는 함수

document.getElementById("myId")

 

2. getElementsByClassName() : class 속성을 기반으로 DOM 요소를 찾아내는 함수

document.getElementsByClassName("myClass")

 

3. getElementsByTagName() : 태그 이름을 기반으로 DOM 요소들을 찾아내는 함수

document.getElementsByTagName("p")

 

4. querySelector(), querySelectorAll() : 다양한 방법을 DOM 요소를 찾아내는 함수

  id, class값을 사용해도 되고 태그 이름을 사용해도 된다. 두 함수는 접근하는 DOM 요소 개수에만 차이가 있고 사용방법은 같다.

 CSS 선택자를 사용한 방법과 똑같이 사용하면 된다.

 class 값 앞에는 마침표(.) id값 앞에는 샵(#)을 붙인다.

document.getElementById("myId")

document.querySelector("#myId")

 

 

• 웹 요소의 태그 속성 가져와 수정하기

1.  getAttribute() : 이 매서드는 특정 요소의 속성 값을 가져온다.

let element = document.getElementById('myId');
let attrValue = element.getAttribute('attrName');  // 'attrName'이라는 속성의 값을 가져옴

 

2. setttribute() : 이 메서드를 사용하여 특정 요소의 속성 값을 설정한다.

let element = document.getElementById('myId');
element.setAttribute('attrName', 'newValue');  // 'attrName'이라는 속성에 'newValue'를 설정함

 

 

• 폼 요소에 접근하기

1. id, class 값을 사용해 폼 요소 접근하기 :  querySelector() 및 querySelectorAll() 를 사용한다. DOM의 다른 요소에 접근하는 것과 같다.

 

2, name 값을 사용해 폼 요소 접근하기 : 이 방법을 사용하려면 form 태그에 name 속성이 지정되어 있어야한다. 또한 fome 태그 안에 포함된 폼 요소에도 name 속성이 있어야한다.

 

3. 폼 배열을 사용해 폼 요소 접근하기 : 폼 요소에 id나 class나 name 속성 모두 없을 때 사용한다. document의 속성 중 forms 속성은 문서 안에 있는 form 태그를 모두 가져와 배열 형태로 반환한다.