Document Object
We may want to access, manipulate and change the contents-values of tags and form elements on our web page with JavaScript.
We often need to access the information entered by the visitors, especially in the form elements.
Using various methods in JavaScript, we can access the content and properties of html tags and change these properties if we want.
Some of these methods are:
getElementById Method
It is one of the most used methods to access html tags on a web page. It allows us to reach the relevant element by specifying the id of the html object to be reached.
For example, we can access the value inside the text box named k1 as follows:
var number = document.getElementById("k1").value;
Similarly, changes can be made by accessing many properties of the desired element, such as style properties, innerHtml property.
innerHTML Property
It allows us to change the content of an html tag in the body part.
Example: Let's say our page has a tag p with the id "result". If we want to print something inside this tag, we can use the following line:
document.getElementById("result").innerHTML = "Thanks. Your message has been received.";
With the innerHTML feature, we can also add HTML codes to the desired location of the page.
document.getElementById("result").innerHTML = "<b>Thanks.</b> Your Message Received.";
When adding html codes to the page with JavaScript, we run into problems if we mix up the quotation marks. Therefore, if we need to use quotation marks again within double quotes, we must write the inside quotation marks as single quotes.
Warning: JavaScript is a case sensitive language. Also, as in html, we cannot go to the bottom line wherever we want while writing command lines. While JavaScript command lines can be split after characters such as periods (.) and equals (=), commands, quotation marks, and similar expressions should not be broken down.
Sample:
document.getElementById("result"). innerHTML = "<table width='150' border='0' cellspacing='0' cellpadding='3'> <tr><td>1</td><td>2</td><td>3< /td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td>< td>2</td><td>3</td></tr></table>";
getElementsByClassName Method
The Id property is a property that should be different for each tag. In this case, it is not possible to reach more than one element at the same time with the getElementById method.
Class property may be applied to many tags on the page . If we want to process all the elements on the page where the same class is applied, we can use the getElementsByClassName method.
In this method, the name of the class we are looking for is written in parentheses, and then in square brackets it is stated which element we will reach within the elements with that class.
For example;
document.getElementsByClassName("text")[0].style.color="red";
In the above line, the first element with the .yazi class applied will be reached. Index numbers always start from 0.
We can use a loop if we want to access and process all elements on the page where the same class is applied.
Example: In the example below, the text color of all elements with the .yazi class applied has been changed.
function replace() {
var element = document.getElementsByClassName("text");
var i;
for (i = 0; i < element.length; i++) {
element[i].style.color = "red";
}
}
getElementsByName Method
If we want to reach an html object based on the name property rather than the id, we can use the getElementsByName method. Its usage is similar to the getElementsByClassName method described above. The index number of the element to be accessed must also be specified.
Sample:
var a = document.getElementsByName("box")[0].value;
The index number we specify in square brackets indicates which row of elements with the name attribute we specify on that page will be taken. The index number starts from 0.
In this example, the first html element with the name property "box" will be reached.
Getting the Value of Form Elements Using Form and Object Names
We can also access the values of the elements in the html form on our page as follows.
Sample:
Let's think we have an html form like this:
<form name="form1">
<input name="box1" type="text" />
<button onclick="click()" value="Calculate">Calculate</button>
</form>
The name of the form is form1, the name of the textbox we want to reach is box1;
var a=document.form1.box1.value;
We can get the value of the box as
Write Method
It allows us to print text or HTML codes on the page.
document.write("Welcome, Dear <b>Asli</b>");
javascript getelementsbyclassname, get elements by class, getting the value of the form element with javascript, changing the contents and values of the html tags, reaching the desired tag by id, getting the value from the javascript box
EXERCISES
|
Accessing elements of the same class and changing their properties
|
Try It
|
In the example, the text color of the labels with the same class is changed.
Click the Try It Yourself button, review the codes, change them, see the result...
|
How to insert rows to table using javascript codes
|
Try It
|
Click the Try It Yourself button, review the codes, change them, see the result...
|
Adding table to page by javascript
|
Try It
|
Click the Try It Yourself button, review the codes, change them, see the result...
|
Getting values of form elements using javascript
|
Try It
|
By clicking the Try It Yourself button, you can see, change, and see the result, for example, your codes.
|
Changing Style Properties of Html Elements Using JavaScript
|
|
To change the text color of the p tag with the text name:
document.getElementById("yazi").style.color ="red";
To change the border properties of the p tag with the name post:
document.getElementById("yazi").style.border ="1px solid red";
To change the width of the p tag with the post name:
document.getElementById("yazi").style.width ="200px";
Examples can be multiplied.
Read 531 times.