1.点击按钮显示图片

  1. <input type="button" value="显示图片" id="btn"/>
  2. <img src="" alt="" id="im" />
  3. //根据id获取按钮,
  4.   var btnObj=document.getElementById("btn");
  5.   //为按钮注册点击事件,添加事件处理函数
  6.   btnObj.onclick=function () {
  7.     //根据id获取图片的标签,设置图片的src属性值
  8.     var imObj=document.getElementById("im");
  9.     imObj.src="images/liuyan.jpg";
  10.     //设置图片的大小
  11.     //直接设置属性值，无需加单位px
  12.     imObj.width="300";
  13.     imObj.height="400";
  14.   };

2.点击按钮修改p标签中的内容

  1. //根据id获取按钮,为按钮注册点击事件,添加事件处理函数
  2. document.getElementById("btn").onclick=function () {
  3.     //根据id获取p标签,设置内容
  4.     //凡是成对的标签,中间的文本内容,设置的时候,都使用innerText这个属性的方式
  5.     document.getElementById("p1").innerText="这是一个p";
  6. };

3.点击按钮修改a标签的链接和文字

  1. document.getElementById("btn").onclick = function () {
  2.     //根据id获取超链接,设置href属性
  3.     var aObj = document.getElementById("ak");
  4.     aObj.href = "http://www.baidu.cn";
  5.     //根据id获取超链接,设置文字内容
  6.     aObj.innerText = "学习前端真快乐";
  7. };

4.点击(每个)图片弹出对话框

  1. <img src="images/1.jpg" alt="" id="im1" />
  2. <img src="images/2.jpg" alt="" id="im2" />
  3. <img src="images/3.jpg" alt="" id="im3" />
  4. //1.分别绑定事件
  5. document.getElementById("im1").onclick=function () {
  6.     alert("被点了");
  7. };
  8. document.getElementById("im2").onclick=function () {
  9.     alert("被点了");
  10. };
  11. document.getElementById("im3").onclick=function () {
  12.     alert("被点了");
  13. };
  14. //2.获取到所有标签，循环绑定事件
  15. //根据标签的名字获取图片标签,分别注册点击事件
  16. var imgObjs=document.getElementsByTagName("img");
  17.     //循环遍历数组,获取每个图片标签,注册点击事件,添加事件处理函数
  18.     for(var i=0;i<imgObjs.length;i++){
  19.         imgObjs[i].onclick=function () {
  20.         alert("被点击了");
  21.     };
  22. }

5.点击按钮修改value属性值

  1. <input type="button" value="按钮" id="btn"/>
  3. var btnObj = document.getElementById("btn");
  4. btnObj.onclick = function () {
  5.     //修改按钮的value属性
  6.     this.value="我是按钮,谁咬我,我就咬谁";
  7.     this.type="text";
  8.     this.id="btn2";
  9. };

6.点击按钮修改每个图片的title属性

  1. <input type="button" value="按钮" id="btn"/>
  3. document.getElementById("btn").onclick = function () {
  4.     //返回的是一个伪数组
  5.     //伪数组具备length 、按索引存储数据、遍历等行为，但是不具备数组的方法，比如push() pop()等
  6.     var imgObjs = document.getElementsByTagName("img");
  7.     imgObjs[0].alt = "改了";
  8.     imgObjs[0].title = "现实吧";
  9. };

7.点击图片修改自身的宽和高

  1. <img src="images/liuyan.jpg" alt="" id="im"/>
  3. //点击图片,修改自身的宽和高
  4. var imgObj = document.getElementById("im");
  5. imgObj.onclick = function () {
  6.     //直接使用自身属性，不需要px  
  7.     this.width = "200";
  8.     this.height = "300";
  9. };

