前端操作指南-优快云博客

本文详细介绍了前端开发中常见的DOM操作方法，包括元素查找、内容操作、样式及属性更改等，并提供了丰富的事件绑定实例。

一、查找

直接查找

document.getElementById("id")              //根据ID获取一个标签
document.getElementsByTagName("div")       //根据name属性获取标签集合
document.getElementsByClassName("body")    //根据class属性获取标签集合
document.getElementsByName("username")     //根据标签名获取标签集合

间接查找

obj.parentNode          // 父节点
obj.childNodes          // 所有子节点
obj.firstChild          // 第一个子节点
obj.lastChild           // 最后一个子节点
obj.nextSibling         // 下一个兄弟节点
obj.previousSibling     // 上一个兄弟节点

obj.parentElement           // 父节点标签元素
obj.children                // 所有子标签
obj.firstElementChild       // 第一个子标签元素
obj.lastElementChild        // 最后一个子标签元素
obj.nextElementSibling     // 下一个兄弟标签元素
obj.previousElementSibling  // 上一个兄弟标签元素

二、操作

文件内容操作

document.getElementById("id").innerText         //仅文本
document.getElementById("id").innerHTML         //全部HTML内容
document.getElementById("id").value             //值
document.getElementById("id").style.display     //CSS样式

样式操作

var d1 = document.getElementById("d1");
    //d1.className 是获取样式名
     console.log(d1.className);   //"c1 c2 c3"

d1.classList.add("c4");     //添加样式名到当前元素
    console.log(d1.className);   //"c1 c2 c3 c4"
d1.classList.remove("c2");  //删除样式名到当前元素
    console.log(d1.className);   //"c1 c3 c4"
d1.style.color = "red";     //单独设置样式，同等于在元素中写style='color:red;'

属性操作

d1.attributes;                           //获取所有元素所有属性字典格式
d1.setAttribute("属性名","属性值");       //添加属性和值
d1.removeAttribute("class");             //删除指定属性

创建标签并添加到HTML中

//方法一
    var tag = "<input type='text' value='第一个方法'/>";
    d1.insertAdjacentHTML("beforeEnd",tag);
    //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
//方法二
    var tag = document.createElement("input");
    tag.setAttribute("value", "第二个方法");
    d1.appendChild(tag)

提交表单

<form id="f1" action="http://www.baidu.com"></form>

document.getElementById('f1').submit()

其他操作

console.log();                 //输出框
alert();                       //弹出框
confirm();                     //确认框
//var v = comfirm("是否确认")   //v的值：点击‘是’：ture;点击‘否’:false）
  
// URL和刷新
location.href;               //获取当前URL
location.href = "url";       //重定向
location.reload();           //重新加载
  
// 定时器
setInterval                 //多次定时器
clearInterval               //清除多次定时器
setTimeout                  //单次定时器
clearTimeout                //清除单次定时器

//定时器例子
var o1 = setInterval(function(){},5000);    //设置定时器
clearInterval(o1);                            //清除定时器
var o2 = setInterval(function(){},5000);    //设置定时器
clearTimeout(o2);                             //清除定时器

三、事件

鼠标事件

onclick         //当用户点击某个对象时调用的事件句柄
oncontextmenu   //在用户点击鼠标右键打开上下文菜单时触发
ondblclick      //当用户双击某个对象时调用的事件句柄
onmousedown     //鼠标按钮被按下
onmouseenter    //当鼠标指针移动到元素上时触发
onmouseleave    //当鼠标指针移出元素时触发
onmousemove     //鼠标被移动
onmouseover     //鼠标移到某元素之上
onmouseout      //鼠标从某元素移开
onmouseup       //鼠标按键被松开

键盘事件

onkeydown       //某个键盘按键被按下
onkeypress      //某个键盘按键被按下并松开
onkeyup         //某个键盘按键被松开

框架/对象（Frame/Object）事件

onabort         //图像的加载被中断。 ( <object>)    2
onbeforeunload     //该事件在即将离开页面（刷新或关闭）时触发     2
onerror        //在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>)    
onhashchange   //该事件在当前 URL 的锚部分发生修改时触发。   
onload             //一张页面或一幅图像完成加载。   2
onpageshow     //该事件在用户访问页面时触发    
onpagehide     //该事件在用户离开当前网页跳转到另外一个页面时触发     
onresize   //窗口或框架被重新调整大小。    2
onscroll   //当文档被滚动时发生的事件。    2
onunload   //用户退出页面。 ( <body> 和 <frameset>)

