A node may have multiple children but only one parent Nodes with the same

A node may have multiple children but only one parent

This preview shows page 60 - 74 out of 76 pages.

A node may have multiple children , but only one parent – Nodes with the same parent node are referred to as siblings – The document node has no parent and is called the root node COMP5347 Web Application Development
Image of page 60
The University of Sydney Page 72 The DOM COMP5347 Web Application Development
Image of page 61
The University of Sydney Page 73 DOM Nodes COMP5347 Web Application Development
Image of page 62
The University of Sydney Page 74 Essential Node Properties COMP5347 Web Application Development Property Description attributes Collection of node attributes childNodes A NodeList of child nodes for this node firstChild First child node of this node lastChild Last child of this node nextSibling Next sibling node for this node nodeName Name of the node nodeType Type of the node nodeValue Value of the node parentNode Parent node for this node previousSibling Previous sibling node for this node
Image of page 63
The University of Sydney Page 75 Document Object COMP5347 Web Application Development Method Description createAttribute() Creates an attribute node createElement() Creates an element node createTextNode() Create a text node getElementById(id) Returns the element node whose id attribute matches the passed id parameter getElementsByTagName(name) Returns a nodeList of elements whose tag name matches the passed name parameter
Image of page 64
The University of Sydney Page 76 Accessing Nodes – Selection Methods COMP5347 Web Application Development
Image of page 65
The University of Sydney Page 78 Modifying the DOM
Image of page 66
The University of Sydney Page 79 Modifying the DOM
Image of page 67
The University of Sydney Page 81 Modifying Element’s Style COMP5347 Web Application Development var commentTag = document.getElementById("specificTag"); commentTag. style.backgroundColour = "#FFFF00"; commentTag .style.borderWidth ="3px"; var commentTag = document.getElementById("specificTag"); commentTag. className = "someClassName";
Image of page 68
The University of Sydney Page 82 Outline – More HTML – Table • Elements • Styling – Form • Controls – JavaScript – Location and Basic Syntax • Variables, Control Structure, Function, Object, Array – Windows and DOM object – Event model COMP5347 Web Application Development
Image of page 69
The University of Sydney Page 83 Events – HTML events are “things” that happen to HTML elements – When JavaScript is used in HTML pages, it can “react” on these events – An HTML event can be something the browser or a user does: – An HTML web page has finished loading – An HTML input field was changed – An HTML button was clicked – Event handler – A function describes what we want to do when an event happens COMP5347 Web Application Development
Image of page 70
The University of Sydney Page 84 Registering Event Handler COMP5347 Web Application Development
Image of page 71
The University of Sydney Page 85 Common HTML Events – Mouse Events – onclick, onmousedown, onmouseenter ,… – Keyboard Events – onkeydown, onkeyup , … – Form events – onfocus, onblur, onsubmit , … – Frame/Object events – onload, onscroll , … – Not all browsers implements all events COMP5347 Web Application Development
Image of page 72
The University of Sydney Page 86 The onload event – Both frame and object can fire onload event –
Image of page 73
Image of page 74

Other Related Materials

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture