Revision as of 18:42, 21 February 2025

DOM

dev/ understanding dom nodes - a comprehensive guide with example
medium/ DOM manipulation part 1
medium/ DOM manipulation part 2

What is Document Object Model

In simple words, DOM is the thing that gets generated after your browser parses the HTML that it gets.
that thing is a tree structure that browsers use to understand and represent a web page.
in this tree, each element is called a node.
- Document Node: This is the top-level node in the DOM and represents the entire HTML document.
- Element Node: This represents an HTML element, such as div, p, ul, etc.
- Attribute Node: This represents an attribute of an HTML element, such as id, class, src, etc.
- Text Node: This represents the actual text within an HTML element
- Comment Node: ?

so "manipulating the DOM" means modifying or exploring this tree structure of the web page.

directly and indirectly manipulating the DOM

example using DOM property and method to manipulate the contents in span elements
in this example, I used innerHTML, innerText, textContent to add a space in between the spans. but didn't work(maybe only half-worked).
because these properties deal with contents as strings rather than with the nodes themselves.
they don't directly interact with the DOM tree but instead replace the entire content of an element.
basically what it did was wiped out the old content, interprets the string, created new nods. that's why it looked like my spans were duplicating themselves.

@@ Line 1: / Line 1: @@
 [[File:Spaghetti-wall.png|thumb]]
 =DOM=
-'''[https://dev.to/sidramaqbool/understanding-dom-nodes-a-comprehensive-guide-with-example-22m5 dev/understanding dom nodes - a comprehensive guide with example]'''<br><br>
+'''[https://dev.to/sidramaqbool/understanding-dom-nodes-a-comprehensive-guide-with-example-22m5 dev/ understanding dom nodes - a comprehensive guide with example]'''<br>
+'''[https://medium.com/the-school-of-js/dom-manipulation-1-ee42bc0a9f41 medium/ DOM manipulation part 1]<br>
+'''[https://medium.com/the-school-of-js/dom-manipulation-2-f2be4f343524 medium/ DOM manipulation part 2]<br>
+<br>
 '''What is Document Object Model'''
-* DOM is a '''tree structure''' that browsers use to understand and represent a web page.
+* In simple words, DOM is the thing that gets generated after your browser parses the HTML that it gets.
+* that thing is a '''tree structure''' that browsers use to understand and represent a web page.
 * in this tree, '''each element is called a node'''.
 ** '''Document Node:''' This is the top-level node in the DOM and represents the entire HTML document.
@@ Line 9: / Line 13: @@
 ** '''Attribute Node:''' This represents an attribute of an HTML element, such as <code>id</code>, <code>class</code>, <code>src</code>, etc.
 ** '''Text Node:''' This represents the actual text within an HTML element
+** '''Comment Node:''' ?
 so '''"manipulating the DOM"''' means modifying or exploring this tree structure of the web page.
+<br>
+<br>
+===directly and indirectly manipulating the DOM===
+[[User:Zuhui/SI26/Peekaboo/Code to work 2#randomly removing, bringing words back function |example using DOM property and method to manipulate the contents in span elements]]<br>
+in this example, I used innerHTML, innerText, textContent to add a space in between the spans. but didn't work(maybe only half-worked).<br>
+because these properties deal with '''contents as strings''' rather than with the nodes themselves.<br>
+'''they don't directly interact with the DOM tree but instead replace the entire content of an element.'''<br>
+basically what it did was wiped out the old content, interprets the string, created new nods. that's why it looked like my spans were duplicating themselves.