Community session FSR060523 today session

1-How can we use query selectors to select elements with a specific class name in JavaScript?

1 Like

let para=document.querySelectorAll(‘p img’);
let para=document.querySelectorAll(‘p+img’);
let para=document.querySelectorAll(‘p>img’);
let para=document.querySelectorAll(‘p~img’);

1 Like

In JavaScript, we can use the querySelectorAll method with a class selector to select elements with a specific class name. Here’s how we can do it:

// Select all elements with the class "example"
var elements = document.querySelectorAll(".example");

// Loop through the selected elements
for (var i = 0; i < elements.length; i++) {
  // Do something with each selected element
  console.log(elements[i]);
}

In the above code, querySelectorAll selects all elements that have the class name “example”. The selector “.example” is used to target elements with the class “example”. The returned elements are stored in the elements variable, which can be used to perform operations on the selected elements.

we can replace ".example" with the desired class name we want to select. If we want to select elements with multiple class names, wecan use the class selector with multiple classes like “.class1.class2”.

2 Likes
let x = document.queryselectorAll(" div > img")
let x = document.queryselectorAll(" p + p")
let x = document.queryselectorAll(" div~ img")
let x = document.queryselectorAll(" .class #id")

1 Like

2-How can I attach an event listener to a specific element in JavaScript?

 <div class="section"  onmouseover="fun1();"  onmouseout="fun2();"></div>
```When a user clicks the mouse, a web page has loaded, an image has been loaded, the mouse moves over an element, an input field is changed, an HTML form is submitted, a user strokes a key
1 Like
  • bill
  • sas
  • david
  • bal
</ul>

<script>
    document.querySelectorAll('#nam li')
    document.querySelectorAll('#nam+li')

    document.querySelectorAll('#nam~li')
    document.querySelectorAll('#nam>li')

</script>
1 Like
<body>
    <script>
        function onKeyUp() {
           let x=document.getElementById('scan').value;
           let k=x.toUpperCase();
           document.getElementById('scan').value=k;
        }
    </script>
    <textarea rows="10" cols="70" id="scan" onkeyup="onKeyUp()">
    </textarea>
</body>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Style OF Elements</title>
    <style>
        p{
            width: 70%;
            height: auto;
            margin: 20px auto;
            border: 5px solid black;
            font-size: 24px;
        }
        img {
            width: 30%;
        }
    </style>
</head>

<body>
    <script>
        function changeWH() {
            let para=document.querySelectorAll('p img');
            para[0].style.backgroundColor='blue';
            para[0].style.color='white';
            para[0].remove();
        }
        function comeImage(){
            let come=document.createElement('img');
            come.src='https://wallpaperaccess.com/full/3670929.png';
            document.getElementsByTagName('p')[0].appendChild(come);
        }
    </script>
    <p onmouseover="changeWH()" onmouseout="comeImage()">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit rem dolorum error necessitatibus distinctio
        illum unde perferendis quod, itaque sapiente dolor modi iste a voluptas! Atque quod dolorum maiores alias,
        tempore quaerat laudantium sit doloremque inventore enim, molestiae delectus amet.
        <img src="https://wallpaperaccess.com/full/3670929.png"/>
    </p>
    <button onclick="changeWH()">ChangeWidthHeight</button>
    <button onclick="comeImage()">Come</button>
</body>

</html>
1 Like

How can I retrieve all elements with a specific tag name and a specific class name using JavaScript?

In JavaScript, We can attach an event listener to a specific element using the addEventListener method. Here’s an example:

// Select the element we want to attach the event listener to
var element = document.getElementById("myElement");

// Attach an event listener to the element
element.addEventListener("click", function() {
  // Code to be executed when the event is triggered
  console.log("Element clicked!");
});

In the above code, getElementById is used to select the element with the ID “myElement”. The addEventListener method is then called on the selected element, specifying the event type (“click”) and a callback function that will be executed when the event is triggered.

We can replace "click" with the desired event type, such as "mouseover", "keydown", or "submit", depending on the event you want to listen for. The callback function can contain any code that you want to execute when the event occurs.

By attaching an event listener to a specific element, We can listen for and respond to various events, such as mouse clicks, key presses, form submissions, and more.



1. Click Event:
```javascript
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
  console.log("Button clicked!");
});
  1. Mouseover Event:
var element = document.getElementById("myElement");
element.addEventListener("mouseover", function() {
  console.log("Mouse over element!");
});
  1. Keydown Event:
var input = document.getElementById("myInput");
input.addEventListener("keydown", function(event) {
  console.log("Key pressed: " + event.key);
});
  1. Submit Event (for a form):
var form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
  event.preventDefault(); // Prevent form submission
  console.log("Form submitted!");
});

In each example, we first select the desired element using getElementById or another appropriate method. Then, we use addEventListener to attach an event listener to the element, specifying the event type as the first parameter and the callback function as the second parameter.

The callback function is executed when the specified event occurs on the element. It can contain any code you want to run in response to the event. We can access event-specific information through the event object, such as the clicked button, pressed key, or form data.

2 Likes
/ function fun5(){
//     let m = document.getElementsByClassName("lmn");
//     for(let o=0;o<m.length;o++){
//         m[o].className="opq";
//     }
// }
 var bold = document.getElementById("div_text").innerHTML;
// var bold = document.getElementById("div_text").innerText;
// document.write(bold);
1 Like

document.getElementById(‘scan’).value
document.getElementsByClassName(‘scan’).value=k;
document.getElementsByTagName(‘p’)[indexing].value=k;
document.getElementById(‘scan’);
document.getElementsByClassName(‘scan’).innerText=k;
document.getElementsByTagName(‘p’)[indexing].innerHTML=k;

1 Like
To retrieve all elements with a specific tag name and a specific class name in JavaScript, we can use the `querySelectorAll` method along with a combination of tag and class selectors.

Here's an example of how you can do it:

```javascript
var elements = document.querySelectorAll("tagname.classname");

In the above code, replace “tagname” with the desired HTML tag name (e.g., “div”, “p”, “span”) and “classname” with the specific class name you want to select.

For instance, if you want to retrieve all <div> elements with the class name “my-class”, you would use:

var divElements = document.querySelectorAll("div.my-class");

This will return a NodeList containing all matching elements. You can then iterate over the NodeList to access and work with each individual element.

Here’s an example of iterating over the NodeList and accessing the properties of each element:

divElements.forEach(function(element) {
  console.log(element.textContent); // Access the text content of each div element
  console.log(element.className); // Access the class name of each div element
  // Perform other operations on each div element
});

By combining the tag name and class name selectors in the querySelectorAll method, you can target specific elements with precision and perform operations on them as needed.

Note that querySelectorAll returns a static NodeList, which means it won’t automatically update if new elements matching the selector are added or removed from the DOM. If you need a dynamic collection that updates as the DOM changes, you can consider using live collections or libraries like jQuery.

2 Likes
let x = document.queryselectorAll(" div > img")
let x = document.queryselectorAll(" p + p")
let x = document.queryselectorAll(" div~ img")
let x = document.queryselectorAll(" .class #id")
1 Like