상세 컨텐츠

본문 제목

HTML DOM 함수 createElement(), appendChild() createTextNode()

IT공부방/HTML5, CSS

by 동해둘리 2016. 7. 25. 10:48

본문

반응형

 

동적으로 HTML 의 DOM 엘리먼트를 생성하고 조절하는 함수이다. 예를 들면 다음과 같은 함수들이다.. 

 

1. createElement, appendChild, createTextNode 함수

 

동적으로 HTML DOM 엘리먼트를 생성하는 함수

 

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
 
function myFunction() {
 
    var node = document.createElement("LI");        // LI 엘리먼트를 생성한다. 
 
    var textnode = document.createTextNode("Water");    //  Text 노드를 생성한다.
 
    node.appendChild(textnode);    // LI 엘리먼트의 자식으로 text 노드를 등록한다. 
 
    document.getElementById("myList").appendChild(node);
 
}
 
</script>
 cs

 

 

 

 

 
 
HTML DOM 엘리먼트와 연관된 함수 리스트는 다음과 같다.
 
Property / Method Description
document.activeElement Returns the currently focused element in the document
document.addEventListener() Attaches an event handler to the document
document.adoptNode() Adopts a node from another document
document.anchors Returns a collection of all <a> elements in the document that have a name attribute
document.applets Returns a collection of all <applet> elements in the document
document.baseURI Returns the absolute base URI of a document
document.body Sets or returns the document's body (the <body> element)
document.close() Closes the output stream previously opened with document.open()
document.cookie Returns all name/value pairs of cookies in the document
document.createAttribute() Creates an attribute node
document.createComment() Creates a Comment node with the specified text
document.createDocumentFragment() Creates an empty DocumentFragment node
document.createElement() Creates an Element node
document.createTextNode() Creates a Text node
document.doctype Returns the Document Type Declaration associated with the document
document.documentElement Returns the Document Element of the document (the <html> element)
document.documentMode Returns the mode used by the browser to render the document
document.documentURI Sets or returns the location of the document
document.domain Returns the domain name of the server that loaded the document
document.domConfig Obsolete. Returns the DOM configuration of the document
document.embeds Returns a collection of all <embed> elements the document
document.forms Returns a collection of all <form> elements in the document
document.getElementById() Returns the element that has the ID attribute with the specified value
document.getElementsByClassName() Returns a NodeList containing all elements with the specified class name
document.getElementsByName() Returns a NodeList containing all elements with a specified name
document.getElementsByTagName() Returns a NodeList containing all elements with the specified tag name
document.hasFocus() Returns a Boolean value indicating whether the document has focus
document.head Returns the <head> element of the document
document.images Returns a collection of all <img> elements in the document
document.implementation Returns the DOMImplementation object that handles this document
document.importNode() Imports a node from another document
document.inputEncoding Returns the encoding, character set, used for the document
document.lastModified Returns the date and time the document was last modified
document.links Returns a collection of all <a> and <area> elements in the document that have a href attribute
document.normalize() Removes empty Text nodes, and joins adjacent nodes
document.normalizeDocument() Removes empty Text nodes, and joins adjacent nodes
document.open() Opens an HTML output stream to collect output from document.write()
document.querySelector() Returns the first element that matches a specified CSS selector(s) in the document
document.querySelectorAll() Returns a static NodeList containing all elements that matches a specified CSS selector(s) in the document
document.readyState Returns the (loading) status of the document
document.referrer Returns the URL of the document that loaded the current document
document.removeEventListener() Removes an event handler from the document (that has been attached with theaddEventListener() method)
document.renameNode() Renames the specified node
document.scripts Returns a collection of <script> elements in the document
document.strictErrorChecking Sets or returns whether error-checking is enforced or not
document.title Sets or returns the title of the document
document.URL Returns the full URL of the HTML document
document.write() Writes HTML expressions or JavaScript code to a document
document.writeln() Same as write(), but adds a newline character after each statement

 

반응형
저작자표시

'IT공부방 > HTML5, CSS' 카테고리의 다른 글

마우스 오른쪽 버튼 금지하기 captureEvents(), right click  (0) 2016.07.25
JavaScript HTML DOM EventListener 이벤트 리스너, 버블링, 캡처링  (0) 2016.07.25
CSS 속성설명 word-break, float, clear  (0) 2016.07.21
CSS 의 transform 함수 이해하기 transform-origin / translate / skew/ rotate  (0) 2016.07.21
CSS 의 display 속성, inline / block / none / inline-block / table  (0) 2016.07.21

관련글 더보기

댓글 영역

티스토리툴바