[Go to site: main page, start]
Scribd
Upload
3 views2 pages

JavaScript DOM Full Syntax

The document provides a comprehensive overview of the JavaScript DOM, detailing its structure, methods for accessing and manipulating HTML elements, and handling events. It includes syntax examples for changing content, attributes, creating/removing elements, and common event types, along with practical exercises and solved examples. This guide serves as a resource for dynamically interacting with web pages using JavaScript.

Uploaded by

flikzslayer
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views2 pages

JavaScript DOM Full Syntax

The document provides a comprehensive overview of the JavaScript DOM, detailing its structure, methods for accessing and manipulating HTML elements, and handling events. It includes syntax examples for changing content, attributes, creating/removing elements, and common event types, along with practical exercises and solved examples. This guide serves as a resource for dynamically interacting with web pages using JavaScript.

Uploaded by

flikzslayer
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

JavaScript DOM Full Syntax

I. DOM Overview
■ The DOM (Document Object Model) represents an HTML page as a tree structure of elements.
■ JavaScript can create, modify, or remove HTML elements dynamically using the DOM API.

II. Accessing Elements


Method Syntax Description
getElementById [Link]('id') Returns an element by its ID.
getElementsByClassName [Link]('class') Returns elements with the given class name.
getElementsByTagName [Link]('tag') Returns all elements of that tag.
querySelector [Link]('selector') Returns the first matching element.
querySelectorAll [Link]('selector') Returns all matching elements as a NodeList.

III. Changing Content and Styles


■ You can modify text, HTML, or CSS styles dynamically using DOM properties.
[Link] = "New text";
[Link] = "Bold";
[Link] = "red";
[Link]("active");

IV. Attributes
[Link]("src", "[Link]");
[Link]("src");
[Link]("src");

V. Creating and Removing Elements


let div = [Link]("div");
[Link] = "Hello";
[Link](div);
[Link]();

VI. Event Handling


■ Events allow you to react to user actions such as clicks, typing, or scrolling.
[Link]("click", function() { alert("Clicked!"); });
[Link]("click", handler);

VII. Common Event Types


Event Description
click Triggered when an element is clicked.
change Triggered when an input value changes.
keyup / keydown Triggered when a key is pressed or released.
Event Description
mouseover / mouseout Triggered when the mouse enters or leaves an element.
submit Triggered when a form is submitted.

VIII. Traversing the DOM


[Link];
[Link];
[Link];
[Link];
[Link];

IX. Forms
let value = [Link]("name").value;
[Link](); // prevent page reload
[Link]();

X. Solved Examples
Example 1: Change text when a button is clicked.
Click Hello [Link]("btn").addEventListener("click",
function(){ [Link]("msg").textContent = "You clicked!"; });
Example 2: Add items to a list.

Add
let i=1; [Link]("add"). let li =
[Link]("li"); [Link] = "Item " + i++;
[Link]("list").appendChild(li); };
Example 3: Toggle dark mode.
Dark Mode [Link]("toggle").addEventListener("click",
function(){ [Link]("body").[Link]("dark"); });

XI. Exercises
1. Create a form that adds entered text into a list dynamically.
2. Make an image gallery that enlarges an image when clicked.
3. Build a small to-do list where tasks can be added and removed.

You might also like