My Journey to Learning Javascript: Notes- DOM Scripting

Html is the (parent node) with all other elements or (child nodes)under it’s parent. Child nodes also have their own child nodes.

Unlike the Browser Object Model(BOM), the Document Object Model(DOM) deals only with the web page/html page. It allows users in any browser to manipulate the content of a document, using the same code.

The html document can be represented as a tree structure. The tree structure is dependent on proper html form so that the DOM can correctly access elements as a hierarchy. This means accurately predicting the structure of the document when creating it.

Another way to think of DOM hierarchy besides the tree structure is a book example. If you were told to search for a specific quote, you can be told to search on a specific line number on a specific page. But what if the book was later updated with more details, more pages and more information? The previous way to find the quote you are looking for will no longer work, so better instructions are needed in order to access what you are looking for even if changes are later made. For example you can instruct someone to search for the quote in a specific chapter, on a specific paragraph and in a specific section. Navigating in a hierarchial fashion makes more sense.

Some of the most used methods of the document object in the Dom are:


getElementById(idValue) Returns a reference (a node) of an element, when supplied with the value of the id attribute of that element
getElementsByTagName(tagName) Returns a reference (a node list) to a set of elements that have the same tag as the one supplied in the argument
querySelector(cssSelector) Returns a reference (a node) of the first element that matches the given CSS selector
querySelectorAll(cssSelector) Returns a reference (a node list) to a set of elements that match the given CSS selector


Creating Elements and Text


createElement(elementName) Creates an element node with the specified tag name. Returns the created element

createTextNode(text) Creates and returns a text node with the supplied text


Example:

var pElement = document.createElement(“p”);
var text = document.createTextNode(“This is some text.”);
*This would create a <p>This is some text<p>


Element Object


tagName Gets the element’s tag name
getAttribute() Gets the value of an attribute
setAttribute() Sets an attribute with a specified value
removeAttribute() Removes a specific attribute and its value from the element

getAttribute(attributeName) Returns the value of the supplied attribute Returns null or an empty string if the attribute does not exist
setAttribute(attributeName, value) Sets the value of an attribute
removeAttribute(attributeName) Removes the value of an attribute and replaces it with the default value

Example:

<head> <title>Chapter 9, Example 1</title>
</head>
<body> <p id=”paragraph1">This is some text.</p> <script> var pElement = document.getElementById(“paragraph1”); pElement.setAttribute(“align”, “center”);
alert(pElement.getAttribute(“align”));
pElement.removeAttribute(“align”); </script>
</body>
</html>
  1. var pElement =document.getElementById(“paragraph1”); finds the element node and store it into a new variable.
  2. .pElement.setAttribute(“align”, “center”); sets pElement’s(<p> tag) attribute to align: center.
  3. alert(pElement.getAttribute(“align”)); displays an alert box showing what pElement’s(<p> tag) attribute value is.
  4. pElement.removeAttribute(“align”); removes the value from pElement’s(<p> tag) attribute.


Node Object


firstChild Returns the first child node of an element
lastChild Returns the last child node of an element
previousSibling Returns the previous child node of an element at the same level as the current child node
nextSibling Returns the next child node of an element at the same level as the current child node
ownerDocument Returns the root node of the document that contains the node (note this is not available in IE 5 or 5.5)
parentNode Returns the element that contains the current node in the tree structure
nodeName Returns the name of the node
nodeType Returns the type of the node as a number
nodeValue Gets or sets the value of the node in plaintext format


Methods of Node Object


appendChild(newNode) Adds a new Node object to the end of the list of child nodes. This method returns the appended node.
cloneNode(cloneChildren) Returns a duplicate of the current node. It accepts a boolean value. If the value is true, the method clones the current node and all child nodes. If the value is false, only the current node is cloned and child nodes are left out of the clone.
hasChildNodes() Returns true if a node has any child nodes and false if not
insertBefore(newNode, referenceNode) Inserts a new Node object into the list of child nodes before the node stipulated by referenceNode. Returns the inserted node
removeChild(childNode) Removes a child node from a list of child nodes of the Node object. Returns the removed node



DOM Manipulation


Dom scripting is the manipulation of the web page once it has been loaded into the browser.

You can change the appearance of the page by changing each CSS property with the style property or changing the value of the element’s class attribute.

You change CSS properties with the style property. Most property names match those used in CSS with the exception of those names that use a hyphen.

var mainMenu= document.getElementById(“mainMenu”);
mainMenu.style.color = “red”;
*changes the text color to red

Instead of using the CSS property name background-color, you would use:

mainMenu.style.backgroundColor = “blue”;
*changes background color to blue


You can change the class attribute using .className you reduce the amount of Javascript code you must write and leaves style information in the CSS file where it belongs.


Another way of changing the appearance is by positioning and moving content using the position property.

var mainMenu= document.getElementById(“mainMenu”);
mainMenu.style.position = “absolute”;
mainMenu.style.left = “100px”; // set the left position
mainMenu.style.top = “100px”; // set the right position
*This code first retrieves the mainMenu element. Then it sets the element’s position to absolute and moves the element 100 pixels from the left and top edges