8.点击按钮修改所有p标签内容

  1. <input type="button" value="显示效果" id="btn"/>
  2. <div id="dv1">
  3.   <p>哈哈,我又变帅了</p>
  4.   <p>哈哈,我又变帅了</p>
  5.   <p>哈哈,我又变帅了</p>
  6.   <p>哈哈,我又变帅了</p>
  7.   <p>哈哈,我又变帅了</p>
  8. </div>
  9. <div id="dv2">
  10.   <p>嘎嘎</p>
  11.   <p>嘎嘎</p>
  12.   <p>嘎嘎</p>
  13.   <p>嘎嘎</p>
  14. </div>
  15. //案例:点击按钮设置多个p标签的文字内容
  16. //根据id获取按钮,注册点击事件,添加事件处理函数
  17. document.getElementById("btn").onclick=function () {
  18.     //根据标签名字获取标签
  19.     var pObjs= document.getElementsByTagName("p");
  20.     //var pObjs=document.getElementById("dv1").getElementsByTagName("p");
  21.     //循环遍历这个数组
  22.     for(var i=0;i<pObjs.length;i++){
  23.         //每个p标签,设置文字
  24.         pObjs[i].innerText="我们都是p";
  25.     }
  26. };

9.点击按钮修改所有文本框内容

  1. <input type="button" value="修改文本框的值" id="btn"/><br/>
  2. <input type="text" value=""/><br/>
  3. <input type="text" value=""/><br/>
  4. <input type="text" value=""/><br/>
  5. <input type="text" value=""/><br/>
  6. <input type="button" value=""/><br/>
  7. <input type="text" value=""/><br/>
  8. <input type="text" value=""/><br/>
  9. <input type="text" value=""/><br/>
  10. //根据id获取按钮,为按钮注册点击事件,添加事件处理函数
  11. document.getElementById("btn").onclick = function () {
  12.     //获取所有的文本框
  13.     var inputs = document.getElementsByTagName("input");
  14.     for (var i = 0; i < inputs.length; i++) {
  15.         //判断这个元素是不是按钮
  16.         if (inputs[i].type != "button") {
  17.             inputs[i].value = "呵呵，天亮了";
  18.         }
  19.     }
  20. };

10.按钮排他性

  1. <input type="button" value="没怀孕"/>
  2. <input type="button" value="没怀孕"/>
  3. <input type="button" value="没怀孕"/>
  4. <input type="button" value="没怀孕"/>
  5. <input type="button" value="没怀孕"/>
  6. <input type="button" value="没怀孕"/>
  7. //获取所有的按钮,分别注册点击事件
  8. var btnObjs = document.getElementsByTagName("input");
  9. //循环遍历所有的按钮
  10. for (var i = 0; i < btnObjs.length; i++) {
  11.     //为每个按钮都要注册点击事件
  12.     btnObjs[i].onclick = function () {
  13.         //把所有的按钮的value值设置为默认的值:没怀孕
  14.         for (var j = 0; j < btnObjs.length; j++) {
  15.             btnObjs[j].value = "没怀孕";
  16.         }
  17.         //当前被点击的按钮设置为:怀孕了
  18.         this.value = "怀孕了";
  19.     };
  20. }

11.点击按钮修改图片

  1. <input type="button" value="显示大图" id="btn"/>
  2. <img src="images/1-small.jpg" alt="" id="im">
  3. function my$(id) {
  4.     return document.getElementById(id);
  5. }
  6. my$("btn").onclick=function () {
  7.     my$("im").src="images/1.jpg";
  8. };

12.点击按钮设置宽高

  1. //点击按钮,修改div的宽,高,背景颜色
  2. my$("btn").onclick = function () {
  3.     //使用css属性，值要px
  4.     my$("dv").style.width = "300px";
  5.     my$("dv").style.height = "200px";
  6.     //css  -->background-color
  7.     //js   -->backgroundColor
  8.     my$("dv").style.backgroundColor = "pink";
  9. };

13.点击按钮切换显示和隐藏

  1. <input type="button" value="隐藏" id="btn"/>
  2. <div id="dv">
  3. //根据id获取按钮,注册点击事件,添加事件处理函数
  4. my$("btn").onclick=function () {
  5.     //判断当前点击的按钮的value属性值
  6.     if(this.value=="隐藏"){
  7.         my$("dv").style.display="none";//隐藏
  8.         this.value="显示";
  9.     }else if(this.value=="显示"){
  10.         my$("dv").style.display="block";//显示
  11.         this.value="隐藏";
  12.     }
  13. };

