Javascript 之 DOM案例（1）

最新推荐文章于 2024-02-06 21:08:07 发布

Ivy_Ch

最新推荐文章于 2024-02-06 21:08:07 发布

阅读量364

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Ivy_Ch/article/details/100049891

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.点击按钮弹出对话框

<input type="button" value="弹出来" onclick="alert('我是弹框')">

2.点击按钮修改超链接的地址和热点文字

 // 根据id获取按钮，注册点击事件，增加事件处理函数
  document.getElementById("bth").onclick()=function () {
      // 根据id获取超链接，设置href的属性
      document.getElementById("bj").href="https://123.sogou.com/";
      //根据id获取超链接，设置文字内容
      document.getElementById("bj").innerText="嘎嘎";
  }
  //优化代码
  document.getElementById("bth").onclick()=function () {
      //根据id获取按钮，赋值给变量aobj
      var aObj= document.getElementById("bj");
      aObj.href="https://123.sogou.com/";
      aObj.innerText="嘎嘎";
  }

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

<img src="images/1.jpg" alt="" id="im1" />
<img src="images/2.jpg" alt="" id="im2" />
<img src="images/3.jpg" alt="" id="im3" />
<script>
//  document.getElementById("im1").onclick=function () {
//    alert("被点了");
//  };
//  document.getElementById("im2").onclick=function () {
//    alert("被点了");
//  };
//  document.getElementById("im3").onclick=function () {
//    alert("被点了");
//  };

  //根据标签的名字获取图片标签,分别注册点击事件
  var imgObjs=document.getElementsByTagName("img");
  //循环遍历数组,获取每个图片标签,注册点击事件,添加事件处理函数
  for(var i=0;i<imgObjs.length;i++){
    imgObjs[i].onclick=function () {
      alert("被点击了");
    };
  }
</script>

4.点击图片设置自身宽和高

<img src="images/liuyan.jpg" alt="" id="im"/>
<script>
  //点击图片,修改自身的宽和高
  var imgObj = document.getElementById("im");
  imgObj.onclick = function () {
    this.width = "200";
    this.height = "300";
  };
</script>

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

<input type="button" value="显示效果" id="btn"/>
<img src="images/cangjingkong.jpg" alt="哈哈" title="嘎嘎"/>
<script>
  document.getElementById("btn").onclick = function () {
    //返回的是一个伪数组
    var imgObjs = document.getElementsByTagName("img");
    imgObjs[0].alt = "改了";
    imgObjs[0].title = "现实吧";
  };
</script>

6.点击按钮显示哈哈(排他功能)

<input type="button" value="嘎嘎"/>
<input type="button" value="嘎嘎"/>
<input type="button" value="嘎嘎"/>
<input type="button" value="嘎嘎"/>
<input type="button" value="嘎嘎"/>
<input type="button" value="嘎嘎"/>
<script>
  //获取所有的按钮,分别注册点击事件
  var btnObjs = document.getElementsByTagName("input");
  //循环遍历所有的按钮
  for (var i = 0; i < btnObjs.length; i++) {
    //为每个按钮都要注册点击事件
    btnObjs[i].onclick = function () {
      //把所有的按钮的value值设置为默认的值:嘎嘎
      for (var j = 0; j < btnObjs.length; j++) {
        btnObjs[j].value = "嘎嘎";
      }
      //当前被点击的按钮设置为:哈哈
      this.value = "哈哈";
    };

  }
</script>

7.点击按钮显示和隐藏div

<style>
    div{
      width: 300px;
      height: 200px;
      background-color: darkmagenta;
    }
</style>

<body>
<input type="button" value="隐藏" id="btn"/>
<div id="dv">

</div>
<script>
function my$(id){
	return document.getElementById(id);
}
 //根据id获取按钮,注册点击事件,添加事件处理函数
  my$("btn").onclick=function () {
      //判断当前点击的按钮的value属性值
    if(this.value=="隐藏"){
      my$("dv").style.display="none";//隐藏
      this.value="显示";
    }else if(this.value=="显示"){
      my$("dv").style.display="block";//显示
      this.value="隐藏";
    }
  };
</script>
</body>

8.点击超链接切换图片

<a href="images/liuyan.jpg" id="im1"><img src="images/1-small.jpg" alt="" id="im2"></a>
<script>
    document.getElementById("im1").onclick=function () {
        document.getElementById("im2").src=this.href;
        return false;
    }
</script>

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

<input type="button" value="按钮" id="bth">
<div id="div1">
  <p>我</p>
  <p>去</p>
  <p>你</p>
  <p>的</p>
</div>

<script>
  //根据id获取按钮,注册点击事件,添加事件处理函数
  var bthObj=document.getElementById("bth");
