The DOM of an HTML document can be represented as a nested set of boxes finds

The dom of an html document can be represented as a

This preview shows page 40 - 44 out of 44 pages.

The DOM of an HTML document can be represented as a nested set of boxes: //finds element by id document. getElementById (id) //finds elements by class name document. getElementsByClassName (name) //finds elements by tag name document. getElementsByTagName (name) var arr = document. getElementsByClassName ("demo"); <p>hi</p> <p>hello</p> <p>hi</p> <script> var arr = document.getElementsByTagName ("p"); for (var x = 0; x < arr.length; x++) { arr[x].innerHTML = "Hi there"; } </script> Dom Events
Image of page 40
Each element in the DOM has a set of properties and methods that provide information about their relationships in the DOM: element. childNodes returns an array of an element's child nodes. element. firstChild returns the first child node of an element. element. lastChild returns the last child node of an element. element. hasChildNodes returns true if an element has any child nodes, otherwise false. element. nextSibling returns the next node at the same tree level. element. previousSibling returns the previous node at the same tree level. element. parentNode returns the parent node of an element Creating Elements Use the following methods to create new nodes: element. cloneNode () clones an element and returns the resulting node. document. createElement (element) creates a new element node. document. createTextNode (text) creates a new text node. Dom Events
Image of page 41
Creating Elements Use the following methods to create new nodes: element. cloneNode () clones an element and returns the resulting node. document. createElement (element) creates a new element node. document. createTextNode (text) creates a new text node. <div id ="demo">some content</div> <script> //creating a new paragraph var p = document.createElement("p"); var node = document.createTextNode("Some new text"); //adding the text to the paragraph p. appendChild (node); var div = document.getElementById ("demo"); //adding the paragraph to the div div. appendChild (p); </script> Dom Events
Image of page 42
Javascript Exercises Create a webpage with an of Homer Simpson image at the center of the page. Develop a script that prints an alert: “Duh, you are hovering!!” every time the mouse crosses over the image. Add 5 buttons to your webpage: red, yellow, green, black, and silver. Every time you click on one of these buttons the background should take the corresponding color. CS380 43
Image of page 43
Javascript Exercises Add a link with the text: “CLICK ME!”. Develop a function that randomly chooses between the following websites to link your text: / / / / CS380 44
Image of page 44

You've reached the end of your free preview.

Want to read all 44 pages?

  • Fall '19
  • Document Object Model

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

Stuck? We have tutors online 24/7 who can help you get unstuck.
A+ icon
Ask Expert Tutors You can ask You can ask You can ask (will expire )
Answers in as fast as 15 minutes