DOM(Document Object Model) 요약

Function

Access with ID

document.getElementById(elementID)
Return Value: An Element object

Access with Tag Name

document.getElementsByTagName(tagname)
Return Value: An HTMLCollection object

Access with Class Name

document.getElementsByClassName(classname)
document.getElementsByClassName(classname)[0] // case of node select
Return Value: An HTMLCollection object

Select First Node with CSS Technique

document.querySelector(CSS selectors)
Return Value: A Node object

Select All Node with CSS Technique

document.querySelectorAll(CSS selectors)
Return Value: A NodeList object

Create Element

document.createElement(elementName)
Return Value: An Element Object

Access Parent Node

node.parentNode
Return Value: A Node object

Access Parent HTML Node

node.parentElement
Return Value: An Element object

Access Child Node

element.childNodes
Return Value: A NodeList object

Access Child HTML Node

element.children
Return Value: A live HTMLCollection object

Access First Child Node

node.firstChild
Return Value: A Node object

Access First Child HTML Node

node.firstElementChild
Return Value: A Node object

Access Last Child Node

node.lastChild
Return Value: A Node object

Access Last Child HTML Node

node.lastElementChild
Return Value: A Node object

Access Previous Node

node.previousSibling
Return Value: A Node object

Access Previous HTML Node

node.previousElementSibling
Return Value: A Node object

Access Next Node

node.nextSibling
Return Value: A Node object

Access Next HTML Node

node.nextElementSibling
Return Value: A Node object

Insert Node of First Child

node.insertBefore(newnode, existingnode)
Return Value: A Node object

Append Child Node

node.appendChid(node) // 당연하게도 마지막에 붙음.
Return Value: A Node object

Cloning Child Node

node.cloneNode(deep) // if "deep" factor is true, clone Attribute & Child Node, if false(default), not clone Child Node.
Return Value: A Node object

Remove Child Node

node.removeChild(node)
Return Value: A Node object

Tag Name of Element

element.tagName
Return Value: A String(Upper case)

Id of Element

element.id
Return Value: A String

Class Name of Element

element.className
Return Value: A String

Get Attribute (노드의 속성 일기)

element.getAttribute(attributename)
Return Value: A String

Set Attribute (노드의 속성 변경)

element.setAttribute(attributename, attributevalue)
Return Value: No return value

Remove Attribute (노드의 속성 삭제)

element.removeAttribute(attributename)
Return Value: No return value

Check Attribute (노드에 속성이 있는지 점검)

element.hasAttribute(attributename)
Return Value: A Boolean

Check Child Node (하위 노드가 있는 점검)

node.hasChildNode()
Return Value: A Boolean

Return className to DOMTokenList

element.classList
Return Value: A DOMTokenList

Add Classes in Element

element.classList.add(class1, class2, ...)
Return Value: No return value

Remove Classes in Element

element.classList.remove(class1, class2, ...)
Return Value: No return value

Check Node Class

element.classList.contains(class)
Return Value: A Boolean

Node Class Add/Remove Toggle

element.classList.toggle(class, true(false)) // 2nd인자 입력시 클래스 유무관계 없이 작동
Return Value: A Boolean

Event Processing

Inline Approach

// 초창기 인터넷 넷스케이프 당시부터 사용하던 이벤트 방식
// 하지만 HTML 최적화를 목적으로 HTML문서를 오로지 document를 표시해주는 역할을 담당하게 하기 위해서는 이벤트 핸들러를 연결하는 것이 좋은 방법임.

// *.html
<div class="container">
	<button id="call" onclick="writeTxt()">event call</button>
	<textarea id="demo" class="note"></textarea>
</div>
// *.js
function writeTxt() {
	let area = document.querySelector(".note");
	// area.textContent = "Hello JavaScript!!";
	// area.innerText = "Hello JavaScript!!";
	area.innerHTML = "Hello JavaScript!!";
}

Attribute Approach

// MVC HTML 패턴에 맞게 함수를 콜백 함수 형태(Listener, 리스너)로 만듬. 잘 사용 않함.
// 콜백 함수는 대입 형식의 함수이며, 이 타입의 이벤트를 지양하는 이유는 id, class 가 다 읽혀진 후, 싫행해야 하므로 결국 html 파일 내에 위치해야 하는 상황이 발생

// General
function() {
	// console.log("functino call!!");
}
myFn();

// Substitute
let myFn = function() {
	// console.log("callback function call!!");
}; // 코드블럭이 아닌 객체를 선언한 중괄호이므로 세미콜론을 사용함.

// Attribute 중복 호출 문제 있음.
windows.onload = function() {
	// console.log("load event!!");
	let button = document.getElementById("call");
	button.onclick=function() {
		// console.log("Hello JavaScript!!");
	};
	button.onclick=function() {
		// console.log("Hello jQuery!!");
	};
};

addEventListener()

// 위에서 언급한 콜백 함수 방식의 오류로 인해서, 일반적인 JavaScript에서의 이벤트는 대부분 addEventListener(), attachement() 방식을 사용
// 특히 load 이벤트의 중복 호출이 문제가 될 때가 많이 있지만, Internet Explorer 8.0과 Opera 6.0 브라우저에서는 지원되지 않으므로 이 경우에는 attachEvent() 이벤트 방식으로 작성
// addEventListener() 메서드는 지정된 요소에 이벤트 핸들러를 연결
element.addEventListener(event, function, useCapture)
Return Value: No return value

// 활용구문
window.addEventListener("load", function(){
	// console.log("load event!!");
	let button = document.getElementById("call");
	button.addEventListener("click", function(){
		// console.log("Hello JavaScript!!");
	});
	button.addEventListener("click", function(){
		// console.log("Hello jQuery!!");
	});
});

attachEvent()

// addEventListener() 이벤트 방식은 일반 브라우저에서 적용하며, Internet Explorer 8.0과 Opera 6.0 브라우저에서는 attachEvent() 방식으로 작성
// IE 8.0 브라우저를 위한 조건부 주석으로 작성할 필요가 있음.
element.getAttribute(attributename)
Return Value: A String

// 활용구문
// console.log(window.addEventListener);
if(window.addEventListener) {
	window.addEventListener("load", function() {
		let button = document.getElementById("call");
		let note = document.getElementById("demo");
		button.addEventListener("click", function() {
			note.innerHTML = "Hello JavaScript!!";
		});
	});
}
else {
	window.attachEvent("onload", function() {
		let button = document.getElementById("call");
		let note = document.getElementById("demo");
		button.attachEvent("onclick", function() {
			note.innerHTML = "Hello JavaScript!!";
		});
	});
}