JS_DOM

 

DOM : Document Object Model

→ 문서html 를 → 객체로 → 모델링

 

Web의 구성

서로 다른 언어가 소통할 수 있도록 쪼개서 ‘객체화’ 시켜주는 것!

HTML 요소지만 JavaScript를 이용할 수 있도록 해준다.

→ 이걸 가능하게 해주는 게 DOM!

 

HTML 문서 읽는 순서

document → 모든 HTML 문서의 대모같은 존재

 

HTMLElement 

HTMLElement : 모든 종류의 HTML 요소를 나타내는 인터페이스.
- getElement 메소드를 통해서 원하는 객체를 조회, 조회된 객체들을 대상으로 구체적인 작업처리

 

getElementById()

getElementById() : 접근하고자 하는 HTML태그의 id값을 이용해 HTMLElement객체 조회
-> 접근하고자 하는 요소의 'id' 입력

 

객체반환

getElementbyId(id)	특정 아이디를 가진 요소 조회	HTMLElement 객체 반환
getElementbyName(name)	Name속성을 가진 요소 조회	HTMLCollection 객체 반환
getElementbyTagName(tagname)	태그 이름을 기준으로 요소 조회
getElementbyClassName(class)	특정 클래스를 가진 요소 조회

 

— 문서를 모두 포함하고 있는 최상위 객체 : document

내가 만약 JS에서 HTML 문서를 손대려면 무조건!

document를 DOM Document Object Model 문서를 객체로 모델링

-- 문서를 모두 포함하고 있는 최상위 객체 : document

내가 JS 에서 HTML 문서를 손대려면 무조건! document를 거쳐야한다

 

Q. 내가 만약 HTML 문서에 있는 요소를 가져오고 싶다면?

• document.getElementByID

Q. 내가 가져온 요소의 글자만?

• .innerText

Q. HTML 요소까지 같이 ?

• .innerHTML

Q. input태그의 값을 ?

• .value

Q. 그 요소의 속성 값 가져오기

Case1) getAttribute('속성이름')

Case2) .속성이름

Q. 그 요소의 속성 값을 수정하기

Case1) setAttribute('속성이름','바꿀값'})

Case2) .속성이름 = '바꿀 값'