DOM(Document Object Model) : 웹페이지를 구성하는 다양한 요소(html 태그, div, body 등)를 하나의 객체로 만들어 제어할 수 있도록 하는 프로그래밍 인터페이스
브라우저에 내장되어있는 API(application programming interface :
인터페이스 : 서로 다른 두개가 소통이 안 될때 커뮤니케이션을 할 수 있도록 도와줌)
→ dom이 브라우저에 있기 때문에... css, javascript에서 브라우저가 대동단결 가능!!!!
→ 문서가 하나의 구조화된 형식으로 표현되기 때문에 구조를 통해 원하는 동작을 할 수 있다.
document.querySelectorAll('p') # p 태그를 사용하는 요소들을 배열로 받게 됨
getElementsbyTagName: 태그 이름으로 문서의 요소들을 리턴합니다.
getElementById: 'id' 가 일치하는 요소들을 리턴합니다.
getElementsByClassName: '클래스' 가 일치하는 요소들을 리턴합니다.
# selector 사용 -> CSS 참고
querySelector: 셀렉터(들)과 일치하는 요소를 리턴합니다.
querySelectorAll: 셀렉터(들)과 일치하는 모든 요소들을 리턴합니다.class나 id로 명시하는 것 외에도, 객체화 하여 딕셔너리처럼 유연하게 함수, 기능에 따라 동적으로 웹페이지를 제어할 수 있다.
<body onload="window.alert('welcome to my home page!');">html>
<head>
<script>
// run this function when the document is loaded
window.onload = function() {
// create a couple of elements in an otherwise empty HTML page
var heading = document.createElement("h1");
var heading_text = document.createTextNode("Big Head!");
heading.appendChild(heading_text);
document.body.appendChild(heading);
}
</script>
</head>
<body>
</body>
</html>활용예시.
'개발 > Flask, Fastapi' 카테고리의 다른 글
| Flask 로 MongoDB Atlas 데이터베이스와 연동하기 (0) | 2021.03.26 |
|---|---|
| mongodump 없이 Mongocb Collection 백업하고 복사하기 (0) | 2021.03.26 |
| flask-mongoalchemy vs mongoengine (0) | 2021.03.25 |
| flask에서 request.args.get()의 의미 (0) | 2021.03.23 |
| Flask-sqlalchemy "One or more mappers failed to initialize" 오류 (0) | 2021.03.23 |
