Interactive pathfinding of "JS" JavaScript and HTML DOM

JS HTML DOM

The entire DOM is the Document object module, which is the documentation objects model. In general, when a page is loaded, the browser creates a DOM of the current document internally. Just as the object created when parsing an XML file with a module such as Python's etree, the DOM object created by the browser abstracts the entire HTML file and forms a tree of HTML elements.

JS, however, is endowed with the ability to interact with this DOM. In other words, JS can change the HTML content dynamically and flexibly by adding additions and deletions to the DOM. For example, JS can do: Change HTML elements, change the attributes of HTML elements, change the CSS, react to events that occur on the page, delete HTML elements, and so on.

Change HTML

JS can directly change the content of HTML elements and the elements themselves.

Finding HTML elements

HTML elements are the basic units that make up an HTML document, and all operations should be based on it. In JS, with document.getElementById (...) The Document.getelementbytagname method can be used to locate an element by ID, similar to a method such as the "div", to locate an element through the tag name and the Getelementbyclassname's pass-through class name. In addition, there are more positioning methods, this is just for the sake of the following demonstration convenient to mention.

Changing the HTML output stream

As mentioned in the previous article, the document.write () method is used to output content to HTML, which is equivalent to changing the HTML output stream. It is important to note that the change, which means that there is no HTML back to the whole, becomes document.write content, so when the document is fully loaded and then the write is erased, all previous content is emptied before the new content is exported.

Changing HTML content innerHTML properties

For an element object, it has the property innerHTML property, which represents the content between the header label and the tail label. By changing the value of this property, you can change the contents of the HTML directly.

<p id= "P1" >hello world!</p><script>document.getElementById ("P1"). Innerhtml= "New text!" ; </script>// The final display is new text! because the content of P is JS changed

Changing HTML properties

In addition to content, attributes are an important part of HTML. The attributes of an HTML element are represented directly in the DOM using the property name. Changing the value of a property name directly alters the value of the property. Like what:

<imgID= "image"src= "Smiley.gif"><Script>document.getElementById ("Image"). SRC="landscape.jpg";</Script>

In the example above, the SRC attribute of IMG has been changed to point to another image.

Changing HTML Styles Style property

JS can change the CSS of HTML elements through DOM. Use the Style property of the element object:

<PID= "P2">Hello world!</P><Script>document.getElementById ("P2"). Style.color="Blue";</Script>

In the example above, the CSS attribute color of the element with ID p2 is changed to blue.

HTML Events and JS interaction

JS can respond to events that occur on HTML. Dom has a lot of events: http://www.w3school.com.cn/jsref/dom_obj_event.asp

The usual ones are:

OnClick Click

Onload/onunload user entry/exit interface

onMouseOver Mouse is moved above an element

Onselect Text is selected

onchange when the input content changes (such as a label like input, when the user finishes typing the keyboard out of the input box, the cursor is not in the input box when the detection, if and the last detection when the content changes triggered this event)

......

One way to connect events to JS is to write the event as an attribute in the tag of the relevant element, and the content of JS as the value of the attribute. such as <button onclick= "alert (' clicked! > This will jump out of the box when you press this button. In addition, in general, some JS operations can be packaged into a function, and then the event here to write this function on it.

* Here is a small problem, that is, the function of the contents of the <script> tag should be placed. Because the button itself must be placed inside the body tag, the script tag can be placed in the head, placed in the body in front of the button, placed in the body button after the three options. In fact, all three can, because the browser loading HTML method is all loaded and then display, so there is no other programming language inside that function has not been defined in the call and error things. For example, the following example:

<!DOCTYPE HTML><HTML><Head></Head><Body><H1onclick= "Changetext (this)">Please click on the text</H1><Script>functionChangetext (Element) {element.innerhtml="Thank you!";}</Script></Body></HTML>

This kind of event and JS related way more rigid, more flexible, we can in JS inside the event allocation, delete, etc. (because the event itself is also an attribute of HTML elements, using JS can edit the attributes of the element is OK). Like what:

< Script > document.getElementById ("mybtn"). onclick = function () {displaydate ()}; </ Script >

When the MYBTN element itself has an onclick event, it changes the response of the event, and when it does not, it assigns a new event to the MYBTN.

Adding or deleting HTML elements

Create a new element

Using JS to create a new element to the DOM is troublesome, such as the following example, for a DIV element to create a new P element at the tail:

<DivID= "Div1"><PID= "P1">This is a paragraph</P><PID= "P2">This is another paragraph</P></Div><Script>varpara=Document.createelement ("P");varnode=document.createTextNode ("This is a new paragraph. ");p ara.appendchild (node);varelement=document.getElementById ("Div1"); Element.appendchild (para);</Script>

The first thing to do is to create a P element, create a text node element, then add the text node to P, and then add the P element to the Div.

The method used above is all appendchild () This is the method of adding child elements at the end of the current element, and if you want to add a child element at a specified location, you can use InsertBefore (some_exist_child,new_child) to Some_ The Exist_child is preceded by a new element.

Delete Element

is also an example:

<DivID= "Div1"><PID= "P1">This is a paragraph.</P><PID= "P2">This is another paragraph.</P></Div><Script>varParent=document.getElementById ("Div1");var Child=document.getElementById ("P1");p arent.removechild (child);</Script>

Replace element

The basic spirit is similar to the above two, the method is ReplaceChild (child)

It can be seen that, although JS through the interaction with the DOM can be very powerful to edit the HTML changes, but its approach is relatively close to the bottom and cumbersome procedures (from the perspective of how to parse the DOM seems to be a bit like the BS in Python and XML these modules are somewhat similar to the practice). But fortunately there are many JS library (JS method for further packaging), the use of these libraries can be more simple to use JS, such as jquery. I think in the future even if you want to use JS, it is certainly used in these library methods and forms, as for the main body of JS, it is necessary to understand, but concrete how practical, not very cold.

JS JavaScript interactive pathfinding with HTML DOM