DOM与事件处理-优快云博客

本文链接：https://blog.youkuaiyun.com/Javaxinshoulllll/article/details/127657698

事件基础文档对象模型（Document Object Model，简称DOM）JavaScript的组

.DOM概念

事件基础文档对象模型（Document Object Model，简称DOM）

DOM又称为文档树模型

文档：一个网页可以称为文档

节点：网页中的所有内容都是节点（标签、属性、文本、注释等）

元素：网页中的标签

属性：标签(元素)的属性

3.获取元素的方式

1.根据id获取元素

  var div1 = document.getElementById("box1");

2.通过类名获取元素

 var p1Arr = document.getElementsByClassName("p1");

3、通过标签名获取元素

var tag1 = document.getElementsByTagName("div");

4.、通过name名获取元素

 var userList = document.getElementsByName("user");

5.通过选择器的querySelector获取元素

querySlector():获取指定选择器的第一个元素，参数就是选择器的名称

  var div1 = document.querySelector(".box1");

6.通过选择器的querySelectorAll获取元素

querySelectorAll():获取指定选择器的所有的元素，参数就是选择器的名称
 var boxList = document.querySelectorAll(".box1");

事件初识

事件：触发-响应机制

Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。

事件三要素

事件源:触发(被)事件的元素

事件类型:事件的触发方式(例如鼠标点击或键盘点击) 例如点击事件

事件处理程序:事件触发后要执行的代码(函数形式) 例如打印

(3)、事件触发的多种写法

HTML内部书写所有

HTML行内触发方法

HTML外部书写

非表单元素的属性操作

<style>
        button{
            width: 90px;
        }
        
    </style>
    
</head>
<body>
    <div>
        <button id="d1" >切换图片</button>
        <button id="d2">隐藏</button>
        <button id="d3">显示</button>
        <button id="d4">更改尺寸</button>
        <button id="d5">更改边框</button>
        
    </div>
    <div>
        <img src="./img/images/12.jpg"  alt="" id="i1">
    </div>

</body>
</html>
<script src="./js/点击.js"></script>
<script>
    GetId("d1")
    GetId("d2")
    GetId("d3")
    GetId("d4")
    GetId("d5")
    GetId("i1")
    d1.onclick=function(){
        if(i1.src=="http://127.0.0.1:5500/day1102/img/images/12.jpg"){
            i1.src="./img/images/2.jpg"
        }else{
            i1.src="./img/images/12.jpg"
        }
    }
    d2.onclick=function(){
        console.log(123);
        i1.src=" "
    }
    d3.onclick=function(){
        i1.src="./img/images/12.jpg"
    }
    d4.onclick=function(){
      i1.style.width=400+"px"
    }
    d5.console=function(){
        
    }

表单元素属性操作

value 用于大部分表单元素的内容获取(option除外)

this.value(获取输入值)

type 可以获取input标签的类型(输入框或复选框等)

disabled 禁用属性

checked 复选框选中属性

selected 下拉菜单选中属性

InnerText

只返回文本内容

nnerHTML

返回标签加内容

var a=GetId("d1")
    a.innerHTML= "<h1> 作业2：利用innerHTML属性创建元素</h1>"

事件

案例

1.隔行换色

<body>
    <ul>
        <li>1111111111</li>
        <li>2222222222</li>
        <li>3333333333</li>
        <li>4444444444</li>
        <li>5555555555</li>
        <li>6666666666</li>
        <li>7777777777</li>
    </ul>
</body>

</html>
<script src="./js/点击.js"></script>
<script>
    var lilist=document.getElementsByTagName("li")
    console.log(23
    );
    window.onclick = function () {
        console.log(23);
        for (let index = 0; index < lilist.length; index++) {
            const element = lilist[index];
            if (index % 2 == 0) {
                console.log(212);
                lilist[index].style.color = "red"
            }

        }
    }
</script>

新事件

1)、鼠标事件

onmouseover鼠标移入事件：在鼠标指针移动到元素上时触发。

 box1.onmouseover = function () {
    this.style.fontSize = "26px";
    this.style.height = "60px";
    console.log(111)
  }

onmouseout 鼠标移出事件：在鼠标指针移出元素后触发

 // 鼠标移出事件
  box1.onmouseout = function () {
    this.innerText = "鼠标移出了哈！";
    this.style.height = "30px";
    this.style.fontSize = "16px";
  }

onmouseenter鼠标进入事件：在鼠标指针进入到元素上时触发。

onmouseleave 鼠标离开事件：在鼠标指针离开元素后触发

onfocus获取焦点事件：在鼠标光标获取输入框焦点时触发

onblur失去焦点事件：在鼠标光标失去焦点时触发。

<div>
    <form action="">
        <table>
            <tr>
                <td >请输入</td>
                <td><input type="text" id="t1"></td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>
<script src="./js/点击.js"></script>
<script>
    var a =GetId("t1")
    a.onblur=function(){
        console.log(this.value);//获取输入值
    }
</script>

onclick单击事件：在鼠标指针单击时触发

 var a= GetId("d1")
  a.onclick=function(){
       console.log(123);
  }

ondblclick双击事件：在鼠标光标双击时触发。

键盘事件

onkeydown：键盘按下

案例飞机大战

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 800px;
            height: 800px;
            margin: 0 auto;
            background-color: blue;
            position: relative;
        }

        img {
            position: absolute;

        }
    </style>
</head>

<body>
    <div>
        <img src="./img/images/fj.png" alt="" id="i1">
    </div>
</body>

</html>
<script src="./js/点击.js"></script>
<script>
    var i1i = GetId("i1")
    bot = 0;
    lef = 363;

    console.log(i1i);
    i1i.style.bottom = bot + 'px';
    i1i.style.left = lef + 'px';



    window.onkeydown = function (event) {//键盘按下事件

        var a = event.key
        if (a == "w" && bot < 726) {
            bot += 10
        } else if (a == "s" && bot>0) {
            bot -= 10

        }else if(a=="a"&&lef>0){
            lef-=10

        }else if(a=="d"&&lef<733){
           lef+=10
        }
        console.log(bot);
        i1i.style.bottom = bot + "px"
        i1i.style.left = lef + "px"

    }

</script>

onkeyup:键盘抬起