//根据id获取div里的p标签，注册点击事件,添加事件处理函数
  var pObj=document.getElementById("div1").getElementsByTagName("p")
  bthObj.onclick=function () {
      //循环遍历这个数组
      for (var i = 0; i < pObj.length; i++) {
      //设置p标签的内容
          pObj[i].innerText="变";
      }
  }
</script>

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

<input type="button" value="修改文本框的值" id="btn"/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<script>

  //根据id获取按钮,为按钮注册点击事件,添加事件处理函数
  document.getElementById("btn").onclick = function () {
    //获取所有的文本框
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
      //判断这个元素是不是按钮
      if (inputs[i].type != "button") {
        inputs[i].value = "其实,我喜欢你";
      }
    }
  };
</script>

11.点击按钮切换图片

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

12.点击超链接停止跳转页面

<a href="images/liuyan.jpg" id="im1"><img src="images/1-small.jpg" alt="" id="im2"></a>
<script>
    document.getElementById("im1").onclick=function () {
        document.getElementById("im2").src=this.href;
        return false;
    }
</script>

13.点击案例禁用文本框

<input type="button" value="禁用文本框" id="btn"/>
<input type="text" value="文本框" id="txt"/>
<script>
  //先根据id获取按钮,为按钮注册点击事件,添加事件处理函数
  document.getElementById("btn").onclick=function () {
      //根据id获取文本框,设置disabled属性
    document.getElementById("txt").disabled=true;
  };
</script>

14.点击案例隔行变色

<input type="button" value="隔行变色" id="btn"/>
<ul id="uu">
  <li>红旗</li>
  <li>五菱宏光</li>
  <li>奔驰</li>
  <li>兰博基尼</li>
  <li>哈弗</li>
  <li>奥拓</li>
  <li>奥迪</li>
  <li>悍马</li>
</ul>

<script>
 document.getElementById("btn").onclick = function () {
    //获取所有的li标签
    var list = document.getElementById("uu").getElementsByTagName("li");
    for (var i = 0; i < list.length; i++) {
      list[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";
    }
  };
</script>

15.高亮度显示

<ul>
  <li>金士百</li>
  <li>雪花</li>
  <li>百威</li>
  <li>燕京</li>
  <li>青岛</li>
  <li>崂山</li>
  <li>珠江</li>
  <li>华丹</li>
</ul>
<script>
  //鼠标进入和鼠标离开两个事件
  //获取所有的li标签
  var list = document.getElementsByTagName("li");
  for (var i = 0; i < list.length; i++) {
    //为li注册鼠标进入事件
    list[i].onmouseover = function () {
      this.style.backgroundColor = "yellow";
    };
    //为li注册鼠标离开事件
    list[i].onmouseout = function () {
      //恢复到这个标签默认的颜色
      this.style.backgroundColor = "";
    };
  }
</script>

16.检验密码长度

<input type="text" value="" id="txt"/>
<script src="common.js"></script>
<script>

  //获取文本框
  document.getElementById("txt").onblur=function () {
    //判断密码的长度
    if(this.value.length>=6&&this.value.length<=10){
      this.style.backgroundColor="red";
    }else{
      this.style.backgroundColor="green";
    }
  };

17.点击按钮创建列表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div {
      width: 300px;
      height: 400px;
      background-color: green;
    }
  </style>
</head>
<body>
<input type="button" value="创建列表" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  var names = ["杨过", "郭靖", "张无忌", "张三丰", "乔峰", "段飞", "丁棚"];
  my$("btn").onclick = function () {
    var str = "<ul style='list-style-type: none;cursor: pointer'>";
    //根据循环创建对应对数的li
    for (var i = 0; i < names.length; i++) {
      str += "<li>" + names[i] + "</li>";
    }
    str += "</ul>";
    my$("dv").innerHTML = str;

    //代码执行到这里,li已经有了
    //获取所有的li,遍历,添加鼠标进入事件,鼠标离开事件
    var list = my$("dv").getElementsByTagName("li");
    for (var i = 0; i < list.length; i++) {
      //鼠标进入
      list[i].onmouseover = function () {
        this.style.backgroundColor = "yellow";
      };
      //鼠标离开
      list[i].onmouseout = function () {
        this.style.backgroundColor = "";
      };
    }
  };

</script>
</body>
</html>

18.动态创建列表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style-type: none;
      cursor: pointer;
    }

    div {
      width: 200px;
      height: 400px;
      border: 2px solid red;
    }
  </style>
