javascript dom

JavaScriptDOM

About Me

var orienter = { name: "Vibol YOEUNG", company: "Webridge Technologies", email: "[email protected]",};

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.

javascript dom

Technology