08.16号 dom 节点的创建和删除DOM表单与非表单取值的方法和操作属性与操作样式

<html>
<head>
<meta charset="utf-8">
<title>Dom操作</title>
<script type="text/javascript" src="08.16/08.16.js"></script>
</head>

<body>
<!--dom节点添加  删除 ;
    createElemen    创建一个新的节点
    appendChild(newNode)            将newNode添加成当前节点的最后一个子节点
    insertBefore(newNode,refNode)    将refNode节点之前插入newNode节点
    replaceChild(newNode,oldNode)    将oldNode节点替换成newNode节点
    removeChild(oldNode)            将oldNode子节点删除
    cloneNode(true // false)        当deep为true时，表示复制当前节点以及当前结点的全部后代节点。为false时，只复制当前节点




-->
<form id="myform" action="https://www.baidu.com/" method="get" target="_blank">
    <input name="username" type="text" value="张三"><br>
    <input name="password" type="text" value="123"><br>
    <select name="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="获取表单内第二个控件" onClick="alert(document.getElementById('myform').elements['password'].value);">
    <input type="button" value="获取表单内第三个控件" onClick="alert(document.getElementById('myform').city.value);">
    <input type="button" value="操作表单" onClick="operatorForm()">
</form>

</body>
</html>

<html>
<head>
<meta charset="utf-8">
<title>Dom操作内容</title>
<style>
    #in_divall{
        background-color: antiquewhite;
    }
    
</style>
</head>

<body>
<!--

    操作内容
        表单；
            赋值；标签对象.value=""；
            取值；标签对象.value
        非表单；
            取值；
            innerHTML返回的是标签内的HTML内容.包含HTML标签
            
            innerText返回的诗标签内的文本值不包含HTML标签
    操作属性
        标签对象.getAttribute （’属性名‘）        获取指定属性的值
        return返回值
        标签对象.setAttribute('属性名'，‘属性值’)设置修改获取属性的值
        标签对象.removeAttribute（'属性名'）   删除制定属性

    操作样式（只能操作内联 姐就是行内）
        标签对象.style.样式名（获取样式名的值）
        标签对象.style.样式名（获取样式名的值）=样式值


-->
<input type="text" id="ueser" value="">
<button onClick="huiqu()">提交</button>
<button onClick="fuzhi()">赋值</button>

<div  id="fei_div" style="width: 200px;height: 100px;background-color: aquamarine;">这是表单获取的值。
</div>

<p id="p_span"><span>这是一个嵌套标签</span></p>

<a href="#" target="_self" id="a_in" onClick="getAtr()">这是一个A连接</a>


<div id="in_divall" onClick="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;
        console.log(stylecolor);
        div_style.style.width = 1000px;
        div_style.style.backgroundColor = red;
    }
    
    

    
    
    function getAtr(){
        var aaa=document.gatElementById('a_in');
        //获取属性  属性名
//        console.log(aaa.getAttribute('type'));
//        设置属性  属性名+属性值
//        var setAtr = aaa.getAttribute('target','_blank');
//        删除属性  属性名
        var remAtr = aaa.removeAttribute('id');
        
        

    }
    
    
    
    
    
    
//表单获取值
    function huoqu(){
//        一.首先要获取到输入框
        var ueser = document.getElementById('ueser');
//        二.获取值
        console.log(ueser.value);
    }
//表单赋值
    function fuzhi(){
//        一.首先要获取到输入框
//        二.赋值
        document.getElementById('ueser').value='李四';
        
    }
//    非标单获取值
    function div_huoqu(){
//        一。获取输入框的值
        var dicy = document.getElementById('p_span');
        console.log(dicy.innerText);
    }
//非标单赋值
    function div_fuzhi(){
        var dicy = document.getElementById('fei_div');
        console.log(dicy.innerHTML ="这是新的表单获取值");
    }
    




</script>

08.16号 dom 节点的创建 和删除DOM表单与非表单取值的方法 和操作属性与操作样式

猜你喜欢

08.16号 dom 节点的创建和删除DOM表单与非表单取值的方法和操作属性与操作样式