technical analysis
What is DOM: Document Object Model: manage our documents, add, delete, modify and query rules
DOM operation in HTML
Some common HTML DOM methods:
getElementById(id) - gets the node (element) with the specified id
appendChild(node) - inserts a new child (element)
removeChild(node) - delete child nodes (elements)
Some common HTML DOM properties:
innerHTML - the text value of the node (element)
parentNode - the parent of the node (element)
childNodes - children of a node (element)
attributes - attribute node of the node (element)
Find node:
getElementById() returns the element with the specified ID.
getElementsByTagName() returns a list of nodes (collection / node array) that contain all elements with the specified tag name.
getElementsByClassName() returns a list of nodes containing all elements with the specified class name.
Add node:
createAttribute() creates an attribute node.
createElement() creates an element node.
createTextNode() creates a text node.
insertBefore() inserts a new child before the specified child.
appendChild() adds a new child node to the specified node.
To delete a node:
removeChild() deletes the child node.
replaceChild() replaces the child node.
Modify node:
setAttribute() modifying attributes
setAttributeNode() modify attribute node
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> /*Dynamic addition: < p > text</p> */ function dianwo(){ var div = document.getElementById("div1"); //Create element node var p = document.createElement("p"); // <p></p> //Create text node var textNode = document.createTextNode("Text content");// Text content //Associate p with text content p.appendChild(textNode); // <p>Text</p> //Add P to the target div div.appendChild(p); } </script> </head> <body> <input type="button" value="Point me,Add to P" onclick="dianwo()" /> <!--I'm going to move to this Div Add node to--> <div id="div1"> </div> </body> </html>
code implementation
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> /* Preparation: data preparation */ var provinces = [ ["Shenzhen City","Dongguan City","Huizhou City","Guangzhou City"], ["Changsha City","Yueyang City","Zhuzhou City","Xiangtan City"], ["Xiamen","Fuzhou City","Zhangzhou City","Quanzhou City"] ]; /* 1. Determine event: onchange 2. Function: selectProvince() 3. Something's going on in the function Get the current operation element Which province is currently selected Get the corresponding city information from the array Dynamic creation of city element node Add to City select */ function selectProvince(){ var province = document.getElementById("province"); //Get which province is currently selected //alert(province.value); var value = province.value; //Get the corresponding city information from the array var cities = provinces[value]; var citySelect = document.getElementById("city"); //Clear option in select citySelect.options.length = 0; for (var i=0; i < cities.length; i++) { // alert(cities[i]); var cityText = cities[i]; //Dynamic creation of city element node < option > Dongguan City < / option > //Create option node var option1 = document.createElement("option"); // <option></option> //Create City text node var textNode = document.createTextNode(cityText) ;// Dongguan City //Associate the option node with the text content option1.appendChild(textNode); //< option > Dongguan City < / option > // Add to City select citySelect.appendChild(option1); } } </script> </head> <body> <!--Select Province--> <select onchange="selectProvince()" id="province"> <option value="-1">--Please select--</option> <option value="0">Guangdong Province</option> <option value="1">Hunan Province</option> <option value="2">Fujian Province</option> </select> <!--Select city--> <select id="city"></select> </body> </html>
