HFJS – BookReview Ch8Brady Cheng
Agenda GetHTML Element Update the HTML Element DOM(Document Object Model)
Get HTML element getElementByID getElementByTagName<body>       <img id=“img1” src=“img1.png” alt=“first image”/>       ...
Update the HTML Element     Use   innerHTML property to update<head><script type="text/javascript">  function updateText(...
DOM     DOM(document   object model) is a      concept to organize our html as a tree-      like structure               ...
DOM Every block is a node Upper node is the parent of lower node Two types of node            document    Element     ...
DOM Some    properties to describe nodes    nodeValue    nodeType                  document    childNode              ...
DOM Some   functions to operate nodes    removeChild();    createTextNode();    appendChild(); We use DOM to implemen...
DOM Use   innerHTMLdocument.getElementById("text").innerHTML = "Hello, JS world!"; Use   DOMwhile(node.firstChild)      ...
Upcoming SlideShare
Loading in …5
×

Javascript ch8

425 views
384 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
425
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript ch8

  1. 1. HFJS – BookReview Ch8Brady Cheng
  2. 2. Agenda GetHTML Element Update the HTML Element DOM(Document Object Model)
  3. 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. 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. 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. 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. 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. 8. DOM Some functions to operate nodes  removeChild();  createTextNode();  appendChild(); We use DOM to implement the aforementioned updateText() function
  9. 9. DOM Use innerHTMLdocument.getElementById("text").innerHTML = "Hello, JS world!"; Use DOMwhile(node.firstChild) node.removeChild(node.firstChild);var new_node = document.createTextNode("Hello, JS world!");node.appendChild(new_node); Output: Hello, world! -> Hello, JS world!

×