Scribd
Upload
9 views

Web Programming 2 Weektwonew_034557

Uploaded by

KIM Denzel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

Web Programming 2 Weektwonew_034557

Uploaded by

KIM Denzel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

Web programming III

Software engineering, Digital marketing,


network and security & Web and graphics
designs.

By VERNYUY BASILE
TIMELINE/Week 2
Accessing Elements with JS DOM
1. Access 2. Access elements 3. Access elements
elements by ID by tag name by class name

4. Access elements
by CSS selectors

VERNYUY BASILE
Adding and Removing Elements

1. Append child 2. Remove child


elements to elements from an
another element element

VERNYUY BASILE
INTRODUCTION

VERNYUY BASILE
Access elements by ID
In JavaScript, you can efficiently select HTML elements by their unique
ID attribute using the getElementById() method. This method returns a
single element object or null if no element with the specified ID exists.

By effectively using getElementById(), you can efficiently manipulate and


interact with specific HTML elements based on their unique IDs.

Example
var element = document.getElementById("elementId");

VERNYUY BASILE
Access elements tag name
In JavaScript, you can efficiently select HTML elements based on their
tag name using the getElementsByTagName() method. This method
returns a live HTMLCollection object containing all elements with the
specified tag name within the document.

By effectively using getElementsByTagName(), you can efficiently


manipulate and interact with groups of HTML elements based on their
tag names.

Example
var elements = document.getElementsByTagName("tagName");
VERNYUY BASILE
Access elements class name

In JavaScript, you can efficiently select HTML elements based on their


class name using the getElementsByClassName() method. This method
returns a live HTMLCollection object containing all elements with the
specified class name within the document.

Example
var elements = document.getElementsByClassName("className");

VERNYUY BASILE
Access elements with CSS selectors (querySelector,
querySelectorAll)
In JavaScript, you can efficiently select HTML elements based on their
CSS selectors using the querySelector() and querySelectorAll()
methods. These methods provide a powerful and flexible way to target
elements based on various criteria, such as tag name, class name, ID,
attributes, and more.

1. querySelector():
 Returns the first element that matches the specified CSS selector.
 If no match is found, returns null.
Example
var element = document.querySelector("cssSelector");
VERNYUY BASILE
Examples
var element = document.querySelector("cssSelector");

In this example:
 document.querySelector("#myHeading") selects the element with the
ID "myHeading".
 document.querySelector(".important") selects the first element with
the class "important".

VERNYUY BASILE
Examples

<h1 id="myHeading" class="important">Important Heading</h1>


<p class="important">Important Paragraph</p>
<p>Regular Paragraph</p>

var heading = document.querySelector("#myHeading");


var importantParagraph = document.querySelector(".important");

heading.textContent = "Modified Heading";


importantParagraph.style.color = "red";

VERNYUY BASILE
2. querySelectorAll():
 Returns a live HTMLCollection containing all elements that match the
specified CSS selector.
 If no match is found, returns an empty HTMLCollection.

Example
var elements = document.querySelectorAll("cssSelector");

Key Points:
i. CSS selectors provide a powerful and flexible way to target
elements based on various criteria.
ii. querySelector() returns the first matching element, while
querySelectorAll() returns a collection of matching elements.
VERNYUY BASILE
Example

<h1 class="important">Important Heading</h1>


<p class="important">Important Paragraph</p>
<p>Regular Paragraph</p>

var importantElements = document.querySelectorAll(".important");

for (var i = 0; i < importantElements.length; i++) {


importantElements[i].style.color = "red";
}

VERNYUY BASILE
Append child elements to another element

In JavaScript, you can efficiently append child elements to another


element using the appendChild() method. This method adds the
specified child element to the end of the parent element's child list.

Example
parentElement.appendChild(childElement);

Explanation:
 parentElement: The parent element to which you want to append the
child.
 childElement: The child element you want to append.
VERNYUY BASILE
Example
<ul id="myList"></ul>

var list = document.getElementById("myList");

var li1 = document.createElement("li");


li1.textContent = "Item 1";
list.appendChild(li1);

var li2 = document.createElement("li");


li2.textContent = "Item 2";
list.appendChild(li2);
VERNYUY BASILE
Remove child element from an element

In JavaScript, you can efficiently remove child elements from another


element using the removeChild() method. This method removes the
specified child element from the parent element's child list.

Example
parentElement.removeChild(childElement);

Explanation:
•parentElement: The parent element from which you want to remove
the child.
•childElement: The child element you want to remove.
VERNYUY BASILE
Example

<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

var list = document.getElementById("myList");


var liToRemove = list.children[1];

list.removeChild(liToRemove);

VERNYUY BASILE
Assignments
Create 4 html elements and access them by Id, tag
name, class name and query selectors. And write js
code to remove and append child elements to the
elements created above. When created add some
dynamic content to all the elements.

VERNYUY BASILE
End

You might also like