HTML5 code that Select items in the DOM

You review:

• how to modify the document object model dynamically, using JavaScript.
• how to implement video and audio in webpages.
• how to render graphics dynamically.

Adding or modifying HTML elements

JavaScript provides the toolkit you need to write code that interacts with webpage elements after they are already rendered into the browser.

Document Object Model

The Document Object Model (DOM) is a representation of the structure of your HTML page that you can interact with programmatically.

The DOM’s application programming interface (API) is exposed as objects with properties and methods, enabling you to write JavaScript code to interact with the HTML elements.

You can add, modify elements to change their behavior, layout, appearance, and content.

Selecting items in the DOM

To manipulate the DOM, you need to know how to access it and to obtain references to the elements you want to manipulate. You can access DOM elements through a global object provided by the browser, called document.

Native methods used for selecting elements in the DOM:

Using getElementById Method

The getElementById method returns the element in the page that matches the specific ID value you pass to it. It returns null if no element on the page has the specified ID.

The following code reference the <div> element with the ID outerDiv:

<script type="text/javascript">
    var byId = function () {
        var element = document.getElementById("outerDiv");
        alert(element.innerHTML);
    }
</script>

Using getElementByTagName Method

The getElementById method is great when you know the ID of a specific element in the page, but in other cases you might want to do something to all the elements of a particular type-the getElementsByTagName method is more appropriate.

The following code to get a reference to all the <p> elements:

<script type="text/javascript">
    var tag = function () {
        var paragraphs = document.getElementsByTagName("p");
        alert("there are " + paragraphs.length + " Paragraphs in the  DOM");
    }
</script>

Using getElementByClassName Method

The getElementsByClassName method to get all elements of the same CSS class. This is useful when you have many elements with the same style but perhaps want to modify them at run time. This method returns a NodeList.

<script type="text/javascript">
    var clsName = function () {
        var paragraphs = document.getElementsByClassName("subPara");
        alert("<p> elements with class subPara: " + paragraphs.length);
    }
</script>

Using querySelector & querySelectorAll Methods

The querySelector method returns the first element it finds that matches the selector criteria passed to it, whereas the querySelectorAll method returns all elements that match the selector criteria passed in.

To find all the <p> elements on a page, you can use this syntax:

<script type="text/javascript">
    var selectAll = function () {
        var paragraphs = document.querySelectorAll("p");
        alert("Selected all <p> with querySelectorAll");
    }
</script>

To find an element by its unique ID, you can use this syntax:

<script type="text/javascript">
    var selector = function () {
        var paragraphs = document.querySelector("#outerDiv");
        alert("Selected the DOM element with unique ID=outerdiv");
    }
</script>