2024. 1. 14. 02:06ㆍFE/JavaScript
1. BOM
JavaScript Window
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
- BOM
: Browser Object Model
: 브라우저 객체 모델
: 웹 브라우저와 관련된 모든 객체들의 집합.
| 객체 | 설명 |
|---|---|
| screen | 모니터의 정보 |
| navigator | 현재 실행 중인 브라우저의 정보 |
| location | URL의 정보 |
| history | 방문 기록에 대한 정보 |
| document | 문서에 대한 정보 |
2. DOM
JavaScript HTML DOM
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
- DOM
: Document Object Model
: 문서 객체 모델
: XML, HTML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스이다.
: 문서 요소 집합을 트리 형태의 계층 구조로 표현
: root element는 document다.
자주 사용되는 메서드를 추가해 나갈 예정.
| 메서드 | 설명 |
|---|---|
| createElement(tagName) | 요소 노드를 생성한다. |
| createTextNode(text) | 텍스트 노드를 생성한다. |
| removeChild(child) | 자식 노드를 삭제한다. |
| appendChild(node) | 자식 노드를 추가한다. |
| setAttribute(name, value) | 객체의 속성을 설정한다. |
| getAttribute(name) | 객체의 속성을 가져온다. |
<script>
function appendNode(){
var target=document.getElementById("target");
var li=document.createElement("li");
var text=document.createTextNode("JavaScript");
li.appendChild(text);
target.appendChild(li);
}
function insertNode(){
var target=document.getElementById("target");
var li=document.createElement("li");
var text=document.createTextNode("jQuery");
li.appendChild(text);
target.insertBefore(li, target.firstChild);
}
function removeNode(){
var target=document.getElementById("target");
target.parentNode.removeChild(target);
}
</script>
<body>
<ul id="target">
<li>HTML</li>
<li>CSS</li>
</ul>
<input type="button" onclick="appendNode()" value="노드추가">
<input type="button" onclick="insertNode()" value="노드삽입">
<input type="button" onclick="removeNode()" value="노드삭제">
</body>
(2023.03.18 추가)
가. 생성
let title = document.createElement("h2");
let msg = document.createTextNode("Hello World");
title.appendChild(msg);
document.body.appendChild(title);동적으로 <h2>Hello World</h2> 태그 생성
document.body.innerHTML += `<h2>Hello World</h2>`;보통은 innerHTML로 바로 집어넣는다.
나. 속성
let element = document.querySelector("#element");
element.width = 150;
element.setAttribute("custom-attribute", "set-my-attribute");
console.log(element.getAttribute("custom-attribute"));속성을 설정하는 방법.
element.width = 150;: 간단하지만 웹 브라우저가 공식적으로 지원하는 태그의 속성만 가능.element.setAttribute(”custom-attribute”, “set-my-attribute”);: 사용자가 설정한 태그의 속성도 가능함.element.getAttribute(”custom-attribute”);: 객체의 속성값을 가져옴.
다. 삽입
document.body.innerHTML += `<h2>Hello World</h2>`; // Hello Word
document.body.innerText += `<h2>Hello World</h2>`; // <h2>Hello World</h2>innerHTML: 문자열을 HTML 태그로 삽입.innerText: 문자열을 text node로 삽입. (ex.<→<로 이스케이프 한다.)
라. 조회
| 함수 | 설명 |
| document.getElementById(id) | id 속성이 주어진 문자열과 일치하는 태그를 객체로 반환 |
| document.getElementsByClassName(class) | class 속성이 주어진 문자열과 일치하는 모든 태그를 객체 배열로 반환 |
| document.getElementsByTagName(tag) | 태그가 주어진 문자열과 일치하는 모든 태그를 객체 배열로 반환 |
| document.getElementsByName(name) | name 속성이 주어진 문자열과 일치하는 모든 태그를 객체 배열로 반환 |
| document.querySelector(selector) | 주어진 선택자와 일치하는 첫 번째 요소를 반환 |
| document.querySelectorAll(selector) | 주어진 선택자와 일치하는 모든 요소를 반환 |
let elementById = document.getElementById("myId");
let elementsByClass = document.getElementsByClassName("myClass");
let elementsByTag = document.getElementsByTagName("div");
let elementsByName = document.getElementsByName("myName");
let elementByQuery = document.querySelector("#myId");
let elementsByQueryAll = document.querySelectorAll(".myClass");
마. 삭제
let el = document.querySelector("#delete_target");
document.body.removeChild(el);parrentNode.removeChild(childnode);: 객체의 자식 노드 제거.
3. window
JavaScript Window
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
- window
: 브라우저 안의 모든 요소들이 소속된 최상위 객체.
: 브라우저 창을 제어하는 다양한 메서드를 제공.
: 전역 객체
자주 사용되는 메서드를 추가해 나갈 예정.
'FE > JavaScript' 카테고리의 다른 글
| [JavaScript] FOR문 (0) | 2024.03.18 |
|---|---|
| [JavaScript] 자료형, 함수 (0) | 2024.03.18 |
| [JavaScript] destructuring operator (0) | 2023.03.27 |
| [Javascript] async & await (0) | 2023.03.01 |
| [JavaScript] var과 let (0) | 2023.02.10 |