1. Case I: adding a node to the end
Step 1.1
(1) to obtain ul tag
(2) create a li tag, createElement
(3) create a text label, createElement
(4) Add the following text to li, appendChild
(5) is added to the end of ul li's, appendChild
1.2 implementation
<ul id="ulid">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<input type="button" value="add" onclick="add1();"/>
<script type="text/javascript">function add1(){
//获取ul标签var ul1=document.getElementById("ulid");
//创建li标签var li1=document.createElement("li");
//创建文本var tex1=document.createTextNode("555");
The following li ul was added to// li1.appendChild (Tex1);
the text added to the li//
ul1.appendChild(li1);
}
</script>
2. The element object (element objects)
2.1 Get Object element - which document acquired by the respective methods
2.2 Method
(1) get property getAttribute () method
<input type="text" id="inputid" value="aaaa"> <script type="text/javascript"> //获取到input标签 var input1=document.getElementById("inputid"); //alert(input1.value); alert(input1.getAttribute("value")); </script>
(2) set attributes setAttribute () method
<input type="text" id="inputid" value="aaaa"> <script type="text/javascript"> var input1=document.getElementById("inputid"); alert(input1.getAttribute("class")); input1.setAttribute("class","haha"); alert(input1.getAttribute("class")); </script>
(3) delete the property removeAttribute () method
<input type="text" name="name1" id="inputid" value="aaaa"> <script type="text/javascript"> var input1=document.getElementById("inputid"); alert(input1.getAttribute("name")); input1.removeAttribute("name"); alert(input1.getAttribute("name")); </script>
- The property value can not be deleted
2.3 Get tag following subtag
(1) using the attribute childNodes, poor compatibility
(2) the only effective method: using the getElementsByTagName () method
<ul the above mentioned id = "ulid1">
<li> aaaaa </ li>
<li> BBBBB </ li>
<li> CCCCC </ li>
</ ul>
<Script of the type = "text / JavaScript"> // get to ul below all sub-label (child elements) // Get ul tag var UL11 = document.getElementById ( "ulid1" );
// Get the following sub-label ul var LIS = ul11.getElementsByTagName ( "Li" );
Alert (LIS .length); </ Script>
3. Node objects
3.1 a property
（1）nodeName
（2）nodeType
（3）nodeValue
(4) a value corresponding to the node
- a value corresponding to the node tag
// Get the object tag var SPAN1 = document.getElementById ( "spanid" ); Alert (span1.nodeType); // . 1 Alert (span1.nodeName); // the SPAN Alert (span1.nodeValue); // null
- attribute value corresponding to the node
//属性 var id1=span1.getAttributeNode("id"); alert(id1.nodeType);//2 alert(id1.nodeName);//id alert(id1.nodeValue);//spanid
- a value corresponding text node
// Get Text var text1 = span1.firstChild; Alert (text1.nodeType); // . 3 Alert (text1.nodeName); // #text Alert (text1.nodeValue); // ha Oh
3.2 Properties two
<ul >
<li>qqqqq</li>
<li>wwwww</li>
</ul>
(1) the parent node
-ul is li parent
-parentNode
(2) a child node
-li is the child of a few ul
-childNodes: Gets all the child nodes of the specified node, but poor compatibility
-firstChild: Gets the first child node
-lastChild: Gets the last child
(3) peer nodes
-li is directly related to peer node
-nextSibling: Returns a given node's next sibling node
-previousSibling: return to a given node on a sibling
4. Operation tree dom
4.1 appendChild method
(1) add a child node to the end
(2) Characteristics: shear adhesive similar effect
4.2 insertBefore(NewNode,oldNode)方法
(1) insert a new node before a node
(2) two parameters
- to insert node
- inserted before which node
(3) Step
- Create an insertion node
- create labels, create text, add text to the label below
function insert1 () { / * 1. acquired li13 label 2. Create li 3. Create a text 4. The following text is added to li 5. acquired ul 6. The following ul added to the li * / // Get li3 tag var = document.getElementById LI13 ( "LI13" ); // create li var li15 = document.createElement ( "li" ); // create text var text15 = document.createTextNode ( "Dong Xiaowan" ); // add text to li Here, the appendChild li15.appendChild (text15); // acquired UL var ul21 = document.getElementById ( "ulid21" ); //Dong Xiaowan added before Diao ul21.insertBefore (li15, LI13); }
(4) without the insertAfter () method
4.3 removeChild method to delete a node
(1) by deleting the parent node itself can not be executed
function remove1 () { / * 1. acquired. LI24 label 2. Get parent node ul tag 3. delete * / var . LI24 = document.getElementById ( ". LI24" ); var ulid31 = document.getElementById ( "ulid31" ); // delete ulid31.removeChild (. LI24); }
4.4 replaceChild (newNode, oldNode), node replacement
(1) by replacing the parent node, (replacing node, the node being replaced) two parameters
function replace1 () { / * 1. acquired li 2. create a label li 3. Create a text 4. Add the following text to li 5. Obtain tags UL 6. The replacement is performed * / var li34 = document.getElementById ( "li34" ); var li35 = document.createElement ( "li35" ); var text1 = document.createTextNode ( "Zhang Wuji" ); li35.appendChild (text1); var ulid41 = document.getElementById ( "ulid41" ); ulid41.replaceChild (li35 , li34); }
4.5 cloneNode (boolean), copy node
(1) Code
function COPY1 () { // the ul assigned to another list in div / * 1. acquired ul 2. The method specified copy method cloneNode true copy content after 3. The method of div to which the copy acquired div the appendChild method * / // Get UL var ulid41 = document.getElementById ( "ulid41" ); // copy ul, similar to the clipboard into the inside var ulcopy = ulid41.cloneNode ( to true ); // acquired div var divv = document.getElementById ( "divv" ); divv.appendChild (ulcopy); }
5.innerHTML property
5.1 part of the property is not dom, but most browsers support
(1) Role 1: Get the text content
var span1=document.getElementById("sid"); alert(span1.innerHTML);
(2) effect 2: Set to tag content (HTML code may be)
// Set the contents inside the div <h1 of> the AAA </ h1 of> var DIV11 = document.getElementById ( "DIV11" ); // set content div11.innerHTML = "<h1> AAA < / h1>";