Develop Reference

Select div with a text inside in JS

I want to modify a div with a special text inside like this.
<div>
<p>
A global issue
</p>
</div>
How can I get it in JS without using id or class ? And only the div with the text "A global issue".
Is there a way to do it?

To target the div and set it to display: none you can run either:
// Pure JS
document.querySelector("div p").style.display = "none"
// w/jQuery
$('div p').hide();
If there's more then one div p tags in your HTML, you can also search by text using the following:
$('div p:contains("A global issue")').css('display', 'none');

If you want to use simple javascript solution, see snippet below
First, get all divs from page
Second, store your search text in a variable
Third, loop through all divs and find the one containing your text, then you can do whatever you want with it. I added a backgroundColor red to it
var divs = document.querySelectorAll("div");
var myText = "A global issue";
var i;
for (i = 0; i < divs.length; i++) {
if (divs[i].textContent.indexOf(myText) > 0 ) {
divs[i].style.backgroundColor = "red";
}
}
<div>
<p>
A global issue
</p>
<p>
More text here
</p>
</div>
<div>
<p>
Not a good text
</p>
</div>

You can use jquery:
$('div:contains("A global issue")').css('background-color', 'red');
<div>A global issue</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

let i=5;
let divs =Array.from( document.querySelectorAll('div > p')); // it returns array
divs[i].style.display= "none";
Edit:
for(let i=0;i<divs.length;i++){ if(divs[i].textContent==="some text"){ divs[i].style.display="none"; } }
if you want to change parent node do divs[i].parentNode.style.display="none"

How to change the style of a CSS class with javascript?

for example, I have some Html code like this
<div class="abc"></div>
with a css stylesheet like this
.abc{display:none}
Now I would like to change the style of css class abc to display:block, how should I do it?

Would you like to change really property and value of the CSS class or just change class applied to your HTML element ?
In this case, with jQuery for example, you just have to do :
$('div').removeClass('abc').addClass('cba');
This will remove the 'abc' class currently attached to your div element and set the 'cba' class for this element.
Your 'cba' class is defined as :
.cba{display: block}

Just use simple action below
$(".abc").show(); // to display block on css
$(".abc").hide(); // to display none on css
Here full code to implement your question
<!--html code-->
<div class="abc">Hello World</div>
<!--stlyling-->
<style>
.abc{display:none}
</style>
<!--script-->
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
$(".abc").show();
});
</script>
Hope it help

For all the people saying document.getElementsByClassName('abc').style.display = 'block'; works...
How it should be:
let e = document.getElementsByClassName('abc');
for(i = 0; i < e.length; i++){
e[i].style.display = 'block';
}
.abc{display:none;}
<div class="abc">HI!</div>
<div class="abc">You can see me!</div>
document.getElementsByClassName('abc').style.display = 'block'; method:
document.getElementsByClassName('abc').style.display = 'block';
.abc{display: none;}
<div class="abc">HI!</div>
<div class="abc">You can see me!</div>

Find your element in the DOM and use el.classList.remove("abc") to remove the .abc class.
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
How to find the element?
https://www.w3schools.com/js/js_htmldom_elements.asp

import jquery library using
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Use simple jquery to hide or show
$(".abc").hide();//for display none
$(".abc").show();//for display block

IF you have one '.abc' class :
document.getElementsByClassName("abc")[0].style.display = "block";
IF you have more of one '.abc' class :
var len = document.getElementsByClassName('abc');
for(i = 0; i < len.length; i++){
len[i].style.display = 'block';
}

'href' Not Showing Output on Click

Im trying to have a href link expand/display extra text when clicked however when I click it nothing happens.
When I run the html code I can click on the link but it does not show the text for some reason.
Any idea why?
Heres the code:
<html>
click to expand
<div id="divID" style="display: none;">this is expanded</div>
</html>
I'm trying to keep the code as short as possible as the above code will have to be repeated hundreds of times for each link.

