Thursday 7 April 2016

Query selectors in javascript

Here is the html code that will be used in the javascript on this page.

<article id="article1" class="my-custom-class">
    <h3>
        Title of the page goes here.
    </h3>
    <p>
        This is paragraph one.
    </p>
    <p class="special">
        This is paragraph two.
    </p>
    <p class="special">
        This is paragraph three.
    </p>
</article>

Here is the javascript code that uses the html code above.

//Query selectors
/* 
Use MDN, the Mozilla Developers Network to learn more about other functions and properties.
 */
var element = document.querySelector('article');
console.log(element);//prints on the console the complete article tag
var element = document.querySelector('#article1');
console.log(element);
//Getting only the first paragraph
var element = document.querySelector('.special');
console.log(element);
//Getting all the paragraphs in the document
var elements = document.querySelectorAll('.special');
console.log(elements);

No comments:

Post a Comment