Home > Developer > Web Develop
Today's content
JavaScript---Dom
------------------------------------------------------------------------
1. Job
--------------------------------------
Dom in 1.js
What is DOM? Xml
1. What is XML
XML Extensible Markup Language.
Its main function is to store and transmit data.
XML tags are not predefined.----XML tags are strictly required. The tag must end.
The difference between XML and HTML
XML is not an alternative to HTML.
XML and HTML are designed for different purposes:
XML is designed to transmit and store data, with the focus on the content of the data.
HTML is designed to display data with the focus on the appearance of the data.
HTML is designed to display information, while XML is designed to transmit information.
2. What is DOM Document Object model
is our HTML or XML loaded into memory will form a tree structure, we tube this tree structure called DOM.
Also often called the DOM tree.
3.xmldom and htmldom difference and contact?
HTML itself is also an XML.
As we work with HTML, we can act like XML.
XMLDOM has its own DOM parsing api--for XML, which applies to all XML, which is also applicable to HTML.
The HTML document itself provides a set of DOM parsing APIs-----It is easier to manipulate HTML than XML.
The HTML DOM parsing API is more convenient for HTML operations such as forms and tables (compared to XMLDOM).
4. The following code has a total of several element text attribute
<meta http-equiv= "Content-type" content= "text/html; CHARSET=GBK ">
<title>history and location use </title>
<body>
<input type= "button" value= "return" onclick= "History.back ();"/>
</body>
6 element
Text:9 A carriage return the empty text is also present as a text node.
Attribute:5
----------------------------------------------------------------------
Learning the DOM should start with a Document object .
2.dom Operation
1. How to get the node on the page. ( Focus) ***************************************
getElementById () returns a reference to the first object that owns the specified ID.
Getelementsbyname () returns a collection of objects with the specified name. NodeList
getElementsByTagName () according to the label name NodeList
NodeList
Property Length
Method item ()
-------------- ------------------------------
2. There are three properties that are common to all node. Know
NodeType----Node type
Element 1
Property 2
Text 3
NodeValue---node value
element node NodeValue is undefined
text node nodevalue is text The nodevalue of this self-
property node is the value of the property
NodeName the name of the-----node
NodeName is a read-only
element node nodeName the same as the label name
Property Node NodeName is the name of the property The nodeName of the
text node is always the #document of the #text
document node NodeName
3. About the relationship between node
Parent: ParentNode
Child: ChildNodes
Brother: PreviousSibling nextSibling
--------------------------------------------------------
Exercise 1
Print "Tomorrow's Rest" (using two methods)
FirstChild---Get the first child element.
Exercise 2
<ul>
<li id= "BJ" value= "Beijing" >
Beijing
<p> Haidian </p>
Olympic
</li>
<li id= "sh" value= "Shanghai" > Shanghai </li>
</ul>
Requirements:
Print out id= "BJ" for all child nodes of the node (NodeName, NodeType, NodeValue)
Print text values at the same time Beijing Haidian Olympics
1. Get ID=BJ elements
var Bj=document.getelementbyid ("BJ");
2. Get all the child nodes
var bjson=bj.childnodes;
3. Traverse Bjson
for (Var i=0;i<bjson.length;i++) {
Alert (bjson[i].nodename+ "+bjson[i].nodetype+" "+bjson[i].nodevalue");
}
Get PJ The text value in this tag
Textcontent in Firefox OK
InnerText is OK in IE.
Exercise 3
<select name= "edu" id= "edu" >
<option value= "Undergraduate" > Undergraduate ^^</option>
<option value= "College" > Junior College ^^</option>
<option value= "secondary School" > Secondary School ^^</option>
<option value= "Kindergarten" > Kindergarten ^^</option>
</select>
Requirements:
Outputs the corresponding text content in all option elements under all SELECT elements
For example: <option value= "secondary School" > Secondary school ^^</option> output---> Secondary school ^ ^
------------------------------------------------------------------------------------
4. About CRUD in XMLDOM
Node operations
DOM Fetch Node
Element: getElementById getelementsbyname getElementsByTagName
Property: GetAttribute ()
Text: NodeValue textcontent innerText
DOM Change Node
element: For element nodes we generally do not make changes in development.
Property: SetAttribute
Text: Nodevlaue InnerText
DOM Delete Node
element: RemoveChild Note: The parent element must be found to delete the child element. ParentNode
Properties: RemoveAttribute This operation is less applied
Text: For text nodes we generally do not delete, empty. Nodevalue= ""; Innertext= ""
DOM Replacement Node
Element: ReplaceChild
Property: Do you want to delete this operation, do you want to add
Text: Just modify the text
DOM Creation Node
Element: CreateElement Application More
Properties: No action
Text: No action
DOM Add node
The element appendchild---application is much more needed to be added using the parent element.
Property SetAttribute () No attributes added, property modified
Text InnerText NodeValue
DOM Clone node
CloneNode (true/false) parameter true means that all child elements in the element are cloned. False only clones itself, and child elements are not cloned.
---------------------------------------------------------------------------------------------------
Review
Dom
1.xml function It is used to store and transmit data.
2.dom---is either XML or HTML, which is loaded into memory to form a tree structure. Dom Tree.
3. About DOM Operations-----document
1. About the Get operation
getElementById
Getelementsbyname
getElementsByTagName.
2. Each node of a tree is node
Element
Text
Attribute
3. About node three properties
NodeType
NodeValue
NodeName
All node has a innerHTML method.
4. About the relationship between node
ParentNode
ChildNodes
Brother Knot.
FirstChild
LastChild
5. CRUD Operations on the DOM
----------------------------------------------------------
Dom Exercises:
Exercise 1---adding elements
<select id= "Edu" >
<option value= "PhD" > PhD </option>
<option value= "Master" > Master </option>
<option value= "Bachelor" > Bachelor's Degree </option>
<option value= "martyrs" > Martyrs </option>
</select>
There is a select that requires adding a
<option value= "The Saints" > The Holy Warriors </option>
How to complete:
1.xmldom
1. Obtain a select with an Edu ID.
2. Create an element var option=document.createelement ("option");
3. Add an attribute to option Value= "Saint Warrior" adds a child element to option Saint Warrior
4. Add the option element to Edu.
2.htmldom
1. Obtain a select with an Edu ID.
2. Create an element var option=document.createelement ("option");
3.option.value= "Saint Warrior" option.text= "Saint Warrior";
4.select.add (option);
----------------------------------------------------------
Exercise 2----Dynamically add information to the table.
Name: <input type= "text" id= "username" >
Email:<input type= "text" id= "email" >
Tel: <input type= "text" id= "Telephone" ><br>
<input type= "button" value= "Add" >
<table id= "tab" border= ' 1 ' >
<tr>
<th> name </th>
<th>EMAIL</th>
<th> Telephone </th>
<th> Operations </th>
</tr>
</table>
1. Using Htmldom
DOM Table-----Table
DOM TableCell---cell
DOM TableRow---Line
2. Using innerHTML
When the button is clicked, the information is obtained and manually encapsulated into a string
"<tr><td>username</td><td>email</td><td>telephone</td><td>< A href= ' # ' onclick= ' delrow (this) ' >Delete</a></td></tr> '
Get the table with ID tab, appropriate for the string above innerhtml+=.
Question: How to delete the current line when you click the hyperlink.
When the hyperlink is clicked, a Delrow method is called, and this is passed to the Delrow method.
In the Delrow method, the TR that is eventually removed can be obtained by Parentnode.parentnode.
This line is deleted by calling the RemoveChild method from the table.
Note: When the table on our page adds information, it is found that the browser automatically adds a parent element such as Tbody to the TR.
------------------------------------------------------------------
Exercise 3
About the checkbox exercise
For a checkbox, we want to set and get whether it is selected can be obtained through the checked property. The value of this property, if True, represents the selected.
to False, Cancel.
1. Select all/Not select all
1. Get the value of the checked of the current checkbox.
2. Let the other Chckbox checked the same value as above.
2. Select All
Get all the hobby, set the value of its checked to true
3. All non-selected
Get all the hobby, set the value of its checked to false
4. Reverse Selection
Get all the hobby, set its checked value to the current value inverse.
--------------------------------------------------------------------
Exercise 4
About option Actions
Interface: Two select and 4 buttons.
About feature implementations
1. How can I move one item on the left to the right?
How do I get the selected item in select?
select.options;----get an array of all the option.
Select has a property called SelectedIndex. Gets the index of the selected item.
var Option=select.options[select.selectedindex]----Get the selected item.
Rightselect.add (option);
2. How to move the left to the right of all movements.
The options get all, make all of them, use Rightselect.add to add all to the right.
----------------------------------------------------------------------------------------
Exercise 5
Provincial and municipal two-level linkage.
1. The provincial and municipal information is read from the XML file.
<?xml version= "1.0" encoding= "Utf-8"?>
<china>
<province name= "Hebei province" >
<city> Shijiazhuang </city>
<city> Baoding </city>
<city> Handan </city>
<city> Chengde </city>
<city> Qinhuangdao </city>
</province>
<province name= "Shandong Province" >
<city> Jinan </city>
<city> Qingdao </city>
<city> Yantai </city>
<city> Zibo </city>
<city> Weihai </city>
</province>
<province name= "Henan province" >
<city> Zhengzhou </city>
<city> Nanyang </city>
<city> Anyang </city>
<city> Luoyang </city>
<city> Kaifeng </city>
</province>
</china>
How to read out the contents of the XML file--------use the JS operation.
<script type= "Text/javascript" >
Try//internet Explorer
{
Xmldoc=new ActiveXObject ("Microsoft.XMLDOM");
}
catch (E)
{
Try//firefox, Mozilla, Opera, etc.
{
Xmldoc=document.implementation.createdocument ("", "", null);
}
catch (E) {alert (e.message)}
}
Try
{
Xmldoc.load ("China.xml");
document.write ("XmlDoc is loaded, ready for use");
}
catch (E) {alert (e.message)}
</script>
--------------------------------------------------------------------
Question: When the page loads successfully, we get the document object of the XML file, what should be the first event we do?
Add the names of the provinces defined in the XML file to the province select.
You need to manipulate the xmldom to get all the province's Name property values.
Xmldom.getelementsbytagname ("province");
What you get is a nodelist that iterates over it and gets the value of the property name.
Province.getattribute ("name");
Option,option.text is the name of the province, based on the name of the province to be created.
Question: When the province information has been added successfully, when we select a province, how to obtain its corresponding city information?
1. Get the name of the selected item in the province.---Get the selected province name.
2. Take the selected province name to find its corresponding city in the China.xml file.
3. Get all the city names and add them to cities in this select.
Note: When the province is selected, we need to add the city, then empty all the contents of the city first.
--------------------------------------------------------------------------------------
Summarize:
What is 1.dom? What can DOM do?
Node in 2.dom has a relationship with the parent, son, brother.
3.xmldom and htmldom difference and contact
Get in 4.dom operation
getElementById
Getelementsbyname
getElementsByTagName
5.Node Element Text Attribute.
6. About node-related operations.
Crud. Cloning.
7. The purpose of the practice----is to structure and manipulate the DOM.
Homework: Use these days to learn the content to make a snake.
1. The interface----can divide the entire page into 20 rows and 20 columns.
2. Snakes are just a few contiguous squares.
3. Automatic Mobile SetInterval
4. Change direction according to KeyCode.
5. About eating food long body
6. About snakes can die.
The DOM in JS
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
