Javascript DOM
2 likes•616 views
The document discusses the DOM (Document Object Model) which allows programs and scripts to dynamically access and update the content, structure, and style of an HTML document. It describes how the HTML is parsed and DOM is constructed as the page loads, and how to navigate and select elements within the DOM tree using methods like getElementsByTagName and getElementById. Code examples are provided to demonstrate creating new nodes, attaching nodes as children, and copying or removing nodes from the document.
![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>](https://image.slidesharecdn.com/domevent-150425121907-conversion-gate02/85/Javascript-DOM-7-320.jpg)
Javascript DOM
- 2. About Me var orienter = { name: "Vibol YOEUNG", company: "Webridge Technologies", email: "[email protected]", };
- 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.