There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply () below.
If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.
Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply () below!
Agree with a comment or answer? Like () to up-vote the contribution!
According to the list of properties, document does not have html as a property. I confirmed that document.html returns undefined and document.html.body raises TypeError.
I am trying to understand the different ways this approach to changing the DOM can be used.
document.body.innerHTML = '<h1>This is now the heading of the body element</h1>'
So the above code worked to change the whole body as per the exercise.
But then I tried:
document.h1.innerHTML = '<h1>Just the heading</h1>'
and
document.body.h1.innerHTML ='<h1>Just the heading</h1>'
and neither of these had any effect on the DOM, it seems, as nothing changed in the way the website displayed.
I know that there are other methods (explained later in the lesson), but I just want to understand how this approach works. Is it that you can only access direct children of document in this way? So only head and body?
document.body gives you the body element. (The .body is a special case, which does not work for most elements.)
But document.h1 does not give you the first h1 element (since .h1 in not a property nor method of the document object).
and document.body.h1 does not give you the first h1 element in the body (since .h1 in not a property nor method of the body object).
In the lessons coming up, you’ll see that you’ll be able to do
const h1 = document.getElementsByTagName('h1')[0]; // first h1 element
This is referred to as a global object which comes with its own global identifier.
Not really replying to this as using the example.
As much as the language supports a range of global objects it is definitely something to steer away from in all pursuits. Sure in simple demonstrations, but not in production code. We really need to draw the line away from the global namespace, unless it actually proves convenient and effective. That’s a five per-cent gray zone left there for experimenters.
If you want a variable called ‘body’, then declare it and break away from the global object.
const body = document.querySelector('body')
We’ve effectively choked off the global variable by shadowing it. Good move, imho.
HTML that is taught by, ‘here is how to do this’ paradigm will be boring. When it is taught by, ‘here is what you can do’ paradigm, the sky is the limit. We actually DO control the DOM, and that even includes the markup. We can create our own HTML elements and style them. You won’t see this talked about much because it has no real benefit to the standards that have evolved. It is still entirely possible to take things in a totally new direction. That’s how elastic HTML really is.
Apart from the obvious that querySelector only selects the first case of h1, and the array index of getElementsByTagName can target any. But I’m wondering why ‘selector’ in one and ‘tag’ in another. You also mention ‘css selector’, which makes me thing Tag means html tag (which happens to be identical with the css selector in this case).
Apart from targeting one vs targeting any, is there another difference which explains the different names of ‘selector’ and ‘tag’ here?
document.querySelector can be used for more than just selecting the first element that has that tag name:
document.querySelector('h1') selects the first h1 element document.querySelector('.green') selects the first element that has class green document.querySelector('#example') selects the first element that has id example
More complicated css selectors also work.
If you wanted to something similar to an array of elements that matches the selector rather than just the first one,
you may use something like document.querySelectorAll('.green')
to get an “array” of all the elements that have class green
Appropriate that you used ‘finger quotes’ since it is not an array, per se, but an array-like structure called a collection. We can however access each element by index or scan the collection with .forEach if we first call on Array.from(collection) to parse out a shallow array.
If any of this is incorrect, then please do intervene with the correction.
) below.
) to up-vote the contribution!