Method No. 08.16 dom DOM node creation and deletion form and non-form values and operating style attributes and operations

< HTML > 
< head > 
< Meta charset = "UTF-. 8" > 
< title > Dom operating </ title > 
< Script type = "text / JavaScript" the src = "08.16 / 08.16.js" > </ Script > 
</ head > 

< body > 
<-! dom node add and delete; 
    createElemen create a new node 
    appendChild (newNode) add newNode as the last child of the current nodeoldNode) newNode replaced oldNode node to node 
    removeChild (oldNode) deletes a child node oldNode 
    insertBefore (newNode, refNode) will be inserted before refNode node node newNode
    replaceChild (newNode, oldNode) newNode replaced oldNode node to node
    cloneNode (true // false) deep when true, it indicates to copy the current node and all descendent nodes of the current node. Is false, only the copy of the current node 




-> 
< form ID = "MyForm" Action = "https://www.baidu.com/" Method = "GET" target = "_ blank" > 
    < INPUT name = "username" type = "text" value = "Joe Smith" > < br > 
    < INPUT name = "password" type = "text" value = "123" > < br > 
    <="city">
        <option value="shanghai">上海</option>
        <option value="beijing" selected>北京</option>
    </select><br>
    <input type="button" value="获取表单内第一个控件" onClick="alert(document.getElementById('myform').elements[0].value);">
    <input type="button" value="The second acquisition within the form control " onClick = "Alert (document.getElementById ( 'myform').elements['password'].value);">
    <input type = "Button" value = "Get the third control form" the onClick = "Alert (document.getElementById ( 'MyForm') city.value.);" > 
    < INPUT type = "Button" value = "Operation Form" the onClick = "operatorForm ()" > 
</ form > 

</ body > 
</ HTML >

< HTML > 
< head > 
< Meta charset = "UTF-. 8" > 
< title > Dom operation content </ title > 
< style > 
    #in_divall { 
        background-Color : AntiqueWhite ; 
    } 
    
</ style > 
</ head > 

< body > 
<! - 

    the operation content 
        forms; 
            assignment; tag objects .value = ""; 
            value; tag objects .value 
        non-form; 
            value; 
            the innerHTML HTML content is returned within the tag contains HTML tags.
            
            text label value in poetry innerText returned without HTML tags 
    operational attribute 
        value tag objects .getAttribute ( 'attribute name') Get the specified property 
        return the return value of 
        label objects .setAttribute ( 'attribute name', 'attribute') is provided to modify get property values 
        label objects .removeAttribute ( 'attribute name') delete develop property 

    operating style (can only operate within the United sister is inline) 
        label object .style. style names (get the value of the style name) 
        label objects .style. style name (acquisition value of the style name) = style value 


-> 
< the INPUT of the type = "text" the above mentioned id = "ueser" value = "" > 
< the Button onClick = "huiqu ()" > submit </ the Button > 
< the ButtononClick= "Fuzhi ()" > assigned </Button > 

< div   ID = "fei_div" style = "width: 200px; height: 100px; background-Color: Aquamarine;" > This is the value obtained by the form.
</ Div > 

< P ID = "p_span" > < span > This is a nested label </ span > </ P > 

< A the href = "#" target = "_ Self" ID = "A_IN" the onClick = "getAtr () " > this is a connector a </ a > 


<="div_click()" style="width: 500px;height: 100px;"></div>

<button onClick="div_huiqu()">提交</button>
<button onClick="div_fuzhi()">赋值</button>



</body>
</html>
<script>
    
    
    function div_click(){
//        获取DIV的宽度
        var div_style = document.getElementById('in_divall' );
         Var ststylecolor = div_style.style.width; 
        the console.log (stylecolor); 
        div_style.style.width = 1000px; 
        div_style.style.backgroundColor = Red; 
    } 
    
    

    
    
    function getAtr () {
         var AAA = document.gatElementById ( ' A_IN ' );
         // Get attribute name 
//         the console.log (aaa.getAttribute (' type ')); 
//         set properties property name property value + 
//         var setAtr = aaa.getAttribute (' target ',' _ blank ' ); 
//         delete attribute name
        var remAtr = aaa.removeAttribute ( ' ID ' ); 
        
        

    } 
    
    
    
    
    
    
// form to obtain the value 
    function huoqu () {
 //         a first input box acquired. 
        var ueser = document.getElementById ( ' ueser ' );
 //         two acquisition. the value of 
        the console.log (ueser.value); 
    } 
// form assignment 
    function Fuzhi () {
 //         a first input box acquired. 
//         two assignments. 
        document.getElementById ( ' ueser ' ) .Value = ' John Doe ' ;
        
    } 
//     non-standard single value acquisition 
    function div_huoqu () {
 //         a. Get the value of the input box 
        var DICY = document.getElementById ( ' p_span ' ); 
        the console.log (dicy.innerText); 
    } 
// non-standard single-assignment 
    function div_fuzhi () {
         var DICY = document.getElementById ( ' fei_div ' ); 
        the console.log (dicy.innerHTML = " this is a new form acquired value " ); 
    } 
    




</ Script >