2. DOM 선택자

💖 DOM을 통한 HTML 문서 접근    🌠 자바스크립트 입장에서는 웹 브라우저 환경과 HTML 문서를 모두 객체로 바라보고 처리    🌠 DOM 접근 방법    🌠 document 객체의 요소를 추출하는선택자         1. 원거리 선택자            - getElementById("id명")            - getElementsByClassName ("class명")           - getElementsByName ("name명")            - getElementsByTagName ("태그명")         2. 근거리 선택자            - ownerDocument           - parentNode            - childNodes            - children            - firstChild           - lastChild            - previousSibling            - nextSibling         3. DOM 선택자            - createElement(tagName)            - createTextNode(text)            - appendChild(text)            - setAttribute(name, value)            - getAttribute(name)           - removeChild(text)

 

💖 DOM을 통한 HTML 문서 접근

---

🌠 자바스크립트 입장에서는 웹 브라우저 환경과 HTML 문서를 모두 객체로 바라보고 처리

⦁ 일반 프로그래밍에서 처럼 객체에 접근해서 값을 읽어내거나, 저장하고 수정하는 작업을 수행함으로써 웹 브라우저나 HTML 문서에 대한 처리를 수행

 

🌠 DOM 접근 방법

1. document의 forms 속성을 이용해서 접근하는 방법

2. 요소 이름을 이용해 접근하는 방법

3. document 객체가 제공하는 getElementById() 등의 메소드를 이용해서 접근하는 방법

   ▶ 가장 사용이 쉽고 많이 사용되고 방법인 getElementById() 메소드 방법을 중심으로 설명

 

 

🌠 document 객체의 요소를 추출하는 선택자

• HTML내에서 작성된 스타일(css)은 어떠한 동작을 취했을 때 지정한 요소에 스타일을 적용시킬 수 없다.
• 동작의 스타일은 자바스크립트에서 적용
  HTML내 작성된 스타일 : 정적 / 자바스크립트내 작성된 스타일 : 동적

 

1.  원거리 선택자 : 먼거리에 있는 요소를 선택해 옴

메서드	설 명
getElementById("id명")	태그의 id명이 일치하는 문서 객체를 가져오는 선택자
getElementsByClassName("class명")	태그의 class명이 일치하는 문서 객체를 가 져오는 선택자
getElementsByName("name명")	태그의 name이 일치하는 문서 객체를 가져오는 선택자
getElementsByTagName("태그명")	태그의 태그(tag)명이 일치하는 문서 객체를 가져오는 선택자

속성	설 명
innerText	요소의 내용을 Text로 설정하거나 반환한다
innerHTML	요소의 내용을 HTML로 설정하거나 반환한다

 

2. 근거리 선택자 : 선택한요소를 기준으로 가까운 거리에 있는 요소를 선택함

속성	설 명
ownerDocument	최상위 노드를 선택한다
parentNode	선택요소의 부모노드를 선택한다
childNodes	선택요소의 모든 자식노드(배열로 저장)를 선택한다
children	선택요소의 자식노드(배열로 저장)를 선택한다
firstChild	선택요소의 첫번째 자식 노드만 선택한다
lastChild	선택요소의 마지막 자식 노드만 선택한다
previousSibling	선택요소의 이전에 오는 형제 노드를 선택한다
nextSibling	선택요소의 다음에 오는 형제 노드를 선택한다

3.  DOM 선택자

메서드	설 명
createElement(tagName)	요소 노드를 생성한다
createTextNode(text)	텍스트 노드를 생성한다
appendChild(text)	자식 노드를 추가한다
setAttribute(name, value)	객체의 속성을 설정한다
getAttribute(name)	객체의 속성을 반환한다
removeChild(text)	자식 노드를 삭제한다