Javascript: Accessing and modifying DOM elements

This entry is part 24 of 27 in the series Javascript Tutorial

Below are some common methods that we use to access and modify HTML DOM elements.

Accessing HTML Elements

MethodDescription
document.getElementById()Finding an element by element id
document.getElementsByTagName()Finding elements by tag name
document.getElementsByClassName()Finding elements by class name
document.getElementsByName()Finding elements by name

Changing HTML Elements

MethodDescription
document.getElementById(id).innerHTML=Changing the inner HTML of an element
document.getElementById(id).attribute=Changing the attribute of an element
document.getElementById(id).style.attribute=Changing the style of an HTML element

Javascript: HTML DOM

This entry is part 23 of 27 in the series Javascript Tutorial

The Document Object Model (DOM) is a programming API for HTML.  It defines the logical structure of documents and the way a document is accessed and manipulated.

With the Document Object Model, programmers can create and build documents, navigate their structure, and add, modify, or delete elements and content.  And in this case, we are talking about modifying the content of the HTML elements.

In the earlier examples, there were 2 examples where we have used Javascript to find and access HTML elements.

  1. getElementById
  2. getElementsByName

We have used the above 2 methods to access a particular HTML element and make changes or updating the content in the element.

jQuery: Common DOM manipulation methods

This entry is part 14 of 33 in the series jQuery Tutorial

We look at some of the more commonly used DOM manipulation methods such as .attr() and .appendTo().

MethodDescription
.appendTo()Insert every element in the set of matched elements to the end of the target.
.attr()Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.
.addClass()Adds the specified class(es) to each of the set of matched elements.
.after()Insert content, specified by the parameter, after each element in the set of matched elements.
.append()Insert every element in the set of matched elements to the end of the target.
.before()Insert content, specified by the parameter, before each element in the set of matched elements.
.clone()Create a deep copy of the set of matched elements.
.css()Get the value of a style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

jQuery: 2 DOM manipulation examples

This entry is part 13 of 33 in the series jQuery Tutorial

We use 2 simple examples to illustrate DOM manipulation concepts.

.after()
Insert content, specified by the parameter, after each element in the set of matched elements.
<!doctype html>
<html>
<head>
    <title>after demo</title>
    <style>
        p {
            background: yellow;
        }
    </style>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
</head>
<body>

<p>I would like to say: </p>

<script>
    $('p').after('<b>Hello</b>');
</script>

</body>
</html>

Try The Code

From the example above, you could see that the Hello text is inserted after the <p> elements.

.append()
Insert content, specified by the parameter, to the end of each element in the set of matched elements.

Whereas, the text in the example below is inserted immediately after the elements using append.  This can also be called inline or in the same line insertion.

<!doctype html>
<html>
<head>
    <title>append demo</title>
    <style>
        p {
            background: yellow;
        }
    </style>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
</head>
<body>

<p>I would like to say: </p>

<script>
    $('p').append('<strong>Hello</strong>');
</script>

</body>
</html>
Try The Code

jQuery: Dom Manipulation

This entry is part 12 of 33 in the series jQuery Tutorial

After selecting an element in the DOM, we can manipulate the DOM in a certain way.

There are 2 types of things that we will want to do after selecting the element.  We could modify the content inside the elements or we could retrieve the information from the elements.

A few of these methods—such as .attr().html(), and .val()—also act as “getters,” retrieving information from DOM elements for later use.

<!doctype html>
<html>
<head>
    <title>addClass demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        p {
            margin: 8px;
            font-size: 16px;
        }
        .selected {
            color: blue;
        }
        .highlight {
            background: yellow;
        }
    </style>
</head>
<body>

<p>Hello</p>
<p>and</p>
<p>Goodbye</p>

<script>
    $('p').first().addClass('highlight');
    $('p').last().addClass('selected');
</script>

</body>
</html>

Try The Code

The <p> elements were first formed without any CSS formating.  We put the <script> near the end of the page just so that when the addclass is called, the <p> elements are ready in the document for changing.

Else, we can use the document ready method to ensure that the <p> elements have been formed before the <script> is ran.