1.
Methods to Access DOM Elements
The DOM (Document Object Model) lets us interact with HTML using JavaScript. Here are common ways
to get elements:
a. getElementById() – Gets an element with a specific ID.
<p id="myPara">Hello</p>
<script>
let para = [Link]("myPara");
[Link]([Link]);
</script>
b. getElementsByClassName() – Gets all elements with a certain class.
<p class="text">Hi</p>
<p class="text">Hello</p>
<script>
let items = [Link]("text");
[Link](items[0].textContent);
</script>
c. getElementsByTagName() – Gets elements by their tag name like <p>, <div>, etc.
<p>First</p>
<p>Second</p>
<script>
let paras = [Link]("p");
[Link](paras[1].textContent);
</script>
d. querySelector() – Gets the first element that matches a CSS selector.
<p class="text">Welcome</p>
<script>
let first = [Link](".text");
[Link]([Link]);
</script>
e. querySelectorAll() – Gets all elements matching a CSS selector.
<p class="text">One</p>
<p class="text">Two</p>
<script>
let all = [Link](".text");
[Link](p => [Link]([Link]));
</script>
2. Event Propagation
Event propagation is how events (like clicks) move through elements:
Capturing Phase: Goes from top (outer) to target.
Target Phase: Hits the clicked element.
Bubbling Phase: Bubbles back up to top.
Example:
<div onclick="alert('DIV clicked')" style="padding:30px; background:lightblue">
<button onclick="alert('BUTTON clicked')">Click Me</button>
</div>
If you click the button, both alerts show — first the button, then the div (bubbling).
You can stop bubbling using:
[Link]();
3. Inheritance in the DOM
a. Explanation:
Inheritance in the DOM means that elements can inherit CSS styles from their parent or defined class. If
a child element doesn’t have a specific style, it gets it from the parent or class.
b. HTML Code Analysis:
<h2>A Look at Inheritance</h2>
<h1 class='good'>HNDSWD Yield to advice</h1>
<p class='good'>HNDSWDI Students did well</p>
<h3>The results were impressive</h3>
<p class='wow'>A Good performance!</p>
<p class='good'>Yes it was!!</p>
<p>A New Beginning!</p>
.good class sets: color: skyblue, font-family: Arial, font-style: italic, text-align: left
.wow class sets: color: green
Now let's see what each element gets:
<h1 class='good'>: Inherits all .good styles.
<h2>: No class, uses browser default styles.
<h3>: No class, also uses browser default.
<p class='good'>: Gets all .good styles.
<p class='wow'>: Only gets color: green; other styles default.
<p class='good'>: Again, gets all .good styles.
<p> (no class): Uses browser default.
Let me know if you'd like a visual diagram for event propagation or inheritance.