Document Object Module
Document Object Module
This detail may be useful when we want to travel up from an arbitrary element elem
to <html>, but not to the document.
-----------------------------------------------------------------------------------
--------
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:
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>:
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>
For instance:
Sometimes non-standard attributes are used to pass custom data from HTML to
JavaScript, or to “mark” HTML-elements for JavaScript.
Like this:
<script>
// the code finds an element with the mark and shows what's requested
let user = {
name: "Pete",
age: 25
};
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:
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.
3) By individual method :-
item.style.color = "red";
item.style.backgroundColor = "yellow";
and much more;