Breaking the Kubernetes Kill Chain: Host Path Mount
Document object model
1.
2. Agenda
Evaluation.
Benefits of DOM.
DOM Structure and implements.
XML With DOM.
HTML With DOM.
JavaScript with DOM.
CSS with DOM.
Q&A
3. Where the Document Object Model came from?
What is Document Object Model ?
4. Where the Document Object Model came from?
"browser wars" of the late 1990s between Netscape Navigator
and Microsoft Internet Explorer.
1996 within Netscape Navigator 2.0
“DOM Level 0" or "Legacy DOM”
W3C in late 1998 - > 2000 itro.. DOM Level 1 and 2.
2005, large parts of W3C DOM were well-supported
by common ECMAScript-enabled browsers
5. What is Document Object Model ?
Document Object Model (DOM), a programming interface
specification being developed by the World Wide Web
Consortium (W3C), lets a programmer create and modify
HTML pages and XML documents as full-fledged program
objects.
In short..
set of objects/elements
a structure of how these objects/elements can be combined
and an interface to access and modify them
6. Benefits of DOM.
Read the entire document
Represents result as a tree
Lets you search tree
Lets you modify tree
Good for reading data/configuration files
Support in many different languages.
7. DOM Structure and implements
Objects are in a hierarchy
The window is the parent
for a given web page.
Document is the child with
the objects that are most
commonly manipulated
[CONTINUED]
8. DOM Tree
The usual parent/child relationship between node
Like any other tree, you can walk this
[CONTINUED]
9. Referencing Objects
By their id or name (this is the easiest way, but
you need to make sure a name is unique in the
hierarchy)
by their numerical position in the hierarchy, by
walking the array that contains them
by their relation to parent, child, or sibling
(parentNode, previousSibling, nextSibling, firstChild,
lastChild or the childNodes array
10. What is a Node?
Element Node – contains an HTML tag
Text Node – contains text
Text Nodes are contained in Element Nodes
[CONTINUED]
11. Nodes Organise the Page
html
head
title
text
“my page”
body
p
text
“This is text
on
my page”
<html>
<head>
<title>My page</title>
</head>
<body>
<p>This is text on my page</p>
</body>
</html>
[CONTINUED]
12. Adding Some Text To A Page
Create a new Element
[document.createElement(“p”)]
Create a Text Node
[document.createTextNode(“Some text.”) ]
Attach the New Text Node to the New Element
[newNode.appendChild(newText)]
Find an Existing Element
[document.getElementById(“thisLocation”)]
Append the New Element to the Existing Element
[docElement.appendChild(newNode)]
[CONTINUED]
14. Remove a Node
“To remove a node, we use the element method removeChild (name of node to be removed)”
function remText(location) {
var docElement;
docElement = document.getElementById(location);
docElement.removeChild(docElement.lastChild);
}
[CONTINUED]
15. Best way to the get Element
getElementById() allows you to work with elements by
their individual id but often you will want to work with a
group of elements
getElementsByTagName() allows you to work with
groups of elements. This method returns an array
[CONTINUED]
16. Where on the Node Tree?
childNodes
nodeList = node.childNodes
firstChild
reference = node.firstChild
lastChild
nextSibling
parentNode
previousSibling
[CONTINUED]
17. Attribute Nodes
We can get at the attributes of an element through attribute nodes
Attribute nodes, like text nodes are always contained in element nodes
We shall look at methods:
getAttribute()
setAttribute()
function dispAttribs() {
var messg;
attribs = new Array;
attribs = document.getElementsByTagName("p");
for (i = 0; i < attribs.length; i++) {
messg = attribs[i].getAttribute("className");
alert(messg);
}
}
function chngAttribs() {
var messg;
attribs = new Array;
attribs = document.getElementsByTagName("p");
for (i = 0; i < attribs.length; i++) {
attribs[i].setAttribute("className","jazz");
}
}
[CONTINUED]
18. XML With DOM
EXtensible Markup Language (XML) is a meta-language that describes the content of
the document (self-describing data).
XML does not specify the tag set or grammar of the language
Media for data interchange
XML only has container tags
<blah>...</blah> or <blah/>
EXAMPLE-02
19. HTML With DOM
We can track any tag with respect its name
and global attribute.
Use to arrange the XML data in UI.
Give Action through the event Handler.
Add and modified the tag with data.
[CONTINUED]
EXAMPLE-03
20. JavaScript with DOM
JavaScript Objects Reference
Browser Objects Reference
Core DOM Objects Reference
HTML DOM Objects Reference
EXAMPLE-04
21. CSS With DOM
Dynamically we can add inner Style sheet.
We can also add css class.
EXAMPLE-05
22. All the HTML in the tag is replaced when
the innerHTML method is used
innerHTML is not part of the DOM – so it
may one day disappear – though it is
universally recognised by browsers
Tags within the innerHTML are not part
of the DOM tree so they cannot be
manipulated
Points to know.
[CONTINUED]
23. Points to know.
Understand the nature and structure of the DOM
Add and remove content from the page
Access and change element attributes –
including source and class
Insert markup into a page using innerHTML
Change style attribute using Javascript
24. Points to know
DOM makes all components of a web page
accessible
HTML elements
their attributes
text
They can be created, modified and removed
with JavaScript
25. DOM Standards
W3C www.w3.org/DOM/defines the standards
DOM Level 3 recommendation
www.w3.org/TR/DOM-Level-3-Core/
DOM Level 2 HTML Specification
www.w3.org/TR/DOM-Level-2-HTML/
additional DOM functionality specific to HTML,
in particular objects for XHTML elements