Java Script DOM Lecture Overview n n Slide

Java. Script DOM

Lecture Overview n n Slide 2 The Basics of the Document Object Model (DOM) DOM structure Navigating the DOM Manipulating elements

The Document Object Model n Slide 3 Java. Script uses the Document Object Model (DOM) objects to get at the browser, its documents, and its windows n This is where the real power comes in n Other “things” can use the DOM too (. NET, Java, Android, for example)

What is the DOM (1)? n n The HTML DOM is a tree of objects It permits access to the contents, structure, and style of an HTML 5 document n n Slide 4 An XML document too The DOM can communicate with multiple browser instances It’s formally defined by the W 3 C "The W 3 C Document Object Model (DOM) 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. "

What is the DOM (2)? Slide 5

What is the DOM (3) n n A couple of notes about the previous figure Element nodes might have “sub nodes” for n n Slide 6 Element Text (text nodes) Attributes (attribute nodes)

Why do we use the DOM? n n Dynamically create new document elements Move document elements and remove them too n In this lab, you will use Java. Script. Next you will see how to use j. Query n Slide 7 Hide elements and make elements visible Change element contents Change CSS styles programmatically

DOM Programming Model n n It’s an object model and a programming interface HTML elements are considered DOM objects n They have properties to store data n n n They have methods that perform actions n n Slide 8 Some properties are read / write Some properties are read only get. Element. By. Id for example They respond to events

We will Talk About n n n Slide 9 document (the currently loaded document in the browser) navigator (the browser itself) window (a window (tab) in the browser)

The document Object n n The document object represents your running HTML document as it is seen by the browser We can n find elements and set their properties n n n Slide 10 This is what you have been doing change elements add and delete elements

The document Object (Finding Elements) Slide 11 Method Description document. get. Element. By. Id() Find an element by element id document. get. Elements. By. Tag. Name() Find elements by tag name document. get. Elements. By. Class. Name() Find elements by class name

The document Object (Changing Element Content) Slide 12 Method Description element. inner. HTML= Change the inner HTML of an element. attribute= Change the attribute of an HTML element. set. Attribute(attribute, value) Change the attribute of an HTML element. style. property= Change the style of an HTML element

The document Object (Adding / Deleting Elements) Slide 13 Method Description document. create. Element() Create an HTML element document. remove. Child() Remove an HTML element document. insert. Before() Insert a new element document. append. Child() Add an HTML element document. replace. Child() Replace an HTML element document. write(text) Write into the HTML output stream

The document Object (A Canonical List) n n Slide 14 Refer to W 3 Schools http: //www. w 3 schools. com/js/js_htmldom_d ocument. asp

Referencing Elements by ID n Remember each HTML element has an ID attribute n This attribute is special – it’s the unique identifier for the node n n Use the get. Element. By. Id method to get a reference to the node n Slide 15 It’s value should begin with a letter for compatibility with all browsers The method applies to the document object

Referencing Elements by ID (Example) n Get and change the text in the paragraph named First <script> function Show. Tree() { x = document. get. Element. By. Id("First"); x. inner. HTML = "Changed"; } </script> n The paragraph declaration <p id="First">Hello world!</p> Slide 16

Getting Elements by Tag Name n n n Slide 17 get. Elements. By. Tag. Name gets a list (array) of elements having a particular tag name The length property of the array tells us how many items are in the array Each element can be referenced via an array subscript

Getting Elements by Query Selector n The query. Selector. All() method selects objects (elements) based on a CSS query selector n Slide 18 These are the same query selectors that you have used before

Getting Elements by Class Name n You can get all elements that belong to a particular (CSS) class by calling get. Elements. By. Class. Name n n Slide 19 The method accepts one argument – the class name The method returns an array of elements

Node Properties n n For an individual node, the tag. Name property contains the name of the tag (element name) The node. Type property contains the type of node n n Slide 20 1 2 3 8 = = element attribute text comment

Creating new Elements n First create an element with create. Element() n n n Slide 21 Optionally put text in the element with create. Text. Node() Append the text to the above element Insert the element that you created in the DOM where you want it

Determining the Browser n Use the navigator object to get info about the browser n app. Version gets the major version n app. Minor. Version gets the minor version n n Slide 22 Netscape Microsoft Internet Explorer Supported by IE only app. Name gets the name of the browser

Determining the Browser Location n n geolocation gets coordinates for browsers that support it Getting the location is a multi-step process n n Call navigator. geolocation. get. Current. Position() to get the current position Create a callback function to process the returned coordinates https: //developer. mozilla. org/en. US/docs/Web/API/Geolocation/get. Current. Position Slide 23

The window object n n The window object provides a reference to the open browser window Through the window object, you can n n Slide 24 Reference the elements on the page through the DOM Create new windows and destroy them

The window Object (Introduction) n n n It’s the root of the IE object hierarchy It refers to the IE Browser windows The document property contains a reference to the open document n n Slide 25 More about the document object in a moment window. open() creates a new browser window

window. open (Semantics) n n n window – refers to the browser window We can also use the keyword self window. open (url, name, features, replace) n n Slide 26 url contains URI or file name Second argument contains the name of the window Features allows browser window configuration n It’s a comma-separated list of key=value pairs Replace, if false, creates a new history entry. If true, the current history entry is replaced

The window Object (Attributes 1) n n Slide 27 fullscreen - defines whether window fills the desktop toolbar – enable or disable the toolbar menubar – enable or disable the menu bar resizable – allow or disallow window resizing

The window Object (Attributes 2) n n Slide 28 always. Raised – browser floats on top of other windows regardless of whether it is active height and width define the window size scrollbars defines whether scroll bars appear when necessary Unspecified attributes will have false values

The window Object (Attributes – Example) n Create a blank Web page without a toolbar or a menu bar n n n Note attributes appear as a comma separated list 1 and yes are equivalent 0 and no are equivalent new. Window = window. open("", "foo", "toolbar=no, menubar=no") Slide 29

The window Object (Best practices) n n n Slide 30 Do not use to create those dreaded banner ads Do not use to trap the user by handling on. Close and displaying the window again Do not hide the title bar

The window Object (Example) n Display a very annoying window that’s hard to get rid of window 1 = window. open("", "Annoy", "height=300, width=300, titlebar=no") window 1. document. write("Annoying") See Java. Script. Window. Maker. htm Slide 31

The window Object (Members 2) n Display a prompt with a text entry field window. prompt(“message”, “Default”) n n Display a confirmation dialog if (window. confirm("Exit")) { window. close() } Display a message window. alert("Error") Slide 32

The window Object (History 1) n history – used for history navigation window. history. back() window. history. forward() n Go back to pages and forward 2 pages window. history. go(-2) window. history. go(2) Slide 33

The window Object (History 2) n The history object also support the following properties: n n Slide 34 current – the URL of the current document length – the number of URLs in the history list next – the next URL in the history list previous – the previous URL in the history list

The window Object (Status bar) n n There are two properties to manage the status bar default. Status – this message always appears status – this message appears only temporarily such as when the mouse hovers over a button or link Display a status bar message window. status("appears in the status bar") Slide 35