js 가 html 에 접근하기 위한 수단 dom
html 을 객체로 갖고 있는 모델
트리 구조로 된 객체 모델
<script>
var ul = document.getElementsByTagName('ul')[0];
var lis = ul.getElementsByTagName('li');
for(var i=0; lis.length; i++){
lis[i].style.color='red';
}
</script>
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="active">JavaScript</li>
</ul>
<script>
var li = document.getElementById('active');
console.log(li.constructor.name); // HTMLLIElement
var lis = document.getElementsByTagName('li');
console.log(lis.constructor.name); // HTMLCollection
</script>
<a id="anchor" href="http://opentutorials.org">opentutorials</a>
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="list">JavaScript</li>
</ul>
<input type="button" id="button" value="button" />
<script>
var target = document.getElementById('list');
console.log(target.constructor.name); // HTMLLIElement
var target = document.getElementById('anchor');
console.log(target.constructor.name); // HTMLAnchorElement
var target = document.getElementById('button');
console.log(target.constructor.name); // HTMLInputElement
</script>
// HTMLLIElement
interface HTMLLIElement : HTMLElement {
attribute DOMString type;
attribute long value;
};
// HTMLAnchorElement
interface HTMLAnchorElement : HTMLElement {
attribute DOMString accessKey;
attribute DOMString charset;
attribute DOMString coords;
attribute DOMString href;
attribute DOMString hreflang;
attribute DOMString name;
attribute DOMString rel;
attribute DOMString rev;
attribute DOMString shape;
attribute long tabIndex;
attribute DOMString target;
attribute DOMString type;
void blur();
void focus();
};
<!DOCTYPE html>
<html>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="active">JavaScript</li>
</ul>
<script>
console.group('before');
var lis = document.getElementsByTagName('li');
for(var i = 0; i < lis.length; i++){
console.log(lis[i]);
}
console.groupEnd();
console.group('after');
lis[1].parentNode.removeChild(lis[1]);
for(var i = 0; i < lis.length; i++){
console.log(lis[i]);
}
console.groupEnd();
</script>
</body>
</html>
document 객체는 dom 의 시작점이고 문서 전체를 의미하는 node 이기도 하다.
document 는 dom 에서 정의되어 있는 규격 또는 인터페이스
html 문서에서 document 가 실제 사용되는 것은 아니고 HTMLDocument 라고 하는 구체적인 객체가 정의되어서 HTMLDocument 라는 객체를 사용하는 것
HTMLDocument 객체는 html 전체를 대표하는 객체이면서 전체를 대표하는 node 라고 할 수 있다.
document 객체가 주로 하는 것은 새로운 노드를 생성하는 것이다.
: createElement()
: createTextNode()
문서 정보 api 를 불러온다.
: title
: URL
: referrer
: lastModified
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 id="h1-title">
안녕하세요
</h1>
<script>
let pTag = document.createElement('p'); // p 태그 생성
pTag.className = 'dom'; // p 태그의 클래스 네임을 'dom' 으로 추가
pTag.innerHTML = "DOM"; // p 태그 내에 "DOM" 텍스트 생성
document.getElementById('h1-title').appendChild(pTag); // h1 태그 내에 p 태그 삽입
// p 태그 삽입할 때 h1 태그가 아닌 h1 태그에 붙여진 id 값을 찾아서 삽입해줘야 한다
</script>
</body>
</html>