Recommended
More Related Content
What's hot
What's hot (20)
Similar to DOM JavaScript DOM Overview
Similar to DOM JavaScript DOM Overview (20)
Recently uploaded
Recently uploaded (20)
DOM JavaScript DOM Overview
- 2. About Me var orienter = { name: "Vibol YOEUNG", company: "Webridge Technologies", email: "yoeung.vibol@gmail.com", };
- 3. 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."
- 4. DOM Overview
- 5. Waiting for the HTML DOM 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.
- 7. 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>
- 9. Navigating the DOM(All node)
- 10. Navigating the DOM <p> <strong>Hello</strong> how are you doing? </p>
- 12. Creating Node var textNode = document.createTextNode("world"); var myNewPNode = document.createElement("p");
- 13. Attaching, copying or removing nodes
- 14. Attaching, copying or removing nodes myP.appendChild(myTextNode);
- 15. Node information
- 16. Thanks for your time.