BOM操作实例

BOM操作实例构思

　　1. 首先，设置一个可输入的文本框，输入内容通过按钮获取到；在通过另一个按钮给文本框赋值让内容在文本框显示出来。

　　2. 首先，设置一个div，里面有内容，通过按钮获取到内容，也可以修改赋值内容。

HTML ：

<input type="text" id="user">
<button onClick="huoqu()">获取</button>
<button onClick="fuzhi()">赋值</button>

<div id="fei" style=" 200px;height: 100px;background-color: aqua">
    hahahahahhaahhaha
</div>
<button onClick="huoqu_div()">div获取</button>
<button onClick="fuzhi_div()">div赋值</button>


<p id="qq"><span>嵌套标签</span></p>

<a href="#" target="_self" id="a1" onClick="get()">sfagghfg</a>

<div id="pp" style=" 200px;height: 400px"></div>

css：

#pp{
        background-color: blue;
    }

js：

function huoqu(){
    var users =document.getElementById('user');
        console.log(users.value);
}
function huoqu_div(){
//    1.获取输入框的值
    var cc = document.getElementById("fei");
    console.log(cc.innerHTML);
}
function fuzhi_div(){
//    1.获取输入框的值
    var dd = document.getElementById("fei");
    console.log(dd.innerHTML='sassa');
}
function fuzhi(){
//    1.获取输入框的值
    document.getElementById("user").value="李四";
    
}

    
function get(){
    var df = document.getElementById('a1').getAttribute('target');
    console.log(df);
}    

效果图：

　　1.获取

　　1.赋值：

　　2.获取：

　　2.赋值：