Scribd
Upload
17 views

Pyth PDF

The document discusses DOM (Document Object Model) concepts including traversing and accessing DOM nodes, common DOM properties and methods, mutating DOM nodes by adding, removing or updating elements and attributes, and positioning elements using CSS properties like position, top, left, width and height.

Uploaded by

obedburindi
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
17 views

Pyth PDF

The document discusses DOM (Document Object Model) concepts including traversing and accessing DOM nodes, common DOM properties and methods, mutating DOM nodes by adding, removing or updating elements and attributes, and positioning elements using CSS properties like position, top, left, width and height.

Uploaded by

obedburindi
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

ample <b>bold</b> display</p>

parentNode
nodeName: P
nodeType: 1 (Element)
firstChild
las

parentNode
previousSibing previousSibing
nodeName: #text nodeName: B nodeN
nodeType: 3 (Text) nodeType: 1 nodeT
nodeValue: "Sample " nodeV
nextSibing nextSibing
firstChild
lastChild parentNode

nodeName: #text
nodeType: 3 (Text)

nodeValue: "bold"

Accessing DOM Nodes


● Walk DOM hierarchy (not recommended)
element =
document.body.firstChild.nextSibling.firs
tChild; element.setAttribute(…
● Use DOM lookup method. An example using ids:
HTML: <div
id="div42">...</div>
element =
document.getElementById("d
iv42");
element.setAttribute(…
● Many: getElementsByClassName(),
getElementsByTagName(), …
○ Can start lookup at any element:
document.body.firstChild.getElementsByTa
gName()
More commonly used Node
properties/methods
● textContent - text content of a node and its
descendants
Previous slide example: P Node textContext is
"Sample bold display"
● innerHTML - HTML syntax describing the
element's descendants.
Previous slide example: P Node innerHTML is
"Sample <b>bold</b> display"
● outerHTML - similar but includes element
"<p>Sample <b>bold</b> display</p>"
● getAttribute()/setAttribute() - Get or set
the attribute of an element
Common DOM mutating operations
● Change the content of an element
element.innerHTML = "This text is
<i>important</i>";
Replaces content but retains attributes. DOM Node
structure updated.

● Change an <img tag src attribute (e.g. toggle


appearance on click) img.src="newImage.jpg";

● Make element visible or invisible (e.g., for


expandable sections, modals)
Invisible: element.style.display = "none";
Visible: element.style.display = "";
DOM and CSS interactions
● Can update an element's class

element.className = "active";

● Can update element's style

element.style.color =

"#ff0000"; // Not preferred way!

● Can also query DOM by CSS selector

document.querySelector() and

document.querySelectorAll()
Changing the Node structure
● Create a new element (can also cloneNode() an
existing one)
element =
document.createEl
ement("P");
or element =
document.createTe
xtNode("My
Text");

● Add it to an existing one


parent.appendChil
d(element);
or
parent.insertBefo
re(element,
sibling);

● Can also remove Nodes:

node.removeChild(oldNode); ● But, setting

innerHTML can be simpler and more efficient.

More DOM operations


● Redirect to a new page

window.location.href =

"newPage.html";
Note: Can result in JavaScript script execution
termination

● Communicating with the user

console.log("Reached

point A"); // Message to

browser log alert("Wow!");

confirm("OK?"); //

Popup dialog

DOM's Coordinate System


● The screen origin is at the upper left; y increases
as you go down

● The position of an element is determined by the


upper-left outside corner of its margin

● Read location with element.offsetLeft,


element.offsetTop

● Coordinates are relative to


element.offsetParent, which is not necessarily
the same as element.parentNode
DOM Coordinates
<div class="div1"><div class="div2"><div class="div3">
X
Y
div1
offsetTop

div2
offsetLeft offsetTop offsetParent

offsetLeft div3

offsetHeight offsetParent

offsetWidth

Positioning elements
● Normally elements are positioned automatically by
the browser as part of the document

● To pull an element out of the document flow and


position it explicitly:
element.style.position = "absolute";
// anything but "static"
element.style.left = "40px";
element.style.top = "10px";
"absolute" - the element no longer occupies space in
the document flow.
● The origin inside an offsetParent (for positioning
descendants) is just inside the upper-left corner of
its border.

Positioning context
● Each element has an offsetParent (some
ancestor element).

● When an element is positioned, coordinates such


as element.style.left are relative to its
offsetParent.

● Default offsetParent is the <body> element.

● Some elements define a new positioning context:


○ position CSS attribute is absolute (element is explicitly
positioned)
○ position CSS attribute is relative (element is positioned
automatically by the browser in the usual way)
○ This element will become the offsetParent for all its
descendents (unless overridden by another positioning
context)
Positioning Children
Parent

Parent

top/offsetTop Parent

left/offsetLeft

Child margin
Child border

Element dimensions
● Reading dimensions: element.offsetWidth and
element.offsetHeight

Include contents, padding, border, but not margin

● Updating dimensions: element.style.width and


element.style.height
Positioning

<body>
<div id="div1">
<p>div1</p>
</div>

#div1 { width:
50px; height:
200px; background:
#ffe0e0;
}

Positioning
…
<div id="div2">
<p>div2</p>
<div id="div2-1">
<p>div2-1</p>
</div>
</div>
#div2 {width: 300px; height:
200px; position: relative;
background: #d0e0ff;}

#div2-1 {width: 150px;


height: 80px; position:
absolute; top: 50px; left:
100px; background: #d0e0ff;}

Positioning
...

<div id="div3">
<p>div3</p>
<div id="div3-
1">

<p>div3-1</p>
</div>
</div>
#div3 {width: 300px;
height:
200px; background:
#ffffe0;}

#div3-1 {width: 150px;


height:
80px; position: absolute;
top:
50px; left: 100px;
background:
#ffffe0;}

You might also like