Difference between revisions of "Traversing the DOM"
Jump to navigation
Jump to search
| Line 36: | Line 36: | ||
== Changing CSS == | == Changing CSS == | ||
'''NOTE: CSS style names and DOM Styles are a little Different. eg. css background color is background-color while DOM is backgorundColor''' | |||
var mystyle = document.querySelector('#myid'); | var mystyle = document.querySelector('#myid'); | ||
mystyle.style.backgroundColor = "red"; | mystyle.style.backgroundColor = "red"; | ||
==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Java Script|Category]]== | ==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Java Script|Category]]== | ||
Revision as of 21:34, 30 October 2016
Selecting Elements with the query selector
document.querySelector('h1');
document.querySelector('.classname'); // will return the 1st item with that class name
document.querySelectorAll('.classname'); // will return a array with all items with that class name
document.querySelectorAll(.classname').[0] // will select the first array item with that classname
document.querySelector('#idname');
Creating and Inserting Elements
This will append the text after the first li
var p = document.createElement('P');
p.textContent = "A new Paragraph";
p.style.fontSize = '17px';
var li= document.querySelector('li');
li.appendChild(p);
This will append the text after the second li
var p = document.createElement('P');
p.textContent = "A new Paragraph";
p.style.fontSize = '17px';
var li= document.querySelectorAll('li')[1];
li.appendChild(p);
HTML
<body>
<h1>Outwter</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</body>
Changing CSS
NOTE: CSS style names and DOM Styles are a little Different. eg. css background color is background-color while DOM is backgorundColor
var mystyle = document.querySelector('#myid');
mystyle.style.backgroundColor = "red";