DOM 이란?
Document Object Model
: Dom allows javascript to access html elements and styles to maniputate them.
The Dom represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree. with them, you can change the document's structure, style, or content. - from MDN
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
Document Object Model (DOM) - Web APIs | MDN
The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory. Usually it refers to JavaScript, even though modeling HTML, SVG, or X
developer.mozilla.org
https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%EA%B0%9D%EC%B2%B4_%EB%AA%A8%EB%8D%B8
문서 객체 모델 - 위키백과, 우리 모두의 백과사전
문서 객체 모델(DOM; Document Object Model)은 XML, HTML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스이다. W3C의 표준이다. W3C의 표준화한 API들의 기반이 된다. DOM
ko.wikipedia.org
DOM tree structure
* DOM methods and properties are not part of javascript, they are part of Wev APIs (Application Programming Interface). APIs are like libraries we can access with javascript.
html이나 css에서 특정 class나 id에 접근해서 변경할 수 있음.
document.querySelector('')
document.querySelector('.valuesClassName').value = '123';
document.querySelectorAll('') // 여러개의 elements를 한꺼번에 선택하고 싶을 때
Event listener
.addEventListener()
// 버튼을 클릭하면 value가 나타나게 할 때
document.querySelector('.btn').addEventListener('click', function(){
documemt.querySelector('.btn').value
}
// 버튼을 클릭하면 message의 텍스트가 'Correct!'로 바뀌게 만들 때
document.querySelector('.message').textContent = 'Correct!';
// <body>의 배경색을 바꿀 때
document.querySelector('body').style.backgroundColor = "yellow";
'웹개발 > 혼자하는 개발 공부' 카테고리의 다른 글
| [자바스크립트] Scope chain & hoisting (0) | 2021.09.03 |
|---|---|
| [리액트] Functional vs Class Components (0) | 2021.09.02 |
| [자바스크립트] for loop과 while loop의 차이점 (0) | 2021.09.01 |
| [자바스크립트] Arrays / 배열이란? ( + Object ) (0) | 2021.08.31 |
| [자바스크립트] function / 함수란? (0) | 2021.08.31 |