First thing you need to know about JS is The HTML DOM.
JS and DOM and Elements
- Change HTML elements
- Delete HTML elements
- Create new HTML elements
- Copy and clone HTML elements
- And much more on elements
JS and DOM and Attributes
- Change attributes on elements
- Remove HTML attributes and use defaults
- Add HTML attributes to elements
- And much more on attributes
JS and DOM and Styles
- Change CSS styles on elements
- Remove CSS styles and use defaults
- Add CSS styles to elements
- And much more on styles
JS and DOM and Functions and Events
How to Write
That is when you write JS inside of a HTML page. But also you can write your JS code in a separate external JS file and saved with the extension *.js and attach it to the web page using src attribute in the
You can place an external script reference inor as you like. The script will behave as if it was located exactly where you put the reference in the HTML document.
Your First Code
Most popular and widely used JS method is document.getElementById(id) method. If you pass the id parameter as a HTML element id attribute value, JS will find and get hold of the element. When you got hold of this DOM element you can do anything to that element. For example look at the following code segment.[code language="html"]
In the above code segment, it get hold of the demo element and change what inside of it. If the demo element is a paragraph, then we can change the text inside of this like that. Not only a text like this, you can add elements inside the get hold element.[code language="html"]
There is another way to do this.[code language="html"]
The difference between the above method and this method is, with this method it appears where the code was written. But with getElementById() method you can write anywhere inside the page or externally attach to it. But do not use write() method dynamically because if you execute it dynamically on a loaded HTML document, all HTML elements will be overwritten. Better to use it for testing purposes only.
You'll see 11 at the console.
You are now fully prepared to start coding. Get ready with an editor to start happy coding with next articles incoming.