div元素内的childNode

Question

I'm learning the JavaScript right now and I'm writing functions to change the style of the each paragraph tag and the font-style tag emphasis(em) and bold(b) which is inside the <div> element. Here is my program .

<div id = "sampDiv2">
<p>Lorem ipsum dolor sit amet, <em>consectetur adipiscing</em> elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, <b>consectetur adipiscing</b> elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
<em>Excepteur sint</em> occaecat cupidatat non proident, <b>sunt in culpa</b> qui 
officia deserunt mollit anim id est laborum.</p>
</div>

<script>
var pElements = document.getElementsByTagName('p');
pElements[1].style.backgroundColor = "#EFDECD";

document.childNodes[1].style.backgroundColor = "#FAEBD7";

var sampDiv2 = document.getElementById('sampDiv2');

sampDiv2.childNodes[0].style.backgroundColor = "#F0FFFF";
</script>

what I'm trying is to change the color of the <p> tags used inside the div element. But when I run the output, the console says sampDiv2.childNodes[0].style is undefined

Answer 1

The childNodes includes text nodes also, so it's better to use children instead which returns html elements.

 <div id="sampDiv2"> <p>Lorem ipsum dolor sit amet, <em>consectetur adipiscing</em> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, <b>consectetur adipiscing</b> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <em>Excepteur sint</em> occaecat cupidatat non proident, <b>sunt in culpa</b> qui officia deserunt mollit anim id est laborum.</p> </div> <script> var pElements = document.getElementsByTagName('p'); pElements[1].style.backgroundColor = "#EFDECD"; document.body.children[1].style.backgroundColor = "#FAEBD7"; var sampDiv2 = document.getElementById('sampDiv2'); sampDiv2.children[0].style.backgroundColor = "#F0FFFF"; </script> 

Answer 2

You can do what you want with css.

<style>
p    {background-color:#EFDECD;}
em    {color: red;}
b    {color: darkblue;}
</style>

With this all <p> element will have that background colors, em elements will be red and bold elements will be dark blue. Learn more about css to know more.

By the way, the code above works if put in the html file, but it's recommended to put in in a separate css file (with <style> removed) and use that css file in your html file.

If you want to easily select elements, you can do this with jQuery :

//Targets all descendendants of the element with id #sampDiv2 that are 'p' tags
$("#sampDiv2 p").css({"background-color": "#F0FFFF"});

You can also get those elements in pure javascript using document.querySelectorAll :

//nodes is an array with all the elements in it
var nodes = document.querySelectorAll("#sampDiv2 p");

//To change the first one, but then document.querySelector() would have been enough
nodes[0].style.backgroundColor = "#F0FFFF";

//To change all
for (let node of nodes) {
    node.style.backgroundColor = "#F0FFFF";
}

//Alternative in case above is not yet supported:
nodes.forEach(function(node) {
    node.style.backgroundColor = "#F0FFFF";
});

---

Even then, I'd recommend changing the css class of your elements (with the class containing all the css info) rather than editing the style directly.

//jQuery way
$("#sampDiv2 p").addClass("abc");

//alternative
for (let node of document.querySelectorAll("#sampDiv2 p")) {
    node.classList.add("abc");
}

In the css:

.abc {
    /* css */
}

Or you can change the class of your div and do in the .css:

.myDivClass p {
   /* css for p tags under those div */
}