javascript dom
Post on 29-Jul-2015
96 Views
Preview:
TRANSCRIPT
JavaScriptDOM
About Me
var orienter = { name: "Vibol YOEUNG", company: "Webridge Technologies", email: "yoeung.vibol@gmail.com",};
DOM Overview
DOM: Document Object Model - is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
DOM Overview
Waiting for the HTMLDOM to Load
● HTML is parsed.● External scripts/style sheets are loaded.● Scripts are executed as they are parsed in the
document.● HTML DOM is fully constructed.● Images and external content are loaded.● The page is finished loading.
Navigating the DOM
Navigating the DOM
<html><head>
<title>JavaScript and DOM Interfaces </title><script>
function start() {myBody = document.getElementsByTagName("body")[0];myBodyElements = myBody.getElementsByTagName("p");myP = myBodyElements[1];
}</script></head><body onload="start()">
<p>hi</p><p>hello</p>
</body></html>
Navigating the DOM
Navigating the DOM(All node)
Navigating the DOM
<p>
<strong>Hello</strong>
how are you doing?
</p>
Navigating the DOM
Creating Node
var textNode = document.createTextNode("world");var myNewPNode = document.createElement("p");
Attaching, copying orremoving nodes
Attaching, copying orremoving nodes
myP.appendChild(myTextNode);
Node information
Thanks for your time.
top related