Javascript ch8
0 likes442 views
This document discusses getting and updating HTML elements using the DOM. It explains how to get elements by ID or tag name, update the innerHTML property to change text, and how the DOM represents HTML as a tree structure with elements as nodes. It also covers DOM properties like nodeValue and functions like removeChild() and appendChild() to manipulate nodes.
![Get HTML element
getElementByID
getElementByTagName
<body>
<img id=“img1” src=“img1.png” alt=“first image”/>
<img id=“img2” src=“img2.png” alt=“second image”/>
<img id=“img3” src=“img3.png” alt=“third image”/>
</body>
document.getElementById(“img1”);
document.getElementByTagName(“img”)[0];](https://image.slidesharecdn.com/javasciptch8-121117071647-phpapp01/85/Javascript-ch8-3-320.jpg)
Javascript ch8
- 1. HFJS – Book Review Ch8 Brady Cheng
- 2. Agenda GetHTML Element Update the HTML Element DOM(Document Object Model)
- 3. Get HTML element getElementByID getElementByTagName <body> <img id=“img1” src=“img1.png” alt=“first image”/> <img id=“img2” src=“img2.png” alt=“second image”/> <img id=“img3” src=“img3.png” alt=“third image”/> </body> document.getElementById(“img1”); document.getElementByTagName(“img”)[0];
- 4. Update the HTML Element Use innerHTML property to update <head> <script type="text/javascript"> function updateText() { document.getElementById("text").innerHTML = "Hello, JS world!"; } </script> </head> <body> <p id="text" onclick="updateText();"> Hello, world!</p> </body> Output: Hello, world! -> Hello, JS world!
- 5. DOM DOM(document object model) is a concept to organize our html as a tree- like structure document html <head> …</head> <body> head body <p id="text"> Hello, world!</p> </body> p Hello, world!
- 6. DOM Every block is a node Upper node is the parent of lower node Two types of node document Element html Text Parent of head/body head body Child of html p Hello, world!
- 7. DOM Some properties to describe nodes nodeValue nodeType document childNode html fisrtChild lastChild head body p Id=textId Hello, world ! alert(document.getElementById("textId").firstChild.nodeValue);
- 8. DOM Some functions to operate nodes removeChild(); createTextNode(); appendChild(); We use DOM to implement the aforementioned updateText() function
- 9. DOM Use innerHTML document.getElementById("text").innerHTML = "Hello, JS world!"; Use DOM while(node.firstChild) node.removeChild(node.firstChild); var new_node = document.createTextNode("Hello, JS world!"); node.appendChild(new_node); Output: Hello, world! -> Hello, JS world!