Assuming you're using jQuery, you are using the CSS selector incorrectly. Your line should be this:
click to expand
The # in #divID represents any element with an id of divID, whereas just using divID will search for divID tags (something like <divID></divID>)
See here for more documentation on the ID Selector and here's a list of all the CSS selectors you can use, including the Element Selector for you to understand why your previous code didn't work.
You can also combine CSS selectors to narrow your selection in the future, although it's not much necessary with an ID selector:
click to expand
And if you absolutely insist on not using jQuery:
click to expand
or breaking it out into its own function:
<script>
function toggleElementById(id) {
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
}
</script>
click to expand

Add this to your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Then:
$('#divID').toggle();

I see you're using jQuery, right? So I wrote your answer in jQuery..
$('.toggle').click(function () {
var selected = $(this).attr('href');
$('.expandable'+selected).toggle();
});
Check out the jsfiddle
If you're not using jQuery than here is the javascript version (html changed).
var expandable = document.getElementsByClassName("expandable");
for (i = 0; i < expandable.length; ++i) {
expandable[i].setAttribute('style','display: none;');
}
var toggle = document.getElementsByClassName("toggle");
for (i = 0; i < toggle.length; ++i) {
toggle[i].setAttribute('onclick','toggler(this)');
}
function toggler(obj) {
var id = obj.dataset.toggle,
el = document.getElementById(id);
el.style.display = (el.style.display != 'none' ? 'none' : '');
}
Check out the jsfiddle

Hide div by class id

If I have
<div id="ad1" class="ad">
and
<div id="ad2" class="ad">
how can I hide both by hiding all divs with class ad
I tried
document.getElementsByClassName(ad).style.visibility="hidden";
but only this works
function hidestuff(boxid){
document.getElementById(boxid).style.visibility="hidden";
}

As Matt Ball's clue left, you need to iterate through the results of your getElementsByClassName result.
Try something along the lines of:
var divsToHide = document.getElementsByClassName("ad");
for(var i = 0; i < divsToHide.length; i++)
{
divsToHide[i].style.visibility="hidden";
}

use jquery .hide()
jsfiddle demo
$('.ad').hide();

$('.divClassName').hide();
This will solve your problem.
In your case it will be like below.
$('.ad').hide();
This will hide all the elements with class name 'ad'.

To make the content visible which is inside iframe - pls try below:
var frame = document.getElementById("chatFeed");
var msg2 =frame.contentDocument.getElementsByClassName("publisherWrapper");
for (i = 0; i < msg2.length; i++) {
msg2[i].style.visibility="visible";
}

Hide H1 Element using JavaScript

I want to hide the <h1> element using plain javascript, not jQuery, without adding id="whatever" or class="whatever" to the tag. Is this possible?
Why can't I just add id="whatever" to the tag?
I'm using a UIButton in xCode that when clicked, it injects javascript into a UIWebView. Inside that UIWebView is a H1 element that is on a website that I do not have access to to add <h1 id="whatever">. I hope it makes sense.

document.getElementsByTagName('h1')[0].style.display = 'none';

You can use getElementsByTagName method:
var h = context.getElementsByTagName('h1');
for (var i = h.length; i--; ) {
h[i].style.display = 'none';
}
Where context is document or more specific parent node you want to search your headers within.
However there is better solution. You could add specific class to some parent node and hide child headers with CSS:
.without-headers h1 {display: none;}

Use getElementsByTagName to hide the first h1 on your page:
document.getElementsByTagName("h1")[0].style.display = "none";
// ^ index 0, so that's the first `h` that's found.
Or to hide them all:
var headers = document.getElementsByTagName("h1");
for (var i = 0, l = headers.length; i < l; i++; ) {
headers[i].style.display = "none";
}
Or even better yet, if you can modify the CSS:
h1{
display:none;
}
For the JavaScript solutions, please keep in mind that they will only work when the DOM has been loaded.
Add a domready event listener, like this:
window.addEvent('domready', function() {
// modify your DOM here.
});

you can use getElementsByTagName
document.getElementsByTagName("h1")
But it will access all h1 elements, so to be more specific access it by index like this
document.getElementsByTagName("h1")[0].style.display = "none";

just small change in dfsq's code
var h = document.getElementsByTagName('h1');
for (var i =0; i<h.length; i++) {
document.getElementsByTagName('h1').item(i).style.display = 'none';
}