JSP5 DOM

最新推荐文章于 2024-03-09 08:45:00 发布

Big_Study_Father

最新推荐文章于 2024-03-09 08:45:00 发布

阅读量368

点赞数

CC 4.0 BY-SA版权

分类专栏： jsp

本文链接：https://blog.youkuaiyun.com/Big_Study_Father/article/details/89738430

jsp 专栏收录该内容

7 篇文章

订阅专栏

DOM基础

1.DOM查找
document.getElementById(“id”);
返回指定对象的第一个引用
document.getElementsbyTagName(“Tag”);//返回数组
返回所有Tag标签集合


  var box=document.getElementById('box');
  console.log(box);
    var lis=document.getElementsByTagName("li");
    console.log(lis.length);
    var lis1=document.getElementById("list1").getElementsByTagName("li");
    console.log(lis1.length);

2.设置DOM元素样式
innerHTML;


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <div class='box' id='box'>elemtnt</div>
  <div>
    <ul id="list1">
      <li>前端</li>
      <li>后端</li>
      <li><b>安全</b></li>
    </ul>

    <ol>
      <li>ahu</li>
      <li>llaa</li>
      <li><b>haha</b></li>

    </ol>

  </div>


</body>

</html>

<script type="text/javascript">
  var box = document.getElementById('box');
  box.style.color = "#f00";

  console.log(box);
  var lis1 = document.getElementById("list1").getElementsByTagName("li");

  for (var i = 0; i < lis1.length; i++) {
    lis1[i].style.fontWeight = "bold";
    //获取li内部的所有内容 包括标签
    console.log(lis1[i].innerHTML);
    //操作li内部的所有内容
    lis1[i].innerHTML += "code!";


  }
  console.log(lis1.length);
  //动态更改类名
  box.className = "newbox";
  //获取类名
  console.log(document.getElementById("box").className); //newbox
</script>
<script type="text/jscript" src="http://localhost:35729/livereload.js">

</script>

获取更改删除属性

  <p id='text' align='center' data-type='title'>context</p>

  var p = document.getElementById("text");
  console.log(p.align); //center
  console.log(p.getAttribute("data-type")); //title
  //属性设置
  p.setAttribute("class", "classp");
  console.log(p.getAttribute("class"));
  //属性删除
  p.removeAttribute("class");
  console.log(p.getAttribute("class"));

DOM事件

事件语法:
<tag 事件=“执行脚本”></tag>


  <input type="button" class='btn' value="弹出" onclick="alert('sada??')">
  <div id='btn' class="btn"  onmouseover="onmouseoverFn(this,'#f00')" onmouseout="onmouseoverFn(this,'#00f')">
  开始
  </div>

  function onmouseoverFn(btn,bgcolor){
    btn.style.background=bgcolor;
  }
  function onmouseout(btn){
    btn.style.background=bgcolor;
  }

window.onload 当jap脚本放在head中时

  window.onload=function (){

  var box=document.getElementById("box");
  var clicked=function (){
    alert("clicked");
  }
  box.onclick=clicked;

  }

onfocus onblur //text文本框获取失去焦点

  <script>
    window.onload = function() {
      var phone = document.getElementById("phone");
      tip = document.getElementById("tip");

      //获取焦点时触发
      phone.onfocus = function() {
        //点击后显示文本框
        tip.style.display = "block";
      }

      phone.onblur = function() {
        //  console.log(this); //
        var str = this.value;
        if (str.length == 3 && isNaN(str) == false) { //是否非数字
          console.log("right!!");
          tip.innerHTML = '<img src="aa.png" alt="" />';
        } else {
          console.log("输入的什么j8玩意");
          tip.innerHTML = '<img src="ab.png" alt="" />';
        }
      }
    }
  </script>

选项单更改网页背景色


  <script>
    window.onload = function() {

      menu = document.getElementById("menu");
      //属性改变时 出发事件
      menu.onchange = function() {
      //两种方法都可以获取被选中值
        var val1 = this.value;
        var val2 = menu.options[menu.selectedIndex].value;
        console.log("change:" + val1);
        console.log(val2);
        //盐色kong 设置默认背景色
        if(val2=="")  document.body.style.background="#def";
        else document.body.style.background=val2;
      }

    }
  </script>

</head>

<body>

  <div class="box" name="" id="bgselect">请选择背景色:
    <select class="" name="" id="menu">
      <option value="">请选择</option>
      <option value="#0f0">clo1</option>
      <option value="#f00" selected>clo2</option>
      <option value="#fff">clo3</option>
      <option value="#00f">clo4</option>

    </select>




  </div>






</body>

onsubmit 表单被确认时发生
onmousedown 点击前
onmouseup 松开

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script>

  </script>



</head>

<body>

<div class="box" id="box">拖动</div>




</body>

</html>
<script type="text/javascript">
var box=document.getElementById("box");
box.onmousedown=function(){
  console.log("我被点击了");
}
box.onmousemove=function(){
  console.log("我被移动了");
}
box.onmouseup=function(){
  console.log("离开了");
}


//浏览页面大小被改变时
window.onresize=function(){
  console.log("window size changed!");
}

</script>

<style>
.box{
  height: 100px;
  weight:200px;
  background-color:#0f0;
}


</style>

<script type="text/jscript" src="http://localhost:35729/livereload.js">

</script>

onkeydown 按下键盘发生
onkeypress 按下并释放时发生
onkeyup松开时发生

文本框字数实时更新

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script>
    window.onload = function() {
      //获取文本框
      var text = document.getElementById("text");
      var total = 30;
      var allow;
      document.onkeyup = function() {
        var len = text.value.length;
        allow = total - len;
        count.innerHTML = allow;
      }

    }
  </script>



</head>

<body>

  <div>
    <p>您还可以输入<span><em id="count">30</em>/30</span></p>
    <div class="input">
      <textarea name="name" id="text" rows="8" cols="80"></textarea>
    </div>
  </div>

</body>

</html>
<script type="text/javascript">

</script>

<style>
  .box {
    height: 100px;
    weight: 200px;
    background-color: #0f0;
  }
</style>

<script type="text/jscript" src="http://localhost:35729/livereload.js">

</script>