Scribd
Upload
206 views

JS Dom

JavaScript can interact with the DOM (Document Object Model) to modify an HTML document dynamically after it has loaded. The DOM represents the document as nodes that JavaScript can access and modify. 1. When a page loads, the browser builds a DOM representation of the HTML document. 2. JavaScript can select DOM elements using methods like getElementById() and modify their content, styles, and attributes. 3. When the DOM is updated, the browser automatically updates the page display to reflect the changes.

Uploaded by

Magarsa Bedasa
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
206 views

JS Dom

JavaScript can interact with the DOM (Document Object Model) to modify an HTML document dynamically after it has loaded. The DOM represents the document as nodes that JavaScript can access and modify. 1. When a page loads, the browser builds a DOM representation of the HTML document. 2. JavaScript can select DOM elements using methods like getElementById() and modify their content, styles, and attributes. 3. When the DOM is updated, the browser automatically updates the page display to reflect the changes.

Uploaded by

Magarsa Bedasa
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

JavaScript and the DOM

JavaScript and HTML are two different things. HTML is markup and JavaScript is code. So how do you get
JavaScript to interact with the markup in your page? You use the Document Object Model.
 When you load a page into the browser, the browser parses the HTML and creates an internal model of
your document that contains all the elements of your HTML markup.
 Your JavaScript can interact with the DOM to get access to the elements and the content in them.
JavaScript can also use the DOM to create or remove elements (among a number of other things we’ll be
getting to).
 When JavaScript modifies the DOM, the browser updates the page dynamically, so you see new content on
your page.
 JavaScript can change the content, change the style, change the attribute of an HTML element
 JavaScript can add and delete new HTML elements
 There are two steps to perform all the above task
 Get the element to change the content, attribute or style
 Change it

Edit the following page using JavaScript


 Change the h2 content to JavaScript Content
<doctype html>
<html>
<head>
<title>Find Element</title>
</head>
<body>
<h2 id="i1" class="c1">This is the HTML
content</h2>
</body>
</html>

i. Find the HTML element

 There are 3 basic methods


a. getElementById() method

var i=document.getElementById("i1");

we can get the element by its id “i1” and assign it to a variable i.

the method returns a single element

b. getElementByTagName()

var i=document.getElementsByTagName("h2");

we can get that element by its tag name

the method returns an array of h2 elements

c. getElementByClassName()

var i=document.getElementsByClassName("c1");

we can get that element by its class name.

this method also returns an array of elements with “c1” class

ii. Change the HTML Element


a. Change the inner HTML (content)
To change the elements content we use “innerHTML” method

var i=document.getElementById("i1");

i.innerHTML=”JavaScript Content”;
OR we can find the element by its tag name or class name and modify its content

var i=document.getElementsByTagName("h2");

i[0].innerHTML=”JavaScript Content”;

 To change the attribute of an element we use the “element.attribute” or


element.setAttribute(“attribute-name” , “value”)
Example - var i=document.getElementsByClassName("c1");
i[0].setAttribute("id","ccc"); // or i[0].id=”anotherId”;
 To change the style of an element we use “ element.style.property=” method

Example - var i=document.getElementById("i1");

i.style.color=”purple”;

when to change content, attribute or style of an element ------------------ DOM EVENTS

Events are generated by the browser when "things happen" to HTML elements.

i. Onclick event  ocured when a user clicks

<doctype html>
<html>
<head>
<title>Evaent</title>
</head>
<body>
<p id="pid"
onclick="change()">Click Me</p>
<script>
var
pid=document.getElementById("pid")
;
function change(){
pid.innerHTML="you did it";
}
</script>
</body>
</html>

Exercise one  write HTML5 and javaScript that changes an image src attribute on click
event.

Checkevent.htm

<doctype html>
<html>
<head>
<title>Event</title>
</head>
<body>
<fieldset>
<legend><p id="pid" onclick="change()">Click Me</p></legend>
<form>
NAME: <input type="text" id="input" onchange="function2()"
placeholder="enter more than two characters">
<p id="result"></p>
<input type="button" id="m" onmouseover="mouseover()"
value="mouseover" onmouseout="mo()">
<p id="result"></p>
</form>
</fieldset>
<script>
var pid=document.getElementById("pid");
function change(){
pid.innerHTML="you did it";

}
function function2(){
var r=document.getElementById("input");
if(r.value.length <= 2)
//alert("that is not a name");
var result=document.getElementById("result").innerHTML=r.value+" is
not a name";
else
var result=document.getElementById("result").innerHTML="THANK YOU
"+r.value;
}
function mouseover(){
var m=document.getElementById("m");
m.style.color="blue";

}
function mo(){
var m=document.getElementById("m");
m.style.color="white";
}
</script>
</body>
</html>

You might also like