This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 4 years ago.
I am new in javascript and I am trying to change the opacity of a div and I don't know how to do it, and I didn't find anything online.
here is my code so far:
Javascript
function close_images(){
document.getElementsByClassName("modificar_imagen").style.opacity="0";
}
HTML
<div class="modificar_imagen">
<div class="close1" onclick="close_images()"><img src="img/icons/close.png" alt="close"></div>
<div class="contenido">
<div class="grid">
<div class="image_user"><img src="img/user1.jpg"></div>
<div class="image_user"><img src="img/user1.jpg"></div>
</div>
</div>
</div>
document.getElementsByClassName("modificar_imagen") retrieves a HTMLCollection. It would be better to use document.querySelectorAll() so that you can use the forEach() method to iterate over the image collection:
document.querySelectorAll(".modificar_imagen").forEach(el=>el.style.opacity="0");
That should do it.
function close_images(){
document.querySelectorAll(".modificar_imagen").forEach(el=>el.style.opacity="0");
}
close_images()
<div class="modificar_imagen">
<div class="close1" onclick="close_images()"><img src="img/icons/close.png" alt="close"></div>
<div class="contenido">
<div class="grid">
<div class="image_user"><img src="img/user1.jpg"></div>
<div class="image_user"><img src="img/user1.jpg"></div>
</div>
</div>
</div>
Related
This question already has answers here:
Why does `childNodes` return a number larger than I expect?
(6 answers)
Best way to get child nodes
(5 answers)
Using querySelectorAll to retrieve direct children
(14 answers)
Finding child element of parent with JavaScript
(5 answers)
Closed 3 months ago.
So I'm trying to select 3 divs in my parent element. With my current code the result is I get 162 nodeLists back, instead of just the 3 main divs in that parent element.
The page code looks like this (simplified):
var parent = document.querySelector('.parent');
var wantedChildren = parent.querySelectorAll('div');
console.log(wantedChildren);
<div class="parent">
<div class="wantedChild">
<div class="unwantedChild">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="unwantedChild"></div>
</div>
<div class="wantedChild">
<div class="unwantedChild"></div>
<div class="unwantedChild"></div>
</div>
<div class="wantedChild">
<div class="unwantedChild"></div>
<div class="unwantedChild"></div>
</div>
</div>
So the divs are just examples. The entire code on the page is way bigger.
I just want those 3 divs.
Does anybody know how to do this?
var wantedChildren = parent.children;
https://developer.mozilla.org/en-US/docs/Web/API/Element/children
You can use direct child selector
const wantedChildren = document.querySelectorAll('.parent > div');
console.log(wantedChildren);
<div class="parent">
<div class="wantedChild">
<div class="unwantedChild">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="unwantedChild"></div>
</div>
<div class="wantedChild">
<div class="unwantedChild"></div>
<div class="unwantedChild"></div>
</div>
<div class="wantedChild">
<div class="unwantedChild"></div>
<div class="unwantedChild"></div>
</div>
</div>
This question already has answers here:
RegEx match open tags except XHTML self-contained tags
(35 answers)
Closed 3 years ago.
I have to match every element that has an attribute 'class'='row' in order to use it as separator in javascript .split() method. How can I archive this with regular expressions? In the following string <div class="row" tabindex="0"> should be matched.
<div class="row" tabindex="0"><div class="cell">rect</div><div class="cell">A</div><div class="cell">0</div><div class="cell">0</div><div class="cell">10</div><div class="cell">10</div></div><div class="row" tabindex="0"><div class="cell">rect</div></div>
Just use jQuery and save yourself the headache.
let html = $(` <div class="row" tabindex="0">
<div class="cell">rect</div>
<div class="cell">A</div>
<div class="cell">0</div>
<div class="cell">0</div>
<div class="cell">10</div>
<div class="cell">10</div>
</div>
<div class="row" tabindex="0">
<div class="cell">rect</div>
</div>`);
let rows = html.filter('.row');
Then if you need the raw HTML string of a specific row:
let row1HTML = rows[0].innerHTML;
This question already has answers here:
How to select last child element in jQuery?
(6 answers)
Closed 5 years ago.
<div class="group-box">
<p>test1</p>
<div class="group-box">
<p>test2</p>
<div class="group-box">
<p>test3</p>
</div>
</div>
</div>
i want to get last $('.group-box')
how to find this?
use this
var last = $(".group-box:last");
you will get the last child
and checkout these answers
How to select last child element in jQuery?
select deepest child in jQuery
alert($('.group-box:last').text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="group-box">
<p>test1</p>
<div class="group-box">
<p>test2</p>
<div class="group-box">
<p>test3</p>
</div>
</div>
</div>
$( ".group-box:last-child" )
selector for last child/element
This question already has answers here:
Select elements by attribute
(17 answers)
Closed 6 years ago.
i have a situation in my page i don't have any clue other than this 2 clue to target
<div itemscope>
some <html>
........
</div>
how can i target div having itemscope i,e <div itemscope>
suppose i have structure like this
<div itemscope>
<a hrfe="http://www.a.com">a.com</a>
</div>
<div itemscope type="tang">
<a hrfe="http://www.b.com">b.com</a>
</div>
<div>
<a hrfe="http://www.c.com">c.com</a>
</div>
<div>
<a hrfe="http://www.d.com">d.com</a>
</div>
PLEASE SUGGEST ME WHAT THIS KIND OF SELECTOR IS CALLED SO THAT I CAN SEARCH IT ON STACKOVERFLOW
var allDivWith_itemscope = $('div[i don"t know what else]');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div itemscope>
<a hrfe="http://www.a.com">a.com</a>
</div>
<div itemscope type="tang">
<a hrfe="http://www.b.com">b.com</a>
</div>
<div>
<a hrfe="http://www.c.com">c.com</a>
</div>
<div>
<a hrfe="http://www.d.com">d.com</a>
</div>
Well there are two things i want to mention:
You have a typo with href attribute.
You should use data-* prefix for custom attributes.
So, on basis of these you can change to this:
<div data-itemscope>
Now in js/jquery/css you can do this:
// css
div[data-itemscope]{
properties:values;
}
// javascript
document.querySelector('div[data-itemscope]')
//jquery
$('div[data-itemscope]')
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 2 years ago.
I am trying to change the text of h1 via using following code
document.getElementById("wpbody-content").getElementsByClassName("wrap").getElementsByTagName('h1')[0].innerHTML = 'Application Forms';
Here is the HTML code
<div id="wpbody-content">
<div class="wrap">
<h1>Text</h1>
</div>
<div class="clear"></div></div>
But it shows me following error
TypeError: document.getElementById(...).getElementsByClassName(...).getElementsByTagName is not a function
the getElementsByClassName() method returns an array of elements. You need to refer to the first wrap element in the array, just like you are correctly doing for the h1 elements.:
document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].getElementsByTagName('h1')[0].innerHTML = 'Application Forms';
Replace getElementsByClassName("wrap") by getElementsByClassName("wrap")[0]
document.getElementById("wpbody-content")
.getElementsByClassName("wrap")[0]
.getElementsByTagName('h1')[0].innerHTML = 'Application Forms';
<div id="wpbody-content">
<div class="wrap">
<h1>Text</h1>
</div>
<div class="clear"></div>
</div>
You can also use getElementsByTagName:
document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].getElementsByTagName('h1')[0].innerHTML = 'Application Forms';
<div id="wpbody-content">
<div class="wrap">
<h1>Text</h1>
</div>
<div class="clear"></div>
</div>
try jQuery as
$('#wpbody-content .wrap h1').text('Application Forms');