Manipulate the HTML CODE
In this first chapter dedicated to the manipulation of the HTML code, we will see the concept of the DOM. We will first study how to navigate between the different nodes that make up an HTML page and then we will address the editing of the content of a page by adding, modifying and removing nodes.
You will quickly find that it is rather easy to manipulate the content of a web page and that it will become indispensable thereafter.
- Introduction
- The Document Object Model (DOM)
- The window object
- The document
- Navigate into the Document
- The DOM structure
- getElementById ()
- getElementsByTagName ()
- getElementsByName ()
- Access the elements with recent technologies
- Edit HTML Element
- InnerText and TextContent
Manipulation of HTML Code – part 2
The innerHTML property has the main quality of being easy and fast to use and that is why it is generally preferred by beginners, and even by many experienced developers .innerHTML has long been a non-standardized property, but since HTML5 is recognized by the W3C and can be used without asking too many questions.
In this second chapter devoted to the manipulation of the content, we will approach the modification of the document via the DOM. We did it in the first chapter, especially with setAttribute (). But here it will be to create, delete and move HTML elements. It’s a big piece of JavaScript, not always easy to assimilate.
Maybe you are going to tell me, if innerHTML is enough, why should we bother us with the DOM? Simply because the DOM is more powerful and is needed to process XML.
- Introduction
- Navigate between nodes
- The parentNode property
- nodeType and nodeName
- List and browse child nodes
- nodeValue and data
- childNodes
- nextSibling and previousSibling
- Be careful of empty nodes
- Create and insert Elements
- Notions on references
- Clone – Replace – Delete
- Other actions
Events
After the introduction to the DOM, it is time to deepen this domain by addressing events in JavaScript.
In this chapter, we will study the use of events without the no-DOM, with the DOM-0 (invented by Netscape) and then with the DOM-2.
We will see how to set up these events, use them, modify their behavior, etc.
After this chapter, you can already begin to interact with the user, allowing you to create interactive web pages that can react to various actions performed by either the visitor or the browser.
- Introduction
- What are events ?
- The theory
- The practice
- Events across the DOM
- The event Object
- Troubleshoot inheritance problems
Forms
After studying the events, it’s time to go to the forms!
Here begins the interaction with the user thanks to the many properties and methods that the HTML elements used in the forms have.
- Introduction
- Properties
- Methods and Return on some events
CSS
JavaScript is a language for making a dynamic web page on the client side. Only, when we think of “dynamic”, we also think of “animations”.
However, to make animations, you have to know how to access the CSS and modify it. This is what we will study in this chapter.
- Introduction
- Edit CSS styles of an element
- Recover CSS properties
AJAX – Introduction
AJAX is a vast field, we will not have the means to explore all possibilities, but we will study the main aspects. This chapter will serve to introduce you to the concept, its advantages and disadvantages. We will also see what technologies are used for data transfer.
Get ready, because you will discover technologies to extend the possibilities of your scripts to new areas of use!
- Introduction
- Presentation
- How Does it work
- Data formats – Presentation
- Data Formats – How to use them
