DOM Manipulation

getElementById()

This built in function allows you to select an element based on its id attribute. For example, the following button value can be changed from "Go" to "Stop" by selecting its unique id of "goButton".

Here's the HTML:

<input type="button" value="Go" id="goButton" onclick="changeGoButton()"/>
	    	

Here is the JavaScript code:

<script type="text/javascript">
	function changeGoButton(){
		if (document.getElementById("goButton").value == "Go")
			document.getElementById("goButton").value = "Stop";
		else
			document.getElementById("goButton").value = "Go";
	}
</script>
	    	

Selecting by Name

Besides selecting a unique element by Id, we can also grab an element by following the document structure. The following form allows us to do addition by selecting the values based on their name attributes "num1" and "num2". Then we will output to the third input box named "answer".

Here's the HTML:

<form name="myForm">
	Number 1:<input type="text" name="num1"/><br>
	Number 2:<input type="text" name="num2"/><br>
	<input type="button" value="Add" name="add" onclick="letsDoMath()"/><br>
	Answer:<input type="text" name="answer"/>
</form>
	    	

Here is the JavaScript code:

<script type="text/javascript">
	function letsDoMath(){
		// Grab the values and convert them into integers
		var num1 = parseInt(document.myForm.num1.value);
		var num2 = parseInt(document.myForm.num2.value);

		// Add and save results into input box
		document.myForm.answer.value = num1 + num2;
	}
</script>
	    	

Note that you can also select elements based on their class: document.getElementByClassName("className");

InnerHTML

In the past two examples, we selected the value of the elements. The function document.element.innerHTML allows you to select everything between an opening and closing tag.

For example, let's change the text inside the following paragraph.

Hello!

HTML:

<p id="innerHTML">Hello!</p>
<input type="button" value="Change" onclick="changeInnerHTML()"/>
	    	

JavaScript:

<script type="text/javascript">
	function changeInnerHTML(){
		document.getElementById("innerHTML").innerHTML = "Goodbye!";
	}
</script>
	    	

Changing In-Line CSS

Now that we know how to select an element we can manipulate how it looks.

We can change this text so the color is blue, and change the size of the button.

HTML:

<p id="changeText">We can change this text so the color is blue, and change the size of the button.</p>
<input type="button" value="Change" id="changeButton" onclick="changeCSS()"/>
	    	

JavaScript:

<script type="text/javascript">
	function changeCSS(){
		document.getElementById("changeText").style.color = "blue";
		document.getElementById("changeButton").style.width = "200px";
	}
</script>
	    	

Creating and Adding Elements

Using document.createElement(), we can add a new element to the page.

Lets say I have a form, but I want to add another input box, just because I can. Let's try it:

Note that in order to actually place the input on the form, we had to use document.form.appendChild(element);

HTML:

<form name="createInputForm">
	<input type="text"/>
</form>
<input type="button" value="Add Input Box" onclick="createInput()"/>
	    	

JavaScript:

<script type="text/javascript">
	function createInput(){
		// Create the input
		var input = document.createElement("INPUT");
		// Insert it into the form
		document.createInputForm.appendChild(input);
	}
</script>
	    	

Removing Elements

Ok, now that we have too many input boxes in the last example, lets remove those same boxes using document.element.removeChild(element);

HTML:

<input type="button" value="Remove Input Box" onclick="removeInput()"/>
	    	

JavaScript:

<script type="text/javascript">
	function removeInput(){
		var parent = document.createInputForm;
		document.createInputForm.removeChild(parent.firstChild);
	}
</script>
	    	

Last Modified Date and Time

To see when this document was last updated simply output: document.lastModified;

Last Modified:

HTML:

<p>Last Modified:</p>
<p id="modified"></p>
<input type="button" value="Get Last Modified" onclick="getLastModified()"/>
	    	

JavaScript:

<script type="text/javascript">
	function getLastModified(){
		var modified = document.lastModified;
		document.getElementById("modified").innerHTML = modified;
	}
</script>
	    	

Get the URL

This can be especially handy, like if you need to check whether a document is running locally or in a browser. Anyway, to see the full URL of the document, simply output document.URL.

HTML:

<p id="url"></p>
<input type="button" value="Get URL" onclick="getURL()"/>
	    	

JavaScript:

<script type="text/javascript">
	function getURL(){
		var url = document.URL;
		document.getElementById("url").innerHTML = url;
	}
</script>
	    	

Write()

This function is handy for outputting text to the screen. It can be done using inline script, or output in place of the whole document by using document.write() inside a function.

For this example, we will only be testing the inline version. There will be no button because this is not in a function. The following text is outputted using document.write()

HTML (with inline script tags):

<script type="text/javascript">
	document.write("<p>hello world!</p>");
</script>