BOM操作实例

BOM操作实例构思

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

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

HTML ：

 1 <input type="text" id="user">
 2 <button onClick="huoqu()">获取</button>
 3 <button onClick="fuzhi()">赋值</button>
 4 
 5 <div id="fei" style="width: 200px;height: 100px;background-color: aqua">
 6     hahahahahhaahhaha
 7 </div>
 8 <button onClick="huoqu_div()">div获取</button>
 9 <button onClick="fuzhi_div()">div赋值</button>
10 
11 
12 <p id="qq"><span>嵌套标签</span></p>
13 
14 <a href="#" target="_self" id="a1" onClick="get()">sfagghfg</a>
15 
16 <div id="pp" style="width: 200px;height: 400px"></div>

css：

1 #pp{
2         background-color: blue;
3     }

js：

 1 function huoqu(){
 2     var users =document.getElementById('user');
 3         console.log(users.value);
 4 }
 5 function huoqu_div(){
 6 //    1.获取输入框的值
 7     var cc = document.getElementById("fei");
 8     console.log(cc.innerHTML);
 9 }
10 function fuzhi_div(){
11 //    1.获取输入框的值
12     var dd = document.getElementById("fei");
13     console.log(dd.innerHTML='sassa');
14 }
15 function fuzhi(){
16 //    1.获取输入框的值
17     document.getElementById("user").value="李四";
18     
19 }
20 
21     
22 function get(){
23     var df = document.getElementById('a1').getAttribute('target');
24     console.log(df);
25 }    

效果图：

　　1.获取

　　1.赋值：

　　2.获取：

 

　　2.赋值：

 

 

转载于:https://www.cnblogs.com/zhai113/p/11425113.html