</head>
<body>
<input type="button" value="创建列表" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  var kungfu = ["降龙十八掌", "黯然销魂掌", "葵花宝典", "九阴真经", "吸星大法", "如来神掌", "化骨绵掌", "玉女心经", "极乐神功", "辟邪剑谱"];

  //点击按钮动态的创建列表,把列表加到div中
  my$("btn").onclick = function () {
    //创建ul,把ul立刻加入到父级元素div中
    var ulObj = document.createElement("ul");
    my$("dv").appendChild(ulObj);
    //动态的创建li,加到ul中
    for (var i = 0; i < kungfu.length; i++) {
      var liObj = document.createElement("li");
      //设置li中间的文字内容
      liObj.innerHTML = kungfu[i];
      ulObj.appendChild(liObj);
      //为li添加鼠标进入事件
      liObj.onmouseover = mouseoverHandle;
      //为li添加鼠标离开事件
      liObj.onmouseout = mouseoutHandle;
    }
  };

  //此位置.按钮的点击事件的外面
  function mouseoverHandle() {
    this.style.backgroundColor = "red";
  }
  function mouseoutHandle() {
    this.style.backgroundColor = "";
  }

  //如果是循环的方式添加事件,推荐用命名函数
  //如果不是循环的方式添加事件,推荐使用匿名函数


</script>
</body>
</html>

19、点击按钮创建一个表格

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<input type="button" value="创建表格" id="btn"/>
<div id="dv"></div>
<script>
  function my$(id) {
    return document.getElementById(id);
}
  var arr=[
    {name:"百度",href:"http://www.baidu.com"},
    {name:"谷歌",href:"http://www.google.com"},
    {name:"优酷",href:"http://www.youku.com"},
    {name:"土豆",href:"http://www.tudou.com"},
    {name:"快播",href:"http://www.kuaibo.com"},
    {name:"爱奇艺",href:"http://www.aiqiyi.com"}
  ];

  //点击按钮创建表格
  my$("btn").onclick=function () {
    //创建table加入到div中
    var tableObj=document.createElement("table");
    tableObj.border="1";
    tableObj.cellPadding="0";
    tableObj.cellSpacing="0";
    my$("dv").appendChild(tableObj);
    //创建行,把行加入到table中
    for(var i=0;i<arr.length;i++){
      var dt=arr[i];//每个对象
      var trObj=document.createElement("tr");
      tableObj.appendChild(trObj);
      //创建第一个列,然后加入到行中
      var td1=document.createElement("td");
      td1.innerText=dt.name;
      trObj.appendChild(td1);
      //创建第二个列
      var td2=document.createElement("td");
      td2.innerHTML="<a href="+dt.href+">"+dt.name+"</a>";
      trObj.appendChild(td2);
    }
  };

</script>
</body>
</html>

20.动态建立表格

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style-type: none;
      cursor: pointer;
    }

    div {
      width: 200px;
      height: 400px;
      border: 2px solid red;
    }
  </style>
</head>
<body>
<input type="button" value="创建列表" id="btn"/>
<div id="dv"></div>

<script>
 function my$(id) {
    return document.getElementById(id);
}
  var kungfu = ["降龙十八掌", "黯然销魂掌", "葵花宝典", "九阴真经", "吸星大法", "如来神掌", "化骨绵掌", "玉女心经", "极乐神功", "辟邪剑谱"];

  //点击按钮动态的创建列表,把列表加到div中
  my$("btn").onclick = function () {
    //创建ul,把ul立刻加入到父级元素div中
    var ulObj = document.createElement("ul");
    my$("dv").appendChild(ulObj);
    //动态的创建li,加到ul中
    for (var i = 0; i < kungfu.length; i++) {
      var liObj = document.createElement("li");
      //设置li中间的文字内容
      liObj.innerHTML = kungfu[i];
      ulObj.appendChild(liObj);
      //为li添加鼠标进入事件
      liObj.onmouseover = mouseoverHandle;
      //为li添加鼠标离开事件
      liObj.onmouseout = mouseoutHandle;
    }
  };

  //此位置.按钮的点击事件的外面
  function mouseoverHandle() {
    this.style.backgroundColor = "red";
  }
  function mouseoutHandle() {
    this.style.backgroundColor = "";
  }

  //如果是循环的方式添加事件,推荐用命名函数
  //如果不是循环的方式添加事件,推荐使用匿名函数


</script>
</body>
</html>

Ivy_Ch

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript 之 DOM案例（1）

1.点击按钮弹出对话框<input type="button" value="弹出来" onclick="alert('我是弹框')">2.点击按钮修改超链接的地址和热点文字 // 根据id获取按钮，注册点击事件，增加事件处理函数 document.getElementById("bth").onclick()=function () { // 根据id...
复制链接

扫一扫