14.点击按钮设置div的样式

  1. <input type="button" value="设置样式" id="btn"/>
  2. <div id="dv"></div>
  3. <style>
  4.     .cls {
  5.       width: 300px;
  6.       height: 200px;
  7.       background-color: yellow;
  8.       border: 2px solid red;
  9.     }
  10. </style>
  11. //设置div的样式
  12. my$("btn").onclick = function () {
  13.       //在js代码中DOM操作的时候,设置元素的类样式,不用class关键字,
  14.       //应该使用,className
  15.       //如果有多个样式，中间用空格隔开
  16.       my$("dv").className="cls";
  17. };

15.点击按钮开关灯

  1. <input type="button" value="开/关灯" id="btn"/>
  2. <style>
  3.     .cls {
  4.       background-color: black;
  5.     }
  6. </style>
  7. my$("btn").onclick = function () {
  8.     //获取body标签
  9.     document.body.className = document.body.className != "cls" ? "cls" : "";
  10. };

16案例：隔行变色

  1. <input type="button" value="隔行变色" id="btn"/>
  2. <ul id="uu">
  3.   <li>红旗</li>
  4.   <li>五菱宏光</li>
  5.   <li>奔驰</li>
  6.   <li>兰博基尼</li>
  7.   <li>哈弗</li>
  8.   <li>奥拓</li>
  9.   <li>奥迪</li>
  10.   <li>悍马</li>
  11. </ul>
  12. my$("btn").onclick = function () {
  13.     //获取所有的li标签
  14.     var list = my$("uu").getElementsByTagName("li");
  15.     for (var i = 0; i < list.length; i++) {
  16.       list[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";
  17.     }
  18. };

17.根据name属性值获取元素

  1. <input type="button" value="显示效果" id="btn"/><br/>
  2. <input type="text" value="您好" name="name1"/><br/>
  3. <input type="text" value="您好" name="name2"/><br/>
  4. <input type="text" value="您好" name="name1"/><br/>
  5. <input type="text" value="您好" name="name3"/><br/>
  6. <input type="text" value="您好" name="name1"/><br/>
  7. <input type="text" value="您好" name="name1"/><br/>
  8. my$("btn").onclick=function () {
  9.     //通过name属性值获取元素-------表单的标签
  10.     var inputs=document.getElementsByName("name1");
  11.     for(var i=0;i<inputs.length;i++){
  12.       inputs[i].value="我很好";
  13.     }
  14. };

18.根据类样式来获取元素

  1. <p>这是一个p</p>
  2. <p class="cls">这是另一个p</p>
  3. <span class="cls">这是第一个span</span><br/>
  4. <span>这是第二个span</span><br/>
  5. <div class="cls">这是第一个div</div>
  6. <div>这是第二个div</div>
  7. <input type="button" value="显示效果" id="btn"/><br/>
  8. <script>
  9.   //点击按钮设置应用cls类样式的标签的背景颜色为红色
  10.   //getElementsByClassName();------>h5的，IE9之后支持
  11.   my$("btn").onclick = function () {
  12.     //根据类样式的名字来获取元素
  13.     var objs = document.getElementsByClassName("cls");
  14.     for (var i = 0; i < objs.length; i++) {
  15.       //设置每个元素的背景颜色
  16.       objs[i].style.backgroundColor = "red";
  17.     }
  18.   };
  19. </script>

19.querySelector获取元素

  1. <input type="button" value="显示效果" id="btn"/>
  2. <p>这是一个p</p>
  3. <p class="cls">这是一个p</p>
  4. <span>这是一个span</span>
  5. <span class="cls">这是一个span</span>
  6. var btnObj= document.querySelector("#btn");
  7. btnObj.onclick=function () {
  8.       alert("哈哈,我又变帅了");
  9. };
  10. var objs=document.querySelectorAll(".cls");
  11. for(var i=0;i<objs.length;i++){
  12.     objs[i].style.backgroundColor="green";
  13. }