When to use document.body... and when not to use body?

JavaScript
1

Hi,
If I wish to add a <p> tag, is it necessary to first get the body tag and then add append p to it? Or is the body tag already got?
I see that when using the getElementsByTagName you need to use body like this,

var blah = document.body.getElementsByTagName("h1");

But when doing it by id you don’t need body, like this,

var blah = document.getElementById("one");

So if I simply want to append a p to the body do I need to call the body. This doesn’t seem to make sense as I have to use body anyway. So I am sure this must be wrong,

var bod = document.body.getElementsByTagName("body"); // get the body tag
var para = document.createElement(p); //create a paragraph tag
var tex = document.createTextNode("This is a test"); //create a text node with text inside it
para.appendChild(tex); //append the text node to the paragraph
bod.appendChild(para); //append the paragraph to the body

Any thoughts on this would be appreciated,
Thanks,
Shane

2

Hi,
The
How Do I Access the DOM? example from MDN is what i am looking for.
Thanks,
Shane

3

Excellent, this work now.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>
            Handlers
        </title>
    </head>
    <body>
        <p>Type r, g or b.</p>
        <script>
                var button = document.querySelector("button");
                addEventListener("keydown", function(event) {
                    if (event.keyCode == 82) {//r is chardCode 82
                       var para = document.createElement("p");
                       var para_text = document.createTextNode("Big Head!");
                       para.appendChild(para_text);
                       document.body.appendChild(para);
                       document.body.style.background = "red";
                      }
                    else if (event.which == 71)//g is chardCode 71
                        document.body.style.background = "green";
                    else if (event.which == 66)//b is chardCode 66
                        document.body.style.background = "blue";
                    //event.preventDefault();
                });            
        </script>            
    </body>
</html>

Just trying silly things here to learn.
So the answer to the question is that I don’t need to get the body tag first.
Thanks,
Shane

4

Hi,

You don’t actually. Without works just as well.

var blah = document.getElementsByTagName("h1");

No.

var bod = document.body.getElementsByTagName("body"); // get the body tag
var para = document.createElement(p); //create a paragraph tag
var tex = document.createTextNode("This is a test"); //create a text node with text inside it
para.appendChild(tex); //append the text node to the paragraph
bod.appendChild(para); //append the paragraph to the body

This could be written as this:

var p = document.createElement(p);
p.innerHTML = "This is a test"
document.body.appendChild(p);

Regarding your final example, you could alter the code to make it a little more rreadable, thus:

function isValidKey(v){
  return v === 82 || v === 71 || v === 66;
}

function changeBackgroundColor(k){
  opts = {
    82: "red",
    71: "green",
    66: "blue"
  }

  document.body.style.background = opts[k];
}

document.addEventListener("keydown", function(e){
  if (isValidKey(e.keyCode)){
    changeBackgroundColor(e.which);
  }
});
5

Hi,
Sorry for taking so long to reply. Thanks for clarifying this.
Your code is a fantastic way of doping it, I certainly wouldn’t have thought of this.
Thanks again,
Shane

6

Hi,

No problem : )
Looking at this again, you could make it shorter:

  opts = {
    82: "red",
    71: "green",
    66: "blue"
  }

  document.addEventListener("keydown", function(e){
    if (opts[e.keyCode]){
      document.body.style.background = opts[e.which];
    }
  });
1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.