8. DOM and Event
Document Object Model (DOM)
- Every web page resides inside a browser window which can be considered as an object.
- A Document object represents the HTML document that is displayed in that window. The Document object has various properties that refer to other objects which allow access to and modification of document content.
- The way a document content is accessed and modified is called the Document Object Model, or DOM. The Objects are
organized in a hierarchy. This hierarchical structure applies to the organization of objects in a Web document.
DOM tree
- The backbone of an HTML document is tags.
- According to the Document Object Model (DOM), every HTML tag is an object. Nested tags are “children” of the enclosing one. The text inside a tag is an object as well.
- Every tree node is an object.
- All these objects are accessible using JavaScript, and we can use them to modify the page.
- Everything in HTML, even comments, becomes a part of the DOM.
window
|
document
|
html
/ \
head body
Given a DOM node, we can go to its immediate neighbors using navigation properties.
There are two main sets of them:
- For all nodes: parentNode, childNodes, firstChild, lastChild, previousSibling, nextSibling.
- For element nodes only: parentElement, children, firstElementChild, lastElementChild, previousElementSibling, nextElementSibling.
Children: childNodes, firstChild, lastChild
There are two terms that we’ll use from now on:
Child nodes (or children) – elements that are direct children. In other words, they are nested exactly in the given one. For instance, <head> and <body> are children of <html> element.
Descendants – all elements that are nested in the given one, including children, their children and so on.
Siblings and the parent
Siblings are nodes that are children of the same parent.
<body> is said to be the “next” or “right” sibling of <head>,
<head> is said to be the “previous” or “left” sibling of <body>.
The next sibling is in nextSibling property, and the previous one – in previousSibling.
children – only those children that are element nodes.
firstElementChild, lastElementChild – first and last element children.
previousElementSibling, nextElementSibling – neighbor elements.
parentElement – parent element.
DOM Manipulation
To get Target/Search/access DOM object : getElement*, querySelector*
1. getElementsBy
1. elem.getElementsByTagName(tag) looks for elements with the given tag and returns the collection of them. The tag parameter can also be a star "*" for “any tags”.
2. elem.getElementsByClassName(className) returns elements that have the given CSS class.
3. document.getElementsByName(name) returns elements with the given name attribute, document-wide. Very rarely used.
- There are also other methods to look for nodes by a tag, class, etc.
- querySelector is more powerful and shorter to write.
2. QuerySelector
1. querySelector() : it return the first element .
2. querySelectorAll() : it return the all element of tagName,class,id of element of html tag.
Properties
- tagName : return tag for element nodes
- innerText : return the text content of the element and all its children.
- innerHTML : return the plain text or HTML contents in the element .
- textContent : return the textual content event for hidden elements.
It's important to note that using innerHTML can be a potential security risk if you're inserting user-generated content, as it can expose your website to Cross-Site Scripting (XSS) attacks. In such cases, it's recommended to use other methods like textContent or createTextNode to ensure safer content manipulation.
InnerHTML: the contents
- The innerHTML property in JavaScript is commonly used to get or set the HTML content within an element.
- The innerHTML property allows to get the HTML inside the element as a string.
- In HTML, the innerHTML property is used to get or set the HTML content of an element.
- It allows you to dynamically manipulate the content of an HTML element using JavaScript.
- The innerHTML property is commonly used when you want to update the content of an element based on user interactions, data from an API, or any other dynamic changes.
textContent :
The textContent property is used to get or set the text content of an element in the HTML document using JavaScript. It represents the text content of a node and its descendants.
innerText :
- The innerText property is used to get or set the text content of an element, excluding HTML tags.
- It represents the rendered text content of a node and its descendants.
Uses :
- To retrieve the text content: element.innerText
- To set the text content: element.innerText = "new text"
className and classList properties
1. className
The className property is used to get or set the value of the class attribute of an HTML element. It can be a space-separated list of class names.
2. classList
The classList property is an object that represents the class attribute of an element as a list of individual class names. It provides methods (add, remove, toggle, contains) to manipulate the classes more easily.
Events in Javascript
What is an Event ?
- The change in the state of an Object is known as an Event .
- JavaScript, events are actions or occurrences that happen in the browser, such as a user clicking a button, resizing a window, or pressing a key on the keyboard.
- Events allow you to respond to user interactions and create dynamic and interactive web pages.
Here's a simple breakdown of the event concept in JavaScript:
1.Event Triggering:
- Events are triggered by various actions, like clicking a mouse button, pressing a key, submitting a form, etc.
- For example, when a user clicks a button, a "click" event is generated.
2.Event Handling:
- Event handling in JavaScript refers to the process of responding to user actions or browser events, such as clicks, keypresses, mouse movements, and page loading .
- An event handler is a function that specifies what should happen in response to an event.
- The event handler contains the instructions for what should happen in response to the event.
- There are 2 way to handling event 1) inline handling (event write html). and 2) JS node.event arrow function.
3.Event Listener:
- An event listener is a mechanism for listening to specific types of events on a particular HTML element.
- You attach an event listener to an element and specify which event (e.g., "click") should trigger the associated event handler.
- node.addEventListener(event , callback)
- node.removeEventListener(event , callback)
Comments
Post a Comment