dom元素

    xiaoxiao2022-07-03  107

    一.dom元素的事件

    1. 键盘事件

    onkeydown键盘按下 onkeyup键盘抬起 onkeypress按键事件

    2. 标单事件

    onfocus获得焦点 onblur失去焦点

    3. 鼠标事件

    onclick单击 ondbclick 双击 onmouseleave水平离开onmouseout离开 onmousemove 鼠标移动 onmouseenter 鼠标进入 onmouseover 鼠标悬停) onmousewheel 鼠标滚轮事件

    4. 浏览器事件( window事件)

    onload 加载完成事件 onresize 窗口变化事件 onerror 报错事件 onscroll 滑动事件

    5.触屏事件

    touch 触屏 touchstart 开始触屏 touchmove 触屏移动 touchend 触屏结束

    二. js里dom元素的操作

    1. getElementsByClassName 返回集合

    var btn=document.getElementsByClassName("btnlist"); console.log(btn[0]);

    2.getElementsByName 返回的是nodelist 类型 用法和数组一致

    var btn1=document.getElementsByName("btninfo"); console.log(btn1[0]);

    3.getElementById  返回的是单个对象 直接使用

    var btn2=document.getElementById("btn"); console.log(btn2);

    4. getElementsByTagName 返回的是htmlcollection 集合 用法和数组一致

    var btn3=document.getElementsByTagName("button"); console.log(btn3[0]

    5.querySelector和 querySelectorAll选取

    var btn4=document.querySelector(".btnlist");可以选中btnlist的一个dom元素 console.log(btn4); var btn5=document.querySelectorAll(".btnlist");可以选取页面上所有的。btnlist的dom元素 console.log(btn5);

    三. 如何给dom元素添加事件

    1.常规添加,之间在标签上添加

    <body> <button onclick="btndou(1)">按钮</button> </body>

    2.动态给dom添加事件

    var btn = document.getElementById("btn"); btn.onclick = function () { console.log(1); } btn.onclick = showinfo;不能添加小括号 function showinfo() { console.log(1); }

    3.事件的监听

    var btn2 = document.getElementById("btn2"); btn2.addEventListener("click",function (){ console.log(2); }); btn2.addEventListener("click", showbtn); function showbtn() { console.log(2); }
    最新回复(0)