表单事件

onblur     //元素失去焦点时触发
onchange   //该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)
onfocus    //元素获取焦点时触发
onfocusin  //元素即将获取焦点时触发
onfocusout //元素即将失去焦点时触发
oninput    //元素获取用户输入时触发
onreset    //表单重置时触发
onsearch   //用户向搜索域输入文本时触发 ( <input="search">)
onselect   //用户选取文本时触发 ( <input> 和 <textarea>)
onsubmit   //表单提交时触发

剪切板事件

oncopy      //该事件在用户拷贝元素内容时触发   
oncut      //该事件在用户剪切元素内容时触发   
onpaste    //该事件在用户粘贴元素内容时触发

打印事件

onafterprint    //该事件在页面已经开始打印，或者打印窗口已经关闭时触发    
onbeforeprint  //该事件在页面即将开始打印时触发

拖动事件

ondrag          //该事件在元素正在拖动时触发     
ondragend      //该事件在用户完成元素的拖动时触发      
ondragenter    //该事件在拖动的元素进入放置目标时触发    
ondragleave    //该事件在拖动元素离开放置目标时触发     
ondragover         //该事件在拖动元素在放置目标上时触发     
ondragstart    //该事件在用户开始拖动元素时触发   
ondrop             //该事件在拖动元素放置在目标区域时触发

多媒体事件

onabort             //事件在视频/音频（audio/video）终止加载时触发。
oncanplay          //事件在用户可以开始播放视频/音频（audio/video）时触发。
oncanplaythrough   //事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。
ondurationchange   //事件在视频/音频（audio/video）的时长发生变化时触发。
onemptied          //当期播放列表为空时触发
onended            //事件在视频/音频（audio/video）播放结束时触发。
onerror            //事件在视频/音频（audio/video）数据加载期间发生错误时触发。
onloadeddata       //事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。
onloadedmetadata   //事件在指定视频/音频（audio/video）的元数据加载后触发。
onloadstart        //事件在浏览器开始寻找指定视频/音频（audio/video）触发。
onpause            //事件在视频/音频（audio/video）暂停时触发。
onplay                 //事件在视频/音频（audio/video）开始播放时触发。
onplaying          //事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。
onprogress             //事件在浏览器下载指定的视频/音频（audio/video）时触发。
onratechange       //事件在视频/音频（audio/video）的播放速度发送改变时触发。
onseeked           //事件在用户重新定位视频/音频（audio/video）的播放位置后触发。
onseeking          //事件在用户开始重新定位视频/音频（audio/video）时触发。
onstalled          //事件在浏览器获取媒体数据，但媒体数据不可用时触发。
onsuspend          //事件在浏览器读取媒体数据中止时触发。
ontimeupdate       //事件在当前的播放位置发送改变时触发。
onvolumechange         //事件在音量发生改变时触发。
onwaiting          //事件在视频由于要播放下一帧而需要缓冲时触发。

动画事件

animationend        //该事件在 CSS 动画结束播放时触发    
animationiteration     //该事件在 CSS 动画重复播放时触发    
animationstart         //该事件在 CSS 动画开始播放时触发

过度事件

transitionend       //该事件在 CSS 完成过渡后触发。

其他事件

//其他事件
onmessage     //该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发     
onmousewheel    //已废弃。 使用 onwheel 事件替代      
ononline      //该事件在浏览器开始在线工作时触发。      
onoffline     //该事件在浏览器开始离线工作时触发。      
onpopstate        //该事件在窗口的浏览历史（history 对象）发生改变时触发。    
onshow            //该事件当 <menu> 元素在上下文菜单显示时触发      
onstorage     //该事件在 Web Storage(HTML 5 Web 存储)更新时触发   
ontoggle      //该事件在用户打开或关闭 <details> 元素时触发    
onwheel       //该事件在鼠标滚轮在元素上下滚动时触发

四、绑定事件：

DOM-0的方法，就是直接写在HTML标签中：

<a href="#" id="toxx" onclick="toxx()">跳转</a>

DOM-1的方法，就是将事件和HTML分离（只触发一次onclick事件）：

var toxx = document.getElementById("toxx")
toxx.onclick = function(){
    console.log("xx")
}

DOM-2的方法，就是怎么添加都会依次触发。

toxx.addEventListener("click",function(){console.log("xx1")},false);
toxx.addEventListener("click",function(){console.log("xx2")},false);
toxx.addEventListener("click",function(){console.log("xx3")},false);