Dom 진입

수민·2022년 8월 27일

개발 프론트

프론트엔드

목록 보기

7/48

우선 DOM 단어의 뜻을 알아 보겠습니다.

>DOM은 document object model의 약자이며, 한글로는 "문서 객체 모델"이라고 부릅니다.
DOM은 객체 지향 모델로써 구조화된 문서를 표현하는 방식입니다.

Document Object Model , 이하 DOM.

innerText 속성을 변경

element.innerText;

이 속성은 element 안의 text 값들만을 가져옵니다.

element.innerHTML;

innerText와는 달리 innerHTML은 element 안의 HTML이나 XML을 가져옵니다.
출처: https://hianna.tistory.com/480 [어제 오늘 내일:티스토리]

**
HTML, CSS가 사용자에게 직접적으로 보이는 것이라면 DOM은 기계나 소프트웨어가 웹 사이트의 구조를 어떻게 이해하는지에 대한 표준이라고 할 수 있습니다. 기계를 위한 표준을 여기서 이야기하는 이유는 자바스크립트 역시 DOM을 통하여 HTML과 CSS로 구성된 웹의 구조에 접근하고 컨트롤할 수 있기 때문입니다.

웹 브라우저 역시 HTML로부터 DOM을 구성하고 분석하여 화면에 표시합니다. 자바스크립트 같은 프로그래밍 언어가 DOM구조에 접근할 수 있는 방법을 제공하여 문서구조, 스타일, 내용 등을 변경할 수 있게 합니다.**

DOM 은 노드(Node)들이 트리 형태로 구조화 된 데이터 표현입니다.

노드는 DOM 트리를 구성하는 최소한의 단위이며, 기본 요소입니다.

HTML 페이지를 DOM 으로 표현할 때는 HTML 태그 말고도 다른 여러가지 타입의 노드들이 생성됩니다.

노드는 여러가지 타입으로 종류가 구분되어 있어 각각의 용도에 맞게 타입이 지정됩니다.

DOM 은 HTML 과 XML 을 위한 데이터 구조 표현이기 때문에 XML 전용인 노드 타입 또한 여러가지가 있습니다.

노드 타입별 HTML 용도는 다음과 같습니다.

프로퍼티(Property)와 어트리뷰트(Attribute) 속성의 이해

프로퍼티((Property)와 어트리뷰트(Attribute)는 한글로 모두 속성이지만, 그 적용 대상은 다릅니다.

DOM의 속성은 프로퍼티(Property)입니다.

HTML 태그의 속성은 어트리뷰트(Attribute)입니다.

****웹브라우저가 HTML 페이지를 읽어 DOM을 생성할 때, HTML 태그의 속성(어트리뷰트)(들)을 읽어 파싱(Parsing)을 합니다.

속성이 HTML 표준 속성이면 DOM에도 동일한 속성(프로퍼티)이 만들어집니다.

표준 속성인 경우, HTML 어트리뷰트와 DOM 프로퍼티는 속성 값 또한 공유합니다.

HTML 태그의 속성이 표준 속성이 아닌 경우, DOM 프로퍼티는 생성되지 않습니다.

이 경우 HTML 태그의 비표준 속성은 사용자 커스텀 속성(어트리뷰트)이 됩니다.

반대의 경우, 자바스크립트로 DOM 노드에 사용자 정의 속성이나 메서드를 추가할 수 있습니다.

DOM에 추가한 커스텀 속성(프로퍼티)은 DOM에서만 접근 가능한 속성이 되며, HTML 속성(어트리뷰트)은 생성되지 않습니다.

생성된 DOM 속성은 DOM 노드 객체의 속성이 되며, 객체의 속성 접근 방식으로 접근이 가능합니다.****

img.setAttribute("alt","chicken"); <<

alt속성에 chicken로 변경

getAttribute() - 어트리뷰트 값을 가져온다.
hasAttribute() - 어트리뷰트 값을 가지고 있는지 검사한다.
setAttribute() - 어트리뷰트에 값을 대입한다.
removeAttribute() - 어트리뷰트를 제거한다.
className - 클래스값을 가져오거나 변경한다.
id - 아이디값을 가져오거나 변경한다.

이미지속성 변경!