
[Javascript] 8장. 웹 문서를 다루는 방법, 문서 객체 모델 (DOM) (3)
2022. 11. 30. 18:38
스스로 공부하기/Javascript
08-3. 웹 요소의 태그 속성 가져와서 수정하기 지금부터는 접근한 웹 요소의 속성 노드에 접근하는 법을 알아볼 것이다. 선택한 상품의 이미지를 특정 위치에 표시하는 법을 실습하며 진행한다. getAttribute(), setAttribute() 이 두 함수는 HTML 태그의 속성을 가져오거나 수정하는 함수이다. 위에서 말한 기능을 구현하기 위해서는 - 1) 작은 이미지의 src 속성에 접근해 그 값 알아내기 (querySelector, getAttribute) 2) 큰 이미지의 src 속성을 알아낸 값으로 변경하기 (getAttribute, setAttribute) 두 가지를 수행하면 된다. 우선 이미지의 HTML 코드를 살펴보자. 여기에는 id값이나 class가 없기 때문에, img 태그를 이용해 접..

[Javascript] 8장. 웹 문서를 다루는 방법, 문서 객체 모델 (DOM) (1, 2)
2022. 11. 30. 17:25
스스로 공부하기/Javascript
08-1. 문서 객체 모델이란? DOM은 앞서 6장에서 객체를 다루며 설명한 적이 있다. (6장 링크) DOM (문서 객체 모델, Document Object Model) 은 자바스크립트를 이용해 웹 문서를 제어하기 위해 사용되는 내장 객체를 말한다. 문서 객체 모델의 정의 DOM은 Document Object Mode의 준말로 돔이라고 읽는다. 문서 객체 모델을 DOM이라고 표기한다. DOM이란? 웹 문서의 모든 요소를 자바스크립트를 이용해 제어할 수 있도록 객체를 사용해 문서를 해석하는 방법 EX) 웹 문서의 텍스트, 이미지, 표 등은 모두 문서 객체 모델에 해당한다. 이게 무슨 말일까? DOM을 이용하지 않고 상세 설명 가리기 상품 정보 원산지 : 에디오피아 지 역 : 이르가체프 코체레 농 장 : ..