DoM4 [자바스크립트] DOM 요소에 접근하기 (DOM이란? DOM API 정리) 문서객체모델(DOM) DOM(Document Object Model) Document Object Model의 줄임말로 일반적으로 DOM이라고 부른다 DOM이란 HTML 문서(document)를 객체 기반 모델로 표현한것을 말한다 HTML 문서의 모든 요소를 자바스크립트로 조작하기 위해 객체로 해석한다 DOM을 사용하면 웹 문서의 모든 요소를 객체로 해석이 가능해 웹 문서의 텍스트, 이미지, 표 등 모든 요소를 객체로 생성, 접근, 수정, 삭제가 가능하다 Document HTML 문서가 웹 브라우저에 로드되면 document 오브젝트가 된다 document 오브젝트는 HTML 문서의 최상단 노드다 document 오브젝트는 window 오브젝트의 프로퍼티다 즉 window.document로 접근할 수 있.. 2022. 5. 26. [자바스크립트] document.createElement로 DOM 요소 추가하기 DOM 요소를 추가하는 document의 메소드 document.createElement(태그이름) DOM 요소를 만들어주는 함수 createElement 함수로 DOM 요소를 만든 후 반드시 DOM에 붙여주는 작업을 해야한다 // 새 요소 만들기 const newDiv = document.createElement("div"); // 스타일 추가 newDiv.style.backgroundColor = "blue"; newDiv.style.width = "50px"; newDiv.style.height = "50px"; // 요소를 body에 추가 document.body.appendChild(newDiv); 2022. 3. 25. [자바스크립트] document의 메소드로 DOM 요소에 접근하기 DOM 요소에 접근하는 5가지 document의 메소드 1. document.getElementsByTagName(태그이름) DOM 요소를 태그 이름으로 접근하는 함수 id나 class 선택자가 없는 DOM 요소에 접근하는 함수 getElementsByTagName() 함수는 2개 이상의 웹 요소에 접근하기 때문에 s가 붙는다 this is paragaph this is paragaph this is paragaph 2. document.getElementsByName(name속성값) DOM 요소를 요소의 name 속성값으로 접근하는 함수 getElementsByName() 함수는 2개 이상의 웹 요소에 접근하기 때문에 s가 붙는다 3. document.getElementById(아이디) DOM 요소를 .. 2022. 3. 25. [자바스크립트/한줄정리] 문서 객체 모델(DOM)이란? HTML 요소 하나하나를 객체로 생각하는 모델 모든 요소를 자바스크립트로 조작하기 위해 HTML 문서를 객체로 해석하는 방법 웹 문서의 텍스트, 이미지, 표 등 모든 요소를 모두 객체로 접근하고 조정하는 것 2022. 3. 22. 이전 1 다음
