COMP 484 - JavaScript Document Object Model (DOM) - Ch.12 - Objects and COllections

Document Object Properties

1. images collection 2. links collection (al |<a> elements and <area> elments with a href attribute.) 3. forms collection 4. anchors collection (all <a> elements) These collections contain all the elements of the corresponding type on the page.

document object createTextNode method

Creates a DOM node that contains only text. Given a string argument, createTextNode inserts the string into the text node. (does not insert the element to the document). document.createTextNode("text"); Ex. <p id = "new6" class="highlighted">[new6]</p>

document object createElement method

Creates a new DOM node, taking the tag name as an argument. It does not insert the element on the page. Ex. newNode = document.createElement("p");

DOM node

Every piece of an HTML5 page (elements, attributes, text, etc.) is modeled in the web browser by a DOM node. Nodes are releated to each other through child-parent relationships. Can only have on parent but many children.

document.getElementById()

Finds an element whose id attribute marches the passed in variable id. If found returns object called DOM nodes otherwise null is returned.

document.getElementById().value

Gets the contents of the element.

How are HTML5 elements and attributes of HTML5 elements treated with DOM?

HTML5 elements can be treated as objects and many attributes of HTML5 elements can be treated as peroperties of those objects.

Siblings

Nodes with the same parent node

replaceChild method

Receives as its first argument the new node to insert and its second argument the node to replace. Ex. parentNode.replaceChild(newNode, currentNode);

href property of a DOM link node

Refers to the link's href attribute.

removeChild method

Remove the oldNode ( a child of the new currentNode) from its place in the HTML5 document. Ex. currentNode.removeChild(oldNode);

Collection's length property

Specifies the number of items in the collection. Ex. var linksList = documents.links // an Array

getAttribute()

allows you to get an attribute value

setAttribute()

allows you to modify an attribute value

item method

an alternative to the square bracketed indices - receives as an integer argument and returns the corresponding item in the collection.

Property parentNode contains the node's parent

currentNode.parentNode

To access the body element of the HTML document

document.body

Document Object Model (DOM)

gives you scripting access to all elements on a web page. Using Javascript you can create, modify, or remove elements in the page dynamically.

DOM Collections

groups of related objects on a page. Are accessed as properties of DOM objects such as the document object or a DOM node. Allows easy access to all elements of a single type in a page. Useful for gathering elements into one place and for applying changes to those elements across an entire page. For example, the forms collection could be used to disable all form inputs after a submit button has been pressed to a void multiple submissions while the next page loads.

Method appendChild

Inserts a child node (passed as an argument) after any existing children of the node which it's called. myNode.appendChild("childNodeName"); Tip: create a node by 'createElement', and then insert it by 'appendChild'

insertBefore method

Inserts newNode as a child of the parent directly before currentNode. Ex. parentNode.insertBefore(newNode, currentNode);

Root node

The html node in a DOM tree. Has no parent.

DOM tree

The nodes in a document make up the page's DOM tree which describes the relationships among elements.

namedItem method of a DOMcollection

receives an element id or name attribuate as an argument and finds the element with that id or name in the collection. Used to access specific elements in a collection.