본문 바로가기

JAVASCRIPT

DOM

The HTML DOM Document

In the HTML DOM object model, the document object represents your web page.

The document object is the owner of all other objects in your web page.

If you want to access objects in an HTML page, you always start with accessing the document object.

Below are some examples of how you can use the document object to access and manipulate HTML.

The next chapters demonstrate the methods.


Finding HTML Elements

MethodDescription
document.getElementById()Find an element by element id
document.getElementsByTagName()Find elements by tag name
document.getElementsByClassName()Find elements by class name



Changing HTML Elements

MethodDescription
element.innerHTML=Change the inner HTML of an element
element.attribute=Change the attribute of an HTML element
element.setAttribute(attribute,value)Change the attribute of an HTML element
element.style.property=Change the style of an HTML element



Adding and Deleting Elements

MethodDescription
document.createElement()Create an HTML element
document.removeChild()Remove an HTML element
document.appendChild()Add an HTML element
document.replaceChild()Replace an HTML element
document.write(text)Write into the HTML output stream



Adding Events Handlers

MethodDescription
document.getElementById(id).onclick=function(){code}Adding event handler code to an onclick event



Finding HTML Objects

The first HTML DOM Level 1 (1998), defined 11 HTML objects, object collections, and properties. These are still valid in HTML5.

Later, in HTML DOM Level 3, more objects, collections, and properties were added.

PropertyDescriptionDOM
document.anchorsReturns all <a> elements that have a name attribute1
document.appletsReturns all <applet> elements (Deprecated in HTML5)1
document.baseURIReturns the absolute base URI of the document3
document.bodyReturns the <body> element1
document.cookieReturns the document's cookie1
document.doctypeReturns the document's doctype3
document.documentElementReturns the <html> element3
document.documentModeReturns the mode used by the browser3
document.documentURIReturns the URI of the document3
document.domainReturns the domain name of the document server1
document.domConfigObsolete. Returns the DOM configuration3
document.embedsReturns all <embed> elements3
document.formsReturns all <form> elements1
document.headReturns the <head> element3
document.imagesReturns all <img> elements1
document.implementationReturns the DOM implementation3
document.inputEncodingReturns the document's encoding (character set)3
document.lastModifiedReturns the date and time the document was updated3
document.linksReturns all <area> and <a> elements that have a href attribute1
document.readyStateReturns the (loading) status of the document3
document.referrerReturns the URI of the referrer (the linking document)1
document.scriptsReturns all <script> elements3
document.strictErrorCheckingReturns if error checking is enforced3
document.titleReturns the <title> element1
document.URLReturns the complete URL of the document1


'JAVASCRIPT' 카테고리의 다른 글

DOM Document Object  (0) 2014.12.18
DOM Element Object  (0) 2014.12.18
DOM Event Object Reference  (0) 2014.12.18
디지탈 시계  (0) 2014.09.22
자바스크립트 책 추천  (0) 2014.09.03