Home > Developer > JavaScript
JS tutorial JavaScript HTML dom
From http://www.w3school.com.cn
1. html dom (Document Object Model documentobject Model)
Html dom tree
Through the programmable object model, JavaScript has sufficient capabilities to create dynamic HTML.
L javascript can change all HTML elements on the page
L javascript can change all HTML attributes on the page
L javascript can change all CSS styles on the page
L javascript can respond to all events on the page
2. Search for HTML elements
Generally, you need to operate HTML elements through JavaScript.
There are three methods to find the elements to be operated:
L find HTML elements by ID
Document. getelementbyid (ID)
L find HTML elements by Tag Name
Getelementsbytagname (tagname)
L find HTML elements by Class Name (invalid in IE, 7, 8)
3.Change html
1. Change the HTML output stream
Document. Write ()
It can be used to directly output stream content to HTML.
Tip: Never use document. Write () after document loading (). This will overwrite this document.
2. Change HTML content
Document. getelementbyid (ID). innerhtml = newhtml
3. Change HTML attributes
Document. getelementbyid (ID). Attribute = newvalue
Instance:
<Body>
<SCRIPT>
Document. getelementbyid ("image"). src = "landscape.jpg ";
</SCRIPT>
</Body>
4. Change the HTML Style
Document. getelementbyid (ID). style. Property = newstyle
<P id = "p2"> helloworld! </P>
<SCRIPT>
Document. getelementbyid ("p2"). style. color = "blue ";
Document. getelementbyid ("p2"). style. Background-color = "# CCC ";
</SCRIPT>
5. Respond to HTML events
Example of HTML events:
L when a user clicks the mouse
L when a webpage is loaded
L when the image is loaded
L when the mouse moves over the element
L when the input field is changed
L when an HTML form is submitted
L when a user triggers a button
And so on.
When an event occurs, JavaScript can be executed;
For example, when you click an HTML element, you can add JavaScript code to The onclick event of HTML:
Onclick = Javascript
Instance:
<SCRIPT>
Function changetext (OBJ) {obj. innerhtml = "Thank you! ";}
</SCRIPT>
<H1onclick = "changetext (this)"> click this text
Onclick is a click event of an HTML element;
Before, when, or after an HTML element occurs in an event, you must first add the corresponding event (add event) to the HTML element ), next, add the action you Want to do (write JS Code );
1) event addition method and onclick event
A. Add the event directly to the HTML element.
<H1onclick = "This. innerhtml = 'Thank you! '"> Click this text
B. Add events to HTML elements through JS
<Button id = "mybtn"> click here </button>
<SCRIPT>
Document. getelementbyid ("mybtn"). onclick = function () {displaydate ()};
</SCRIPT>
2). onload and onUnload events
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 version of a visitor and load the correct version of a webpage based on the information.
Onload and onUnload events can be used to process cookies.
Instance:
<! Doctype HTML>
<HTML>
<Bodyonload = "checkcookies ()">
<SCRIPT>
Function checkcookies ()
{
If (navigator. cookieenabled = true)
{
Alert ("Cookie enabled ")
}
Else
{
Alert ("Cookie not enabled ")
}
}
</SCRIPT>
<P> the prompt box tells you whether the cookie is enabled in the browser. </P>
</Body>
</Html>
3). onchange event
Onchange events are often used together with verification of input fields, or other actions.
Instance:
<SCRIPT>
Function myfunction ()
{
Varx = Document. getelementbyid ("fname ");
X. value = x. value. touppercase ();
}
</SCRIPT>
</Head>
<Body>
<Input type = "text" id = "fname" onchange = "myfunction ()">
<P> when you leave the input field, a function that converts the input text to uppercase is triggered. </P>
4). onmouseover and onmouseout events
Onmouseover and onmouseout events can be used to trigger a function when a user moves the cursor over an HTML element or removes the element.
Instance:
<H1 onmouseover = "style. Color = 'red'" onmouseout = "style. Color = 'blue'">
For example, move the mouse over the text.
</H1>
<Divonmouseover = "mover (this)" onmouseout = "mout (this)">
Example 2 move the mouse over
</Div>
<SCRIPT>
Function mover (OBJ)
{
OBJ. innerhtml = "thank you"
}
Function mout (OBJ)
{
OBJ. innerhtml = "move the mouse over"
}
</SCRIPT>
5). onmousedown, onmouseup, and onclick events
Onmousedown, onmouseup, and onclick constitute all parts of the mouse click event;
L when you press the mouse button, the onmousedown event is triggered;
L when the mouse button is released, the onmouseup event is triggered;
L finally, The onclick event is triggered when the mouse is clicked.
Instance:
<Div onmousedown = "mdown (this)" onmouseup = "MUP (this)" onclick = "mclick (this)" style = "width: 90px; Height: 20px; "> click here </div>
<SCRIPT>
Function mdown (OBJ)
{
OBJ. style. backgroundcolor = "#1ec5e5 ";
OBJ. innerhtml = "Release the mouse button ";
}
Function MUP (OBJ)
{
OBJ. style. backgroundcolor = "green ";
OBJ. innerhtml = "please press the mouse button ";
}
Function mclick (OBJ) {obj. innerhtml = "click ";}
</SCRIPT>
6). onfocus and onblur events
Get and lose focus events
Instance:
<SCRIPT>
Function focusfun (X)
{
X. style. Background = "yellow ";
}
Functionblurfun (X)
{
X. style. Background = "# fff ";
}
</SCRIPT>
<Input type = "text" onfocus = "focusfun (this)" onblur = "blurfun (this)">
More details:
1. http://www.w3school.com.cn/htmldom/dom_obj_event.asp
2. http://www.w3school.com.cn/tags/html_ref_eventattributes.asp
Compare the events in 1 and 2, and there is no onerror or onresize event in 2.
4. Javascript html dom elements (nodes)
1. Add a node (HTML element)
Add a new HTML Dom element. First, create the element (element node) and append the element to an existing element.
1) Create HTML elements
Document. createelement (element)
2) append an element to the end of the child element in the elementnode Node
(Add a new subnode to the end of the subnode List)
Elementnode. appendchild (newelement)
3) insert an element before a child element in the elementnode Node
(Insert a new subnode before an existing subnode)
Elementnode. insertbefore (new_node, existing_node)
New_node: Insert a new node.
Existing_node already exists, and a new node is inserted before this node
4) create a text node
Document. createtextnode (contents)
Instance:
<Div id = "div1">
<P id = "p1"> This is a paragraph </P>
<P id = "p2"> This is another paragraph </P>
</Div>
<SCRIPT>
Varpara = Document. createelement ("p ");
VaR node = Document. createtextnode ("this is a new section. ");
Para. appendchild (node );
Varelement = Document. getelementbyid ("div1 ");
Element. appendchild (para );
</SCRIPT>
2. delete a node (HTML element)
To delete HTML
Element. You must first obtain the parent element of the element.
If the child node is deleted successfully, the deleted node is returned. Otherwise, null is returned.
Elementnode. removechild (node)
Elementnode parent node child node
Instance 1: Find the parent element and delete the child element.
<Div id = "div1">
<P id = "p1"> This is a paragraph. </P>
<P id = "p2"> This is another section. </P>
</Div>
<SCRIPT>
Varparent = Document. getelementbyid ("div1 ");
Varchild = Document. getelementbyid ("p1 ");
Parent. removechild (child );
</SCRIPT>
Example 2: indirectly deleting child elements through the parent Element
Varchild = Document. getelementbyid ("p1 ");
Child. parentnode. removechild (child );
3. lastchild attributes
The lastchild attribute returns the last child node of the document.
Incluentobject. lastchild
4. previussibling attributes
The previussibling attribute returns the node that is followed by a node (in the same tree level)
If this node does not exist, null is returned for this attribute.
Nodeobject. previussibling
5. nodetype attributes
Nodetype
Returns the node type of the selected node.
Elementnode. nodetype
Node name corresponding to node number
Node number |
Node name |
Node number |
Node name |
1 |
Element |
7 |
Processing instrucion |
2 |
Attribute |
8 |
Comment |
3 |
Text |
9 |
Document |
4 |
CDATA |
10 |
Document Type |
5 |
Entity reference |
11 |
Document Fragment |
6 |
Entity |
12 |
Notation |
Delete a node instance:
<Scripttype = "text/JavaScript">
// Check whether the last node is an element node
Function get_lastchild (N)
{
VaR x = n. lastchild;
While (X. nodetype! = 1)
{
X = x. previussibling;
}
Return X;
}
Xmldoc = loadxmldoc ("/example/xdom/books. xml ");
Varlastnode1_get_lastchild(xmldoc.doc umentelement );
Vardelnodeappsxmldoc.doc umentelement. removechild (lastnode );
</SCRIPT>
Use JavaScript to access HTML Dom:
Http://www.w3school.com.cn/htmldom/index.asp
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
