select html with native javascript

Question

I want to toggle a class to the html tag element. I've made it work with the body element but I cannot find the solution to also toggle a class to the html tag.

document.querySelector('[data-menu-mobile]').addEventListener('click', function(){
    document.body.classList.toggle('nav-main-mobile-open');
    document.html.classList.toggle('html-color-fill');
});

I know this seems to be wrong:

document.html.classList.toggle('html-color-fill');

What is the correct way to do this?

There is not document.html.

VtoCorleone
– VtoCorleone

2014-03-20 15:16:35 +00:00
Commented Mar 20, 2014 at 15:16 — VtoCorleone
– VtoCorleone, Commented Mar 20, 2014 at 15:16

pawel · Accepted Answer · 2014-03-20 15:22:04Z

2

There's no document.html object, to get to the root element you should use document.documentElement.

document.documentElement.classList.toggle('html-color-fill')

edited Mar 20, 2014 at 15:22

answered Mar 20, 2014 at 15:16

pawel

37.1k7 gold badges59 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Daniel Ramirez-Escudero Over a year ago

This is not html object because the document begins from the html tag downwards? For what reason is this? Just to understand better this answer. Thanks a lot!

pawel Over a year ago

You can use the DOM API with more than HTML documents (for example XML or SVG) which may have the root element named differently. document.documentElement is markup language-agnostic way to get the root element, while document.body is a HTML-specific addition to the DOM API.

Daniel Ramirez-Escudero Over a year ago

everything clear except language-agnostic, what do you mean with that?

pawel Over a year ago

document.html would be language-specific like document.body and would work only with HTML. document.documentElement is language-agnostic in the sense that it doesn't assume the name of the root element but will get it in whatever markup language that works with DOM API.

user2088127 · Accepted Answer · 2014-03-20 15:17:04Z

0

This should work:

var elements = document.getElementsByClassName("myclass");

//iterate through all found elements
Array.prototype.forEach.call(elements, function(element) {
   element.className = "html-color-fill";
   //or remove class with:
   //element.className = "";
});

answered Mar 20, 2014 at 15:17

user2088127

481 silver badge6 bronze badges

3 Comments

pawel Over a year ago

classList.add(), .remove() and .toggle() are the solution in modern browsers, the question was how to get the html element.

user2088127 Over a year ago

Thanks for clarification. I did not see any sense for setting class of html element.

Daniel Ramirez-Escudero Over a year ago

@pawel my project requires IE9+ and other modern browsers. So I think this will work perfectly, I'm just practising to not use jquery.

Collectives™ on Stack Overflow

select html with native javascript

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related