JavaScript's dom and BOM

With the programmable object model, JavaScript has the ability to create dynamic HTML.

• JavaScript can change all HTML elements in a page
• JavaScript can change all HTML attributes in a page
• JavaScript can change all CSS styles in a page
• JavaScript can react to all the events in the page

In order to do this, you must first find the element. There are three ways to do this:

• Find HTML elements by ID
• Find HTML elements by tag name
• Find HTML elements by class name

var X=document.getelementbyid ("main"); var y=x.getelementsbytagname ("P");

var x=document.getelementsbyclassname ("Intro");

In JavaScript, document.write () can be used to write content directly to the HTML output stream.

Never use document.write () after the document has finished loading. This overwrites the document.

To change the contents of an HTML element, use this syntax:

document.getElementById ( ID). innerhtml= New HTML

To change the attributes of an HTML element, use this syntax:

document.getElementById ( ID). attribute= New attribute value

To change the style of your HTML elements, use this syntax:

document.getElementById ( ID). style. property = New style

document.getElementById ("p2"). style.color="blue"; document.getElementById ("p2"). style.fontfamily="Arial " ;d Ocument.getelementbyid ("p2"). style.fontsize="  Larger";

Style= "Visibility:hidden"

<input type= "button" value= "hidden text" onclick= "document.getElementById (' P1 '). style. visibility= ' hidden ' "/>
<input type= "button" value= "Display text" onclick= "document.getElementById (' P1 '). style. Visibility= ' visible ' "/>

onclick= JavaScript

Examples of HTML events:

• When the user clicks the mouse
• When the page is loaded
• When the image is loaded
• When the mouse moves over the element
• When the input field is changed
• When you submit an HTML form
• When the user triggers the button

document.getElementById ("Mybtn"). onclick=function () {displaydate ()};

OnLoad and OnUnload Events

The onload and OnUnload events are triggered when the user enters or leaves the page.

The OnLoad event can be used to detect the browser type and browser version of the visitor and to load the correct version of the Web page based on that information.

The onload and OnUnload events can be used to process cookies.

Example <bodyonload= "checkcookies ()" >Event Listeners (IE9 only started to support)

<p> The instance uses the AddEventListener () method to add a click event to the button. </p><button id="mybtn"> Point I </button><p id="demo "></p><script>document.getElementById (" mybtn "). AddEventListener (" click ")  , displaydate); function Displaydate () {    document.getElementById ("demo"). InnerHTML = Date ();} </script>

The AddEventListener () method is used to add an event handle to the specified element.

The event handle added by the AddEventListener () method does not overwrite an existing event handle.

You can add multiple event handles to an element.

You can add multiple event handles of the same type to the same element, such as: Two "click" Events.

You can add event snooping to any DOM object, not just HTML elements. Such as: Window object.

the AddEventListener () method makes it easier to control events (bubbling and capturing).

When you use the AddEventListener () method, JavaScript is detached from the HTML markup and is more readable, and you can add event listeners without controlling HTML markup.

You can use the RemoveEventListener () method to remove the listener from the event.

element. RemoveEventListener ("MouseMove", myFunction);

element. AddEventListener ( event, function, Usecapture);

The first parameter is the type of event (such as "click" or "MouseDown").

The second parameter is a function that is called after the event is triggered.

The third parameter is a Boolean value that describes whether the event is bubbling or capturing. This parameter is optional

Note: Do not use the "on" prefix. For example, use "click" instead of "onclick"Passing parameters

When passing parameter values, use the anonymous function to invoke the function with parameters:

Instance element. AddEventListener ("click",function () {myFunction (P1, p2); });

In bubbling , an inner element's event is triggered first, and then an external element is triggered, that is: The <p> element's Click event is triggered first, and then the <div> element's Click event is triggered.

In a capture , an event of an external element is first triggered before the event of the inner element is triggered, that is: The <div> element's Click event is triggered first, and then the <p> element's Click event is triggered.

AddEventListener ( Event, function, usecapture);

The default is False, which is the bubbling pass, when the value is true, and the event uses capture delivery.

How to prevent bubbling, as follows

Event.stoppropagation ();

Or

return false;

Cross-Browser Workaround:

 var  x = document.getElementById (" Span style= "COLOR: #800000" >mybtn   " );  if  (X.addeventlistener) {//  All major browsers except I E 8 and earlier  X.addeventlistener ( " click   "  else  if     (x.attachevent) {//  IE 8 and earlier  X.attachevent ( " onclick  "   

Add or remove ELEMENT nodes

<script>var para=document.createelement ("P"); var node=document.createtextnode (" This is a new paragraph.  ");p ara.appendchild (node);//actually innerHTML can also be var element= document.getElementById ("div1"); Element.appendchild (para); </script>

var parent=document.getelementbyid ("div1"); var child=document.getelementbyid ("p1");p arent.removechild (child);

The DOM needs to be clear about the element you need to delete, and its parent element.

var child=document.getelementbyid ("p1");  Child.parentNode.removeChild (child); 

Browser BOM

JavaScript's dom and BOM