Document API

HTML의 문서에 특정 elment를 DOM API로 얻는법?

엘리먼트의 ID 속성을 기준으로 해당 엘리먼트에 해당하는 태그를 반환한다.
-document.getElementBy~ : 단일 엘리먼트를 선택하는 메소드
-document.getElementsBy~ : 다중 엘리먼트를 선택하는 메소드

document.getElementById 메소드

인자로 HTML element 태그의 id를 전달하면 해당 엘리먼트가 반환된다.

Element API

1>innerHTML 속성
-엘리먼트 안의 HTML코드를 얻거나 변경할 수 있다.
-태그 전체가 파싱된다.
2>innerText 속성
-엘리먼트 안의 텍스트를 얻거나 변경할 수 있다.
-콘텐츠가 모두 텍스트로 인식되어 반환된다.
3>style 속성
-css를 변경 할 수 있다.

Element API를 통해서 엘리먼트 속성의 값을 변경하거나 새로운 속성을 추가할 수도 있다.

그러나 몇몇 필수 속성은 object의 속성이 미리 정의가 되어있다.

ex>이미지 태그 src속성에 대해서는 API가 src속성을 동기화해주지만
src 속성이 정의되지 않는 태그에 있어서는 속성을 동기화되어 있지 않기 때문에 속성에 접근 할 수가 없다.

getAttribute 메소드 & setAttribute 메소드

getAttribute 메소드 & setAttribute를 활용하여
element의 속성의 값에 접근하여 값을 얻어올 수 있다.

1>getAttribute 메소드
-element의 속성의 값을 얻어온다.
-하나의 인자 : attribute 이름을 받는다.
-직접 객체에 동기화되지 않는 속성에 대해서도 접근이 가능하다.

<script>
변수.getAttribute("인자")
</script>

2>setAttribute 메소드
-element의 속성의 값을 설정함
-두개의 인자 : attribute 이름, 설정할 속성의 값을 받는다.
-직접 객체에 동기화되지 않는 속성에 대해서도 값 설정이 가능하다.

<script>
변수.setAttribute("인자1","인자2")
</script>