0% found this document useful (0 votes)
29 views4 pages

Document Object Module

The document provides methods to select and modify DOM elements. 1) To select elements, use document.documentElement to get the <html> element, document.body to get the <body>, and document.querySelectorAll to find elements matching a CSS selector. 2) Elements can be modified by creating new elements, setting attributes, inserting text nodes, and using methods like insertAdjacentElement to add elements in desired positions. Style can be set using the style.cssText property or individual style properties. 3) Class names can be obtained, added, removed, and toggled using the classList property.

Uploaded by

Nadeem Khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
29 views4 pages

Document Object Module

The document provides methods to select and modify DOM elements. 1) To select elements, use document.documentElement to get the <html> element, document.body to get the <body>, and document.querySelectorAll to find elements matching a CSS selector. 2) Elements can be modified by creating new elements, setting attributes, inserting text nodes, and using methods like insertAdjacentElement to add elements in desired positions. Style can be set using the style.cssText property or individual style properties. 3) Class names can be obtained, added, removed, and toggled using the classList property.

Uploaded by

Nadeem Khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

DOCUMENT OBJECT MODULE:-

1) TO select the html :-


documen.documentElement
2) To select the body all elements:-
document.body.childNodes
or document.body.children
Note:- A) The documents object are not the array but it can be the collectio.But
you can create the array from the colection such
Array.from(document.body.childNodes).filter.
B) alert( document.documentElement.parentNode ); // document
alert( document.documentElement.parentElement ); // null
The reason is that the root node document.documentElement (<html>) has document as
its parent. But document is not an element node, so parentNode returns it and
parentElement does not.

This detail may be useful when we want to travel up from an arbitrary element elem
to <html>, but not to the document.
-----------------------------------------------------------------------------------
--------

#More links: tables


Till now we described the basic navigation properties.

Certain types of DOM elements may provide additional properties, specific to their
type, for convenience.

Tables are a great example of that, and represent a particularly important case:

The <table> element supports (in addition to the given above) these properties:

table.rows – the collection of <tr> elements of the table.


table.caption/tHead/tFoot – references to elements <caption>, <thead>, <tfoot>.
table.tBodies – the collection of <tbody> elements (can be many according to the
standard, but there will always be at least one – even if it is not in the source
HTML, the browser will put it in the DOM).
<thead>, <tfoot>, <tbody> elements provide the rows property:

tbody.rows – the collection of <tr> inside.


<tr>:

tr.cells – the collection of <td> and <th> cells inside the given <tr>.
tr.sectionRowIndex – the position (index) of the given <tr> inside the enclosing
<thead>/<tbody>/<tfoot>.
tr.rowIndex – the number of the <tr> in the table as a whole (including all table
rows).
<td> and <th>:

td.cellIndex – the number of the cell inside the enclosing <tr>.


An example of usage:

3) You can use the psuedo classes to select the partciuler element by usin the
querySelectorAll such
ex. let elem = document.querySelectorAll(":hover").

4) The elem.matches(css) does not look for anything, it merely checks if elem
matches the given CSS-selector. It returns true or false.
<a href="http://example.com/file.zip">...</a>
<a href="http://ya.ru">...</a>
<script>
// can be any collection instead of document.body.children
for (let elem of document.body.children) {
if (elem.matches('a[href$="zip"]')) {
alert("The archive reference: " + elem.href );// The archive reference:
http://example.com/file.zip //
}
}
</script>

5) Tag: nodeName and tagName


Given a DOM node, we can read its tag name from nodeName or tagName properties:

For instance:

alert( document.body.nodeName ); // BODY


alert( document.body.tagName ); // BODY
-----------------------------------------------------------------------------------
--------

#Dom Attributes and propertirs:-


1) You can set the attribute by using the setAttribute method .
2) If you have any attribute and you want to get them so you can get that by using
the getAttribute method.
3) To remove the attribute removeAttribute method will be use.
4) To check out that attribute is present or not use hasAttribute(nameofAttribute).
5) to get the collection of the attribute you can use elem.Attribute method.
Note:- Some attribute dont required the get Attribute method such input.checked,
input.required , a.href and more these give you the boolean level answer.
-----------------------------------------------------------------------------------
--------

