Contents

1. BOM

BOM
: Browser Object Model
: 브라우저 객체 모델
: 웹 브라우저와 관련된 모든 객체들의 집합.

객체	설명
screen	모니터의 정보
navigator	현재 실행 중인 브라우저의 정보
location	URL의 정보
history	방문 기록에 대한 정보
document	문서에 대한 정보

2. DOM

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>
Code language: HTML, XML (xml)

(2023.03.18 추가)

가. 생성

let title = document.createElement("h2");
let msg = document.createTextNode("Hello World");
title.appendChild(msg);
document.body.appendChild(title);
Code language: JavaScript (javascript)

동적으로 <h2>Hello World</h2> 태그 생성

document.body.innerHTML += `<h2>Hello World</h2>`;
Code language: HTML, XML (xml)

보통은 innerHTML로 바로 집어넣는다.

나. 속성

let element = document.querySelector("#element");
element.width = 150;
element.setAttribute("custom-attribute", "set-my-attribute");
console.log(element.getAttribute("custom-attribute"));
Code language: JavaScript (javascript)

속성을 설정하는 방법.

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>
Code language: HTML, XML (xml)

innerHTML : 문자열을 HTML 태그로 삽입.
innerText : 문자열을 text node로 삽입. (ex. < → &lt로 이스케이프 한다.)

라. 조회

함수	설명
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");
Code language: JavaScript (javascript)

마. 삭제

let el = document.querySelector("#delete_target");
document.body.removeChild(el);
Code language: JavaScript (javascript)

parrentNode.removeChild(childnode); : 객체의 자식 노드 제거.

3. window

window
: 브라우저 안의 모든 요소들이 소속된 최상위 객체.
: 브라우저 창을 제어하는 다양한 메서드를 제공.
: 전역 객체

자주 사용되는 메서드를 추가해 나갈 예정.

[JavaScript] BOM, DOM

1. BOM

2. DOM

가. 생성

나. 속성

다. 삽입

라. 조회

마. 삭제

3. window

댓글 남기기 응답 취소