BOM操作实例

时间:2019-08-28
本文章向大家介绍BOM操作实例,主要包括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