#Non-standard attributes, dataset


When writing HTML, we use a lot of standard attributes. But what about non-
standard, custom ones? First, let’s see whether they are useful or not? What for?

Sometimes non-standard attributes are used to pass custom data from HTML to
JavaScript, or to “mark” HTML-elements for JavaScript.

Like this:

<!-- mark the div to show "name" here -->


<div show-info="name"></div>
<!-- and age here -->
<div show-info="age"></div>

<script>
// the code finds an element with the mark and shows what's requested
let user = {
name: "Pete",
age: 25
};

for(let div of document.querySelectorAll('[show-info]')) {


// insert the corresponding info into the field
let field = div.getAttribute('show-info');
div.innerHTML = user[field]; // first Pete into "name", then 25 into "age"
}
</script>
-----------------------------------------------------------------------------------
--------
Attributes – is what’s written in HTML.
Properties – is what’s in DOM objects.
A small comparison:

Properties
Attributes

Type Any value, standard properties have types described in the spec A
string
Name Name is case-sensitive Name is not
case-
sensitive
-----------------------------------------------------------------------------------
--------
#Dom Modification:-
-------------------
1) First the create the element by using the
let elem = document.createElement("nameofElement");
2) To put the text inside it we have required first to create the text node
let text = document.createTextNode("Text");
3) Append this text node inside the above created element.
elem.append(text);
4) Now You can insert this new created element inside the body children
a) document.body.firstChild.before(elem);
b) document.body.firstChild.after(elem);
c) document.body.firstChild.prepend(elem);
d) document.body.firstChild.append(elem)
insertAdjacentHTML/Text/Element
For that we can use another, pretty versatile method:
elem.insertAdjacentHTML(where, html).

The first parameter is a code word, specifying where to insert relative to elem.
Must be one of the following:

"beforebegin" – insert html immediately before elem,


"afterbegin" – insert html into elem, at the beginning,
"beforeend" – insert html into elem, at the end,
"afterend" – insert html immediately after elem.
The second parameter is an HTML string, that is inserted “as HTML”.

For instance:

<div id="div"></div>
<script>
div.insertAdjacentHTML('beforebegin', '<p>Hello</p>');
div.insertAdjacentHTML('afterend', '<p>Bye</p>');
</script>
…Would lead to:

<p>Hello</p>
<div id="div"></div>
<p>Bye</p>
That’s how we can append arbitrary HTML to the page.

Here’s the picture of insertion variants:


We can easily notice similarities between this and the previous picture. The
insertion points are actually the same, but this method inserts HTML.

The method has two brothers:

elem.insertAdjacentText(where, text) – the same syntax, but a string of text is


inserted “as text” instead of HTML,
elem.insertAdjacentElement(where, elem) – the same syntax, but inserts an element.
They exist mainly to make the syntax “uniform”. In practice, only
insertAdjacentHTML is used most of the time. Because for elements and text, we have
methods append/prepend/before/after – they are shorter to write and can insert
nodes/text pieces.
-----------------------------------------------------------------------------------
-------------------------------------------------
#Style and classes:-
---------------------
You have three method to stylise the elements or docs
1) By using the cssText:- This more preferable method then other method
a) sleect the element first such as
let item = document.getElementById("idname");
item.style.cssText = "color:red;background-color:yellow & much more";
why this is preferable ??
Because by using this you dont have to put all style individuly you can put
all style in one .

2) By using the setAttibute :-


item.setAttribute('style', 'color;red;background-color:yellow');

3) By individual method :-
item.style.color = "red";
item.style.backgroundColor = "yellow";
and much more;

To get the complete css of the element :-


item.getComputedStyle;

How to check class, add class ,remove class and toggling:-


-----------------------------------------------------------
to check out the the particuler item has class or not :-
alert(item.className);
to add the class :-
item.classList.add("className");
to remove the class from the classlist :-
item.classList.remove("classname");
to get the collection of the classes from the classList :-
item.classList;
If you have class and you want to remove it even if its not exist so you can put
into the list:-
item.toggle("className");

You might also like