Scribd
Upload
63 views

DOM Javascript

The document discusses the Document Object Model (DOM), which represents an HTML or XML document as a tree structure. It allows programming access to the document structure and content. Key points include: - The DOM represents the document as a tree with nodes - the base Node interface provides common properties/methods. - High-level DOM objects include the Document root node, Element nodes, and Attr attribute nodes. - The DOM provides methods to access/modify elements and attributes using objects like document, getElementById(), and setAttribute(). - Nodes have properties for traversing the tree like firstChild, nextSibling, parentNode.

Uploaded by

santosh_kumar99101
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
63 views

DOM Javascript

The document discusses the Document Object Model (DOM), which represents an HTML or XML document as a tree structure. It allows programming access to the document structure and content. Key points include: - The DOM represents the document as a tree with nodes - the base Node interface provides common properties/methods. - High-level DOM objects include the Document root node, Element nodes, and Attr attribute nodes. - The DOM provides methods to access/modify elements and attributes using objects like document, getElementById(), and setAttribute(). - Nodes have properties for traversing the tree like firstChild, nextSibling, parentNode.

Uploaded by

santosh_kumar99101
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 9

DOM- Document object

Modeling
• Represent document independently
• Allows to access common properties, methods,
objects, events
• Example - same web page in two different
scripting languages
• DOM covers only document
• DOM works representing by tree structure.
• Standard HTML document in tree structure
Tree Structure

<html> Parent Node

<head> <body> Child Node

<h1> <p> child-child Node

‘My heading’ ‘This is some text in


a paragraph’
Leaf Node
DOM Objects -

• Base DOM Object –


Node – each node in document
NodeList – list of all nodes i.e all node objects
NameNodeMap – access by name rather index
• High-Level DOM Objects-
Document – root node of the document
Element – element in the document
Attr – attribute of an element
comment – comments in documents
so on…..
DOM Properties and methods -
• Methods of Document Object : returning an element/elements
getElementById(idvalue) – returns a reference to an element
getElementBytagName – returns a reference to a set of tags

<h1 id =“heading1”>My heading</h1>


<script language = “JavaScript ” type=“text/javascript”>
Var H1Element=(document.getElementById(“Heading1”));
H1Element.style.fontFamily = “Arial”

<script language = “JavaScript ” type=“text/javascript”>


VarH1Element=(document.getElementByTagName(“Heading1”));
H1Element.style.fontFamily = “Arial”
• Methods of Document Object :
Adding and removing elements from document
createElement(element name)
createTextNode(text)
createAttribute(attribute name)
e.g
Var newText = document.createTextNode(“My
Heading”)
Var newElem = document.createElement(“H1”)
newElem.appendChild(newText)
Document.body.appendChild(newElem)
• Property of Document Object -
DocumentElement – returns a reference to the
outermost element i.e root element

Var container = document.documentElement;


• Property of Element Object -
tagName – return element tag name
alert(container.tagName);
• Methods of Node Object -
- - Adding and removing Elements/tag
appendChild(new node) – add new node to the
end of the list of the child nodes
hasChildNodes() – retruns if node has any
child node
insertBefore(new node, current node) – insert
a new node in the node list before current
node position
removeChild(child node) – remove child node
from list of child nodes of the node object.
replaceChild(new child, old child)-
• Property of Node Object –
firstChild - return first child node tag
lastChild – retrurn last child node tag
previousSibling – retrun previous child node
nextSibling – retrun next child node
ownerDocument – return root node of document
parentNode – current node in tree structure
nodeName – return name of node
nodevalue – sets the value of node in plain text format
e.g
Var PElement = H1Element.nextSibling;
PElement.style.fontFamily = “Arial”
• Methods for element object :
setting and getting attributes
getAttribute(attribute name)
setAttribute(attribute name, value)
removeAttribute(attribute name)
e.g
Ver newElem.setAttribute(“align”, “center”)
alert(newElem.getAttribute(“align”))

You might also like