文章目录

1.DOM（Document Object Model）
- 节点
- 节点的属性
2.事件
3.文档的加载
4.DOM查询
- 1.获取元素节点
- - getElementById( ) 通过id属性获取一个元素节点对象
  - getElementsByTagName( ) 通过标签名字获取一组元素节点对象
  - getElementsByName( ) 通过name属性获取一组元素节点对象
- 2.获取元素节点的子节点
- - getElementBtTagName( ) 返回当前节点的指定标签名后代节点
  - childNodes 表示当前节点的所有子节点
  - - children 可以获取当前元素的所有子元素
  - firstChild 表示当前节点的第一个子节点
  - - firstElementChild 可以获取到当前元素的第一个子元素
- 3.获取父节点和兄弟节点
- - parentNode 表示当前节点的父节点
  - previousSibling 表示当前节点的前一个兄弟节点
  - - previousElementSibling 该属性会获取前一个兄弟元素
  - nextSibling 表示当前节点后的一个兄弟节点
  - - nextElementSibling 该属性会获取后一个兄弟元素
- 轮播图设置
5.全选练习
6.DOM查询其余方法介绍
- getElementsByClassName( )根据class属性值获取一组元素节点对象
- document.querySelector( )根据一个css选择器来查询一个元素节点对象
- document.querySelectorAll( ) 将符合条件的元素封装到一个数组中返回
- appendChild( ) 把新的子节点添加到指定节点
- removeChild( ) 删除子节点
- replaceChild( ) 替换子节点
- insertBefore( ) 在指定的子节点前面插入新的子节点
- createElement( ) 创建元素节点
- createElement( ) 创建文本节点
- 自定义属性
- - username.setAttribute("属性名","属性值")
  - console.log(username.getAttribute("属性名"))
  - username.removeAttribute("属性名")
  - 在h5的新标准中，最好在自定义属性前面加上 `data-`
  - 元素.dataset.属性名，（添加data-属性）
  - console.log(元素.dataset)，（读取data-属性）
  - delete 元素.dataset.属性名，（删除data-属性）
7.添加删除记录练习
- confirm( ) 用于弹出一个带有确认和取消的按钮提示框
8.使用DOM操作css
- 通过style操作
- 读取元素当前样式
- 其他样式相关属性
- - 元素.clienwidth
  - 元素.clienheight
  - 元素.offsetWidth
  - 元素.offsetHeight
  - 元素.offsetParent
  - 元素.offsetLeft
  - 元素.offsetTop
  - 元素.scrollWidth
  - 元素.scrollHeight
  - 元素.scrollLeft
  - 元素.scrollTop
  - onscroll
9.事件对象
- 元素.onmousemove 该事件将会在鼠标在元素中移动时触发
- 事件对象.clientX 可以获取可见窗口鼠标指针的水平坐标
- 事件对象.clientY 可以获取可见窗口鼠标指针的垂直坐标
- 事件对象.pageX 获取鼠标相对于当前页面的水平坐标
- 事件对象.pageY 获取鼠标相对于当前页面的垂直坐标
10.冒泡
- 取消冒泡
- 事件对象.cancelBubble
11.事件的委派
- 事件对象.target 表示的是触发事件的对象
12.事件的绑定
- addEventListener( )
13.事件的传播
14.事件练习：拖拽

1.DOM（Document Object Model）

节点

节点分为四类

文档节点：整个HTML文档
元素节点：HTML文档中的HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容

节点的属性

<body><button id="btn">这是一个按钮</button><script>//获取button对象var btn = document.getElementById("btn");console.log(btn);//修改按钮里面的文字console.log(btn.innerHTML);btn.innerHTML = "被修改的按钮";</script>
</body>

2.事件

事件，就是用户和浏览器之间的交互行为
比如：点击按钮，鼠标移动，关闭窗口… …

<body>
<button id="btn" onclick="alert('你点我干嘛')">我是一个按钮</button>
<!-- 我们可以在事件对应的属性中设置一些js代码，这样当事件被触发时，这些代码将会执行
但是这种写法我们称为结构和行为耦合，不方便维护，不推荐使用 -->
</body>

<body><!-- <button id="btn" οnclick="alert('你点我干嘛')">我是一个按钮</button> --><!-- 我们可以在事件对应的属性中设置一些js代码，这样当事件被触发时，这些代码将会执行但是这种写法我们称为结构和行为耦合，不方便维护，不推荐使用 --><button id="btn">我是一个按钮</button><script>//可以为按钮的对应事件绑定处理函数的形式来响应事件,这样当事件被触发时，其对应的函数将会被调用var btn = document.getElementById("btn");//绑定一个双击事件//像这种双击事件绑定的函数，我们称为双击响应函数btn.ondblclick = function(){alert("你点我两下干嘛");}</script>
</body>

3.文档的加载

onload 事件会在整个页面加载完成之后才会触发

<head><script>window.onload = function(){var btn = document.getElementById("btn");btn.ondblclick = function(){btn.innerHTML = "这是被双击后的按钮";}}</script>
</head>
<body><button id="btn">这是一个按钮</button>
</body>

4.DOM查询

1.获取元素节点

getElementById( ) 通过id属性获取一个元素节点对象

getElementsByTagName( ) 通过标签名字获取一组元素节点对象

getElementsByName( ) 通过name属性获取一组元素节点对象

2.获取元素节点的子节点

getElementBtTagName( ) 返回当前节点的指定标签名后代节点

childNodes 表示当前节点的所有子节点

children 可以获取当前元素的所有子元素

firstChild 表示当前节点的第一个子节点

firstElementChild 可以获取到当前元素的第一个子元素

3.获取父节点和兄弟节点

parentNode 表示当前节点的父节点

previousSibling 表示当前节点的前一个兄弟节点

previousElementSibling 该属性会获取前一个兄弟元素

nextSibling 表示当前节点后的一个兄弟节点

nextElementSibling 该属性会获取后一个兄弟元素

<!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>*{margin: 0;padding: 0;box-sizing: border-box;list-style: none;text-decoration: none;}img{display: block;}body{font-family: Arial;}.clear:before,.clear:after{content: " ";display: block;clear: both;}#total{float: left;width: 250px;height: 320px;margin-left: 350px;border: 1px solid black;}#total p{margin-top: 10px;margin-left: 10px;}#city{float: left;margin-top: 10px;}#city li{float: left;background-color: yellowgreen;border: 1px black solid;margin-left: 10px;}#game{float: left;margin-top: 10px;}#game li{float: left;background-color: yellowgreen;border: 1px black solid;margin-left: 10px;}#phone{float: left;margin-top: 10px;}#phone li{float: left;background-color: yellowgreen;border: 1px black solid;margin-left: 10px;}.inner{float: left;border: 1px solid black;margin-left: 50px;}#btnList{float: left;margin-left: 50px;}button{margin-top: 7px;}</style><script>//定义一个函数，专门用来为指定元素绑定单击响应//参数：//      1.  idStr  要绑定单击响应函数的对象的 id 属性值//      2.   fun   事件的回调，当单击元素时，函数将会被触发function MyOnclick(idStr,fun){var btn = document.getElementById(idStr);btn.onclick = fun;}window.onload = function(){// 查找#bj节点var btn01 = document.getElementById("btn01");btn01.onclick = function(){// alert("aaa");var bj = document.getElementById("bj");alert(bj.innerHTML);};// 查找所有li节点var btn02 = document.getElementById("btn02");btn02.onclick = function(){//getElementsByTagName()可以根据标签名来获取一组元素节点对象//这个方法会给我们返回一个类数组对象，所有查询到的对象都会封装到类数组对象中//即使查询到的元素只有一个，也会封装到类数组对象中返回var lis = document.getElementsByTagName("li");// alert(lis.length);for(var i=0;i<lis.length;i++){alert(lis[i].innerHTML);}};// 查找name=gender的所有节点var btn03 = document.getElementById("btn03");btn03.onclick = function(){var inputs = document.getElementsByName("gender");for(var i=0;i<inputs.length;i++){//innerHTML用于获取元素内部的HTML代码的//对于自结束标签无意义// alert(inputs[i].innerHTML);//如果需要读取元素节点属性，直接使用元素.属性名//  例子：元素.name     元素.value//  class 属性不能采用这种方式//      读取class属性时需要使用  元素.classNamealert(inputs[i].value);}};// 查找#city下所有的li节点var btn04 = document.getElementById("btn04");btn04.onclick = function(){//获取id 为city的元素var city = document.getElementById("city");var lis = city.getElementsByTagName("li");// alert(lis.length);for(var i=0;i<lis.length;i++){alert(lis[i].innerHTML);}};// 返回#city所有子节点var btn05 = document.getElementById("btn05");btn05.onclick = function(){//获取id 为city的节点var city = document.getElementById("city");//childNodes属性会获取包括文本节点在内的所有                节点         （包括换行）根据DOM标签标签间空白也会当成文本节点//注意：在IE 8及其以下的浏览器中，不会将空白文本当成子节点，所以该属性在IE 8中会返回正常个数的子元素var lis = city.childNodes;alert(lis.length);//children属性可以获取当前元素的所有                        子元素// var lis2 = city.children;// alert(lis2.length);// for(var i=0;i<lis2.length;i++)// {//     alert(lis2[i].innerHTML);// }};// 返回#phone的第一个子节点var btn06 = document.getElementById("btn06");btn06.onclick = function(){var phone = document.getElementById("phone");// var fir = phone.childNodes[0];//firstChild可以获取到当前元素的第一个                                子节点var fir = phone.firstChild;alert(fir.innerHTML);//firstElementChild可以获取到当前元素的第一个                        子元素//注意：firstElementChild 不兼容IE 8及其以下的浏览器// var fir2 = phone.firstElementChild// alert(fir2.innerHTML);};// //      1.  idStr  要绑定单击响应函数的对象的 id 属性值// //      2.   fun   事件的回调，当单击元素时，函数将会被触发//     function MyOnclick(idStr,fun){//           var btn = document.getElementById(idStr);//           btn.onclick = fun;//     }// 返回#bj的父节点MyOnclick("btn07",function(){// alert("hello");var bj = document.getElementById("bj");var pn = bj.parentNode;alert(pn.innerHTML); //innerText  该属性可以获取到元素内部的文本内容//它和  innerHTML  类似，不同的是它会自动将html标签去除alert(par.innerText);});// 返回#android的前一个兄弟节点MyOnclick("btn08",function(){var and = document.getElementById("android");//previousSibling 该属性会返回前一个兄弟节点（也可能获取到空白的文本）         节点var ps = and.previousSibling;alert(ps.innerText);// previousElementSibling 该属性会获取前一个兄弟元素                          元素ps = and.previousElementSiblingalert(ps.innerHTML)});// 返回#android的下一个兄弟节点// MyOnclick("btn08",function(){//     var and = document.getElementById("android");//     var ps = and.nextSibling;//     alert(ps.innerText);//     ps = and.nextElementSibling;//     alert(ps.innerHTML);// });// 返回#username的value属性值MyOnclick("btn09",function(){var use = document.getElementById("username");//文本框的value属性值，就是文本框中填写的内容alert(use.value);});// 设置#username的value属性值MyOnclick("btn10",function(){var use = document.getElementById("username");use.value = "我被修改了";});// 返回#bj的文本值MyOnclick("btn11",function(){var bj = document.getElementById("bj");// alert(bj.innerHTML);var fc = bj.firstChild;alert(fc.nodeValue);});}</script>
</head>
<body><div id="total"><p>你喜欢那个城市</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>福州</li><li>厦门</li></ul><br><br><p>你喜欢那款单击游戏</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br><br><p>请问你手机的操作系统是</p><ul id="phone"><li>IOS</li><li id="android">Android</li><li>window phone</li></ul></div><div class="inner">gender:<input type="radio" name="gender" value="male"/>Male:<input type="radio" name="gender" value="female"/><br><br>name:<input type="text" name="name" id="username" value="abcde"/></div><div id="btnList"><div><button id="btn01">查找#bj节点</button></div><div><button id="btn02">查找所有li节点</button></div><div><button id="btn03">查找name=gender的所有节点</button></div><div><button id="btn04">查找#city下所有的li节点</button></div><div><button id="btn05">返回#city的素有子节点</button></div><div><button id="btn06">返回#phone的第一个子节点</button></div><div><button id="btn07">返回#bj的父节点</button></div><div><button id="btn08">返回#android的前一个兄弟节点</button></div><div><button id="btn09">返回#username的value属性值</button></div><div><button id="btn10">设置#username的value属性值</button></div><div><button id="btn11">返回#bj的文本值</button></div></div>
</body>
</html>

轮播图设置

<!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>*{margin: 0;padding: 0;box-sizing: border-box;list-style: none;text-decoration: none;}img{display: block;}body{font-family: Arial;}.clear:before,.clear:after{content: " ";display: block;clear: both;}#pts{width: 400px;height: 300px;margin: 0 auto;background-color: rgb(142, 227, 15);text-align: center;}button{margin-top: 30px;}img{margin: 0 auto;}</style><script>window.onload = function(){//点击按钮切换图片//获取两个按钮var last = document.getElementById("last");var next = document.getElementById("next");//要切换图片，就是修改 img 标签里面的 src 属性//获取img标签var img = document.getElementsByTagName("img")[0];//创建一个数组来保存图片路径var imgArr = ["./img/2022.12.20/1.svg","./img/2022.12.20/2.svg","./img/2022.12.20/3.svg","./img/2022.12.20/4.svg"]//创建一个变量，来保存当前索引var index = 0;//提示信息var info = document.getElementById("info");info.innerHTML = "一共"+imgArr.length+"张图片，这是第"+(index+1)+"张";//分别对两个按钮绑定单击响应last.onclick = function(){// if(index-1<0)// {//     index = imgArr.length - 1;// }index--;if(index<0){index = imgArr.length-1;}img.src = imgArr[index];info.innerHTML = "一共"+imgArr.length+"张图片，这是第"+(index+1)+"张";};next.onclick = function(){// if(index+1>=imgArr.length)// {//     index = 0;// }index++;if(index>imgArr.length-1){index = 0;}img.src = imgArr[index];info.innerHTML = "一共"+imgArr.length+"张图片，这是第"+(index+1)+"张";};}</script></head>
<body><div id="pts"><p id="info"></p><img src="./img/2022.12.20/1.svg" alt=""><!-- <img src="./图片/2022.12.20/太阳2.svg" alt=""><img src="./图片/2022.12.20/太阳3.svg" alt=""><img src="./图片/2022.12.20/太阳4.svg" alt=""> --><button id="last">上一张</button><button id="next">下一张</button></div></body>
</html>

5.全选练习

<!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><script>window.onload = function(){// 获取四个多选框itemsvar items = document.getElementsByName("items");var checkedAllBox = document.getElementById("checkedAllBox");//  1.#checkedAllBtn//  全选按钮：点击按钮以后，四个多选框全都被选中//  为 id 为 checkedAllBtn 的按钮绑定一个单击响应函数var checkedAllBtn = document.getElementById("checkedAllBtn");checkedAllBtn.onclick = function(){for(var i=0;i<items.length;i++){// 设置四个多选框变为选中状态// 通过多选框的checked属性可以来获取或者设置多选框的选中状态items[i].checked = true;}// var checkedAllBox = document.getElementById("checkedAllBox");checkedAllBox.checked = true;};//  2.#checkedNoBtn//  全不选按钮：点击按钮之后，四个多选框的选中状态都变成未选中var checkedNoBtn = document.getElementById("checkedNoBtn");checkedNoBtn.onclick = function(){// var items = document.getElementsByName("items");for(var i=0;i<items.length;i++){items[i].checked = false;}// var checkedAllBox = document.getElementById("checkedAllBox");checkedAllBox.checked = false;}//  3.#checkedRevBox//  反选按钮：点击按钮之后，多选框已被选中的按钮变成未选中，未选中的按钮变成已选中状态var checkedRevBtn = document.getElementById("checkedRevBtn");checkedRevBtn.onclick = function(){//在反选时也需要判断四个多选框是否全都选中//将checkedAllBox设置为truecheckedAllBox.checked = true;// var items = document.getElementsByName("items");for(var i=0;i<items.length;i++){// if(items[i].checked)// {//     items[i].checked = false;// }// else// {//     items[i].checked = true;// }items[i].checked = !items[i].checked;//判断四个多选框是否全选if(!items[i].checked){//一旦进入判断，就不是全选状态//将checkedAllBox设置为falsecheckedAllBox.checked = false;//一旦进入判断，就得到结果，可以结束循环}}}//  4.#sendBtn//  提交按钮：点击按钮之后将所有的选中的多选框弹出多选框的 value 的属性值var sendBtn = document.getElementById("sendBtn");sendBtn.onclick = function(){for(var i=0;i<items.length;i++){if(items[i].checked){alert(items[i].value);}}}//  5.#checkedAllBox//  全选/全不选 多选框：当它选中时，其余也选中；当它取消时，其余的也取消    // var checkedAllBox = document.getElementById("checkedAllBox");checkedAllBox.onclick = function(){// if(checkedAllBox.checked)// {//     for(var i=0;i<items.length;i++)//     {//         items[i].checked = !items[i].checked;//     }// }// else// {//     for(var i=0;i<items.length;i++)//     {//         items[i].checked = !items[i].checked;//     }// }for(var i=0;i<items.length;i++){// items[i].checked = checkedAllBox.checked;//  在事件响应函数中，响应函数是给谁绑定的，this就是谁items[i].checked = this.checked;}}//  6.items//  如果四个多选框被选中，则checkedAllBox也被选中//  如果四个多选框被取消，则checkedAllBox也被取消//  为四个多选框绑定单击响应函数for(var i=0;i<items.length;i++){items[i].onclick = function(){//将checkedAllBox设置为truecheckedAllBox.checked = true;//判断四个多选框是否全选for(var j=0;j<items.length;j++){if(!items[j].checked){//一旦进入判断，就不是全选状态//将checkedAllBox设置为falsecheckedAllBox.checked = false;//一旦进入判断，就得到结果，可以结束循环break;}}}}}</script>
</head>
<body><form action="">你最喜欢的运动是？<input type="checkbox" id="checkedAllBox"><label for="checkedAllBox">全选/全不选</label><br><input type="checkbox" name="items" value="足球" id="zq">足球<input type="checkbox" name="items" value="篮球" id="lq">篮球<input type="checkbox" name="items" value="羽毛球" id="ymq">羽毛球<input type="checkbox" name="items" value="乒乓球" id="ppq">乒乓球<br><input type="button" id="checkedAllBtn" value="全选"><input type="button" id="checkedNoBtn" value="全不选"><input type="button" id="checkedRevBtn" value="反选"><input type="button" id="sendBtn" value="提交"></form>
</body>
</html>

6.DOM查询其余方法介绍

<script>window.onload = function(){//获取body标签// var body = document.getElementsByTagName("body")[0];// console.log(body);//在document中有一个属性body，它保存的是body的引用var body = document.body;console.log(body);//document.documentElement 保存的是html标签var html = document.documentElement;console.log(html);//document.all 代表页面中的所有元素var all = document.all;// var all = document.getElementsByTagName("*");console.log(all);for(var i=0;i<all.length;i++){console.log(all[i]);}}
</script>

getElementsByClassName( )根据class属性值获取一组元素节点对象

像这一类方法获取到的一组元素节点都是伪数组
但是可以通过 Array.from( ) 的方式转变为数组

var box1 = document.getElementsByClassName("box1");
console.log(box1.length);
var box1 = document.getElementsByClassName("box1")[0];
console.log(box1.innerHTML);

document.querySelector( )根据一个css选择器来查询一个元素节点对象

//document.querySelector() 可以根据选择器作为参数，可以根据一个css选择器来查询一个元素节点对象
//但是使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么他只会返回第一个
var box1_div = document.querySelector(".box1 div")
console.log(box1_div.innerHTML);

document.querySelectorAll( ) 将符合条件的元素封装到一个数组中返回

// document.querySelectorAll( )该方法不同的是他会将符合条件的元素封装到一个数组中返回
//即使符合条件的元素只有一个，它也会返回数组
var box1_alldiv = document.querySelectorAll(".box1 div");
console.log(box1_alldiv.length);
console.log(box1_alldiv[0].innerHTML);
console.log(box1_alldiv[1].innerHTML);

appendChild( ) 把新的子节点添加到指定节点

removeChild( ) 删除子节点

replaceChild( ) 替换子节点

insertBefore( ) 在指定的子节点前面插入新的子节点

createElement( ) 创建元素节点

createElement( ) 创建文本节点

<!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>*{margin: 0;padding: 0;box-sizing: border-box;list-style: none;text-decoration: none;}img{display: block;}body{font-family: Arial;}.clear:before,.clear:after{content: " ";display: block;clear: both;}#total{float: left;width: 300px;margin-left: 400px;margin-right: 50px;padding-bottom: 20px;border: 1px solid black;}#total p{margin-top: 20px;margin-left: 10px;}#city{float: left;}#city li{float: left;margin-left: 10px;margin-top: 20px;border: 1px solid black;background-color: yellowgreen;}#btnList {float: left;}#btnList div{margin-top: 5px;}#btnList button {width: 300px;}</style><script>var MyOnclick = function(idStr,fun){var btn = document.getElementById(idStr);btn.onclick = fun;}window.onload = function(){// 1.创建一个"广州"节点，添加到#city下MyOnclick("btn01",function(){//创建一个广州节点  <li>广州</li>//创建一个li元素节点// document.createElement()//可以创建一个元素节点对象，它需要一个标签名作为参数，将会根据该标签名字创建元素节点对象，并将创建好的对象作为返回值返回var gz_li = document.createElement("li");//创建一个文本节点// document.createTextNode()//可以创建一个文本节点对象，它需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回var gz_text = document.createTextNode("广州");//将 gz_text 设置为 li 的子节点//appendChild()//可以向一个父节点中添加一个新的子节点//   用法：   父元素.appendChild(子节点);gz_li.appendChild(gz_text);//获取id为#city的节点var city = document.getElementById("city");//将广州添加到#city下city.appendChild(gz_li);});// 2.将"广州"节点插入到#bj前面MyOnclick("btn02",function(){var gz_li = document.createElement("li");var gz_text = document.createTextNode("广州");gz_li.appendChild(gz_text);//获取id 为 bj 的节点var bj = document.getElementById("bj");//获取id 为 city 的节点var city = document.getElementById("city");//insertBefore()//可以在指定的直接点前面插入新的子节点//      用法：父节点.insertBefore(新节点，旧节点);city.insertBefore(gz_li,bj);});// 3.使用"广州"节点替换#bj节点MyOnclick("btn03",function(){var gz_li = document.createElement("li");var gz_text = document.createTextNode("广州");gz_li.appendChild(gz_text);//获取id 为 bj 的节点var bj = document.getElementById("bj");//获取id 为 city 的节点var city = document.getElementById("city");//replaceChild( )//可以使用指定的子节点替换已有的子节点//语法：   父节点.replaceChild(新节点，旧节点);city.replaceChild(gz_li,bj);   });// 4.删除#bj节点MyOnclick("btn04",function(){var bj = document.getElementById("bj");// 方法一：// var city = document.getElementById("city");// //removeChild( )// //可以删除一个子节点// //语法：    父节点.remove(子节点);// city.removeChild(bj);// 方法二：（常用）//      子节点.parentNode.removeChild(子节点)bj.parentNode.removeChild(bj);});// 5.读取#city内的HTML代码MyOnclick("btn05",function(){// var city = document.getElementById("city");var city = document.querySelector("#city");alert(city.innerHTML);});// 6.设置#bj内的HTML代码MyOnclick("btn06",function(){var city = document.querySelector("#bj");bj.innerHTML = prompt("请输入需要的设置：");});// 7.用innerHTML的方式向#city添加广州MyOnclick("btn07",function(){// var city = document.querySelector("#city");// city.innerHTML += "<li>广州</li>";//使用innerHTML也可以完成DOM的增删改相关工作//一般我们会两种一起结合使用var city = document.querySelector("#city");var gz_li = document.createElement("li");gz_li.innerHTML = "广州";city.appendChild(gz_li);});}</script>
</head>
<body><div id="total"><div class="inner"><p>你喜欢哪个城市？</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul></div></div><div id="btnList"><div><button id="btn01">创建一个"广州"节点，添加到#city下</button></div><div><button id="btn02">将"广州"节点插入到#bj前面</button></div><div><button id="btn03">使用"广州"节点替换#bj节点</button></div><div><button id="btn04">删除#bj节点</button></div><div><button id="btn05">读取#city内的HTML代码</button></div><div><button id="btn06">设置#bj内的HTML代码</button></div><div><button id="btn07">用innerHTML的方式向#city添加广州</button></div></div>
</body>
</html>

自定义属性

username.setAttribute(“属性名”,“属性值”)

console.log(username.getAttribute(“属性名”))

username.removeAttribute(“属性名”)

添加自定义属性
username.setAttribute(“属性名”,“属性值”)
获取自定义属性
console.log(username.getAttribute(“属性名”))
删除自定义属性
username.removeAttribute(“属性名”)

应用举例：

<body><ul><li></li><li></li><li></li><li></li><li></li><li></li></ul><script>var lis = document.getElementsByTagName("li")for (var i = 0; i < lis.length; i++) {lis[i].setAttribute("lis", "li - " + (i + 1))}</script>
</body>

在h5的新标准中，最好在自定义属性前面加上 `data-`

元素.dataset.属性名，（添加data-属性）

console.log(元素.dataset)，（读取data-属性）

delete 元素.dataset.属性名，（删除data-属性）

<body><button id="btn1">删除自定义属性</button><ul><li></li><li></li><li></li><li></li><li></li></ul><script>var lis = document.getElementsByTagName("li")for (var i = 0; i < lis.length; i++) {lis[i].dataset.lkj = "lkj - " + (i + 1)lis[i].dataset.nb = "nb - " + (i + 1)console.log(lis[i].dataset)}var btn1 = document.getElementById("btn1")btn1.onclick = function () {for (var i = 0; i < lis.length; i++) {delete lis[i].dataset.lkj}}</script>
</body>

7.添加删除记录练习

confirm( ) 用于弹出一个带有确认和取消的按钮提示框

<!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>*{margin: 0;padding: 0;box-sizing: border-box;list-style: none;text-decoration: none;}img{display: block;}body{font-family: Arial;}.clear:before,.clear:after{content: " ";display: block;clear: both;}h4{margin-left: 65px;}</style><script>function delA(){//点击超链接之后删除超链接所在的那一行//获取当前的trvar tr = this.parentNode.parentNode;//删除之前弹出提示框//获取name// var name = tr.firstElementChild.innerText;// var name = tr.getElementsByTagName("td")[0].innerHTML;var name = tr.children[0].innerHTML;//confirm( ) 用于弹出一个带有确认和取消的按钮提示框，需要一个字符串作为参数，该字符串会作为提示文字显示//如果用户点击确认则会返回 true ，如果用户点击取消则会返回 false var decide = confirm("确认删除"+name+"嘛？");if(decide){//删除trtr.parentNode.removeChild(tr);// this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);}};window.onload =function(){//点击超链接之后，删除一个员工的信息//      获取所有超链接var allA = document.getElementsByTagName("a");//      为每个超链接都绑定一个单击响应函数for(var i=0;i<allA.length;i++){allA[i].onclick = delA;}//添加员工的功能//点击按钮之后，将员工的信息添加到表格中//为提交按钮绑定单击响应函数var addEmpButton = document.getElementById("addEmpButton");addEmpButton.onclick = function(){//获取用户填写的员工信息//获取员工empName,email,Salaryvar name = document.getElementById("empName").value;var email = document.getElementById("email").value;var salary = document.getElementById("salary").value;// 方法一：// //获取 tbody 标签// // var oldTr = document.getElementsByTagName("tr")[1];// var tbody = document.getElementsByTagName("tbody")[0];// // var table = document.getElementById("table");// //创建tr 和 td 和 a标签// var tr = document.createElement("tr");// var tdName = document.createElement("td");// var tdEmail = document.createElement("td");// var tdSalary = document.createElement("td");// var tdA = document.createElement("td");// var a = document.createElement("a");// //为rd标签和a标签写入文本内容，和设置a标签的href属性// tdName.innerHTML = name;// tdEmail.innerHTML = email;// tdSalary.innerHTML = salary;// a.innerHTML = "Delete";// a.href = "#";// //将td和tr标签插入tbody内部// tdA.appendChild(a);// tbody.appendChild(tr);// tr.appendChild(tdName);// tr.appendChild(tdEmail);// tr.appendChild(tdSalary);// tr.appendChild(tdA);// // 设置a标签的单击响应函数// a.onclick = delA;// 方法二：// //创建一个tr//创建一个trvar tr = document.createElement("tr");//设置tr中的内容tr.innerHTML = "<td>"+name+"</td>"+"<td>"+email+"</td>"+"<td>"+salary+"</td>"+"<td><a href='#'>Delete</a></td>";//获取tr中的a元素a = tr.getElementsByTagName("a")[0];a.onclick = delA;//获取tablevar table = document.getElementById("table");//获取table里面的tbodyvar tbody = table.getElementsByTagName("tbody")[0];//将tr添加到tbody中tbody.appendChild(tr);};}</script>
</head>
<body style="padding-left: 600px;"><table id="table" border="1" cellspacing="0" style="margin-bottom: 50px;"><tr><th>Name</th><th>Email</th><th>Salary</th><th>&nbsp;</th></tr><tr><td>一号</td><td>yihao@yihao.com</td><td>1000</td><td><a href="#">Delete</a></td></tr><tr><td>二号</td><td>erhao@yihao.com</td><td>2000</td><td><a href="#">Delete</a></td></tr><tr><td>三号</td><td>sanhao@yihao.com</td><td>3000</td><td><a href="#">Delete</a></td></tr></table><div id="formDiv" style="padding-left: 40px;" ><h4>添加新的员工</h4><table border="1" cellspacing="0" ><tr><td class="word">name:</td><td class="inp"><input type="text" name="empName" id="empName"></td></tr><tr><td class="word">email:</td><td class="inp"><input type="text" name="email" id="email"></td></tr><tr><td class="word">salary</td><td class="inp"><input type="text" name="salary" id="salary"></td></tr><tr><td colspan="2" align="center"><button id="addEmpButton" value="abc">Submit</button></td></tr></table></div>
</body>
</html>

8.使用DOM操作css

通过style操作

<style>
#box1 {width: 200px;
height: 200px;
background-color: aqua;
}
</style>
<script>
window.onload = function() {//点击按钮01之后修改box1的css
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function() {//通过js修改css样式
//语法：    元素.style.样式名 = "样式值";
//通过style设置的样式都是内联样式，但是如果在样式中写了 ！important 则此时的样式优先级会达到最高，即使是js也无法覆盖
//注意：    如果css的样式名字中含有 - ,则改用驼峰法输入
box1.style.width = "100px";
box1.style.height = "100px";
box1.style.backgroundColor = "red";
};//点击按钮02之后，读取元素的样式
var btn02 = document.getElementById("btn02");
btn02.onclick = function() {//读取样式
//语法：    元素.style.样式名;
//通过style设置和读取的都是内联样式
alert(box1.style.backgroundColor);
};};
</script>
</head><div id="box1"></div>
<button id="btn01">btn01</button>
<button id="btn02">btn02</button>
</body>

读取元素当前样式

getComputedStyle()
这个方法是window的方法，可以直接使用
需要两个参数：
1.要获取样式的元素
2.可以传递一个伪元素,一般都传null
该方法会返回一个对象，对象中封装了当前元素对应的样式
注意：通过getComputedStyle( )获取到的样式都是只读的，如果需要修改必须通过style属性

其他样式相关属性

元素.clienwidth

元素.clienheight

这两个属性可以获取元素的可见宽度和高度，这些属性都是不带"px"的一个number，可以直接进行计算
可见高度宽度：元素高度宽度，包括内容区域和内边距，不包括外边距和边框
这些属性都是只读的，不能修改

元素.offsetWidth

元素.offsetHeight

获取元素的高度/宽度和内容区域、内边距、边框

元素.offsetParent

可以用来获取当前元素的定位父元素
会获取到离当前最近的开启了定位的祖先元素

元素.offsetLeft

当前元素相对于其定位元素的水平偏移量

元素.offsetTop

当前元素相对于其定位元素的垂直偏移量

元素.scrollWidth

可以获取元素的整个宽度，包括滚动区

元素.scrollHeight

可以获取元素的整个高度，包括滚动区

元素.scrollLeft

可以获取滚动条水平滚动距离

元素.scrollTop

可以获取滚动条垂直滚动距离

当满足
scrollHeight - scrollTop == clienHeight
说明垂直滚动条，滚动到底了
水平滚动条同理

<!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>#box1{width: 100px;height: 100px;background-color: aqua;padding: 10px;/* margin: 10px; */border: 10px solid black;}#box2 {padding: 100px;background-color: yellowgreen;position: relative;}#box3 {width: 200px;height: 300px;background-color: aqua;overflow: auto;}#box4 {width: 400px;height: 600px;background-color: black;}</style><script>window.onload = function(){var box1 = document.getElementById("box1");var btn01 = document.getElementById("btn01");btn01.onclick = function(){console.log("clientWidth = "+box1.clientWidth);console.log("clientHeight = "+box1.clientHeight);console.log("offsetWidth ="+box1.offsetWidth);console.log("offsetHeight ="+box1.offsetHeight);console.log("offsetParent ="+box1.offsetParent.id);console.log("offsetLeft ="+box1.offsetLeft);console.log("offsetTop ="+box1.offsetTop);};var box3 = document.querySelector("#box3");var box4 = document.querySelector("#box4");var btn02 = document.querySelector("#btn02");btn02.onclick = function(){console.log("scrollWidth ="+box3.scrollWidth)console.log("scrollHeight ="+box3.scrollHeight)console.log("scrollLeft ="+box3.scrollLeft);console.log("scrollTop ="+box3.scrollTop);console.log("clientWidth ="+box3.clientWidth)console.log("clientHeight ="+box3.clientHeight)console.log("scrollWidth - scrollLeft == clienWidth"+(box3.scrollWidth - box3.scrollLeft));console.log("scrollHeight - scrollTop == clienHeight"+(box3.scrollHeight - box3.scrollTop));}};</script>
</head>
<body><div id="box2"><div id="box1"></div></div><button id="btn01">1</button><br><div id="box3"><div id="box4"></div></div><button id="btn02">2</button>
</body>
</html>

onscroll

为滑动滚动条添加个事件行为

<!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>#all {width: 310px;/* height: 530px; */border: 5px solid black;margin: 0 auto;}#info{width: 300px;height: 500px;/* margin: 0 auto; */border: 5px solid red;overflow: auto;background-color: aquamarine;}h3{text-align: center;}#sub {margin-left: 100px;}</style><script>window.onload = function() {var gou = document.getElementsByName("gou")[0];var info = document.getElementById("info");var sub = document.getElementById("sub");sub.onclick = function(){if(gou.checked){alert("提交成功");}else{alert("请确认是否勾选用户协议")}}info.onscroll = function() {if(parseInt(info.scrollHeight-info.scrollTop)==info.clientHeight) {gou.disabled=false;sub.disabled=false;}};};</script>
</head>
<body><div id="all"><div id="info"><h3>测试文本</h3><p>测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</p></div><input type="checkbox" name="gou" disabled="true">我同意用户协议<input type="submit" value="提交" name="sub" id="sub" disabled="true"></div>
</body>
</html>

9.事件对象

当事件的相应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数

元素.onmousemove 该事件将会在鼠标在元素中移动时触发

事件对象.clientX 可以获取可见窗口鼠标指针的水平坐标

事件对象.clientY 可以获取可见窗口鼠标指针的垂直坐标

事件对象.pageX 获取鼠标相对于当前页面的水平坐标

事件对象.pageY 获取鼠标相对于当前页面的垂直坐标

<!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>body{position: relative;background-color: aqua;overflow: auto ;}#box1{width: 100px;height: 100px;background-color: yellowgreen;border-radius: 50%;position:absolute;}</style><script>window.onload = function(){var box1 = document.getElementById("box1");//绑定鼠标移动事件document.onmousemove = function(event){//获取鼠标坐标// var left = event.clientX;// var top = event.clientY;var left = event.pageX;var top = event.pageY;//设置box1的偏移量box1.style.left = left- box1.offsetWidth/2 +"px";box1.style.top = top- box1.offsetHeight/2 +"px";};}</script>
</head>
<body style="height: 2000px;"><div id="box1"></div>
</body>
</html>

10.冒泡

所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发

取消冒泡

事件对象.cancelBubble

<!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>#box1{width: 500px;height: 500px;background-color: aqua;}#box2{width: 250px;height: 250px;background-color: yellowgreen;}</style><script>window.onload = function(){var box1 = document.getElementById("box1");var box2 = document.getElementById("box2");var body = document.querySelector("body");box1.onclick = function(event){alert("我是box1");event.cancelBubble = true;};box2.onclick = function(){alert("我是box2");event.cancelBubble = true;};body.onclick = function(){alert("我是body");};}</script>
</head>
<body><div id="box1"><div id="box2"></div></div>
</body>
</html>

11.事件的委派

事件的委派指的是将事件统一绑定给元素的共同祖先元素，这样当后代的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件
事件委派是利用冒泡，通过委派可以减少事件绑定的次数，提高程序性能

事件对象.target 表示的是触发事件的对象

<!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>#ul1{background-color: yellowgreen;}</style><script>window.onload = function(){var ul1 = document.getElementById("ul1");var a = document.getElementsByTagName("a");// for(var i=0;i<a.length;i++){//     a[i].onclick = function(){//         alert("我是a的单击响应函数");//     };// }ul1.onclick = function(event){//事件的委派//  指的是将事件统一绑定给元素的共同祖先元素，这样当后代的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件//  事件委派是利用冒泡，通过委派可以减少事件绑定的次数，提高程序性能//如果触发事件的对象是我们期望的元素则执行，否则不执行//  target//  事件对象.target    表示的是触发事件的对象if(event.target.className == "link"){alert("我是ul的单机响应函数");}};var n = 4var btn01 = document.getElementById("btn01");btn01.onclick = function(){var li = document.createElement("li");li.innerHTML = "<li><a href='#'class='link'>超链接"+(n++)+"</a></li>";ul1.appendChild(li);}}</script>
</head>
<body><button id="btn01">添加超链接</button><ul id="ul1"><li><a href="#" class="link">超链接1</a></li><li><a href="#" class="link">超链接2</a></li><li><a href="#" class="link">超链接3</a></li></ul>
</body>
</html>

12.事件的绑定

addEventListener( )

通过这个方法也可以为元素绑定响应函数
参数：
1.事件的字符串，但是去除 “on”
2.回调函数，当事件触发时该函数会被调用
3.是否在捕获阶段触发事件，需要一个布尔值，一般都是false

var btn01 = document.getElementById("btn01");//使用    对象.事件 = 函数    这种方式绑定响应函数
//  他只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定多个则后边的会覆盖前面的
// btn01.onclick = function(){//     alert(1);
// }
// btn01.onclick = function(){//     alert(2);
// }//addEventListener()
//通过这个方法也可以为元素绑定响应函数
//参数：
//      1.事件的字符串，但是去除   "on"
//      2.回调函数，当事件触发时该函数会被调用
//      3.是否在捕获阶段触发事件，需要一个布尔值，一般都是false
btn01.addEventListener("click",function(){alert(1);
});
btn01.addEventListener("click",function(){alert(2);
});

13.事件的传播

事件的传播
关于事件的传播网景公司和微软公司有不同的理解

微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。

网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件,然后在向内传播给后代元素

w3C综合了两个公司的方案，将事件传播分成了三个阶段
1.捕获阶段
在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
2.目标阶段
事件捕获到目标元素，捕获结束开始在目标元素上触发事件
3.冒泡阶段
事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true

14.事件练习：拖拽

<!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>#box1 {width: 100px;height: 100px;border-radius: 50%;background-color: yellowgreen;position: absolute;}#box2{width: 100px;height: 100px;position: absolute;background-color: rebeccapurple;left: 200px;top: 200px;}</style><script>window.onload = function(){var box1 = document.getElementById("box1");var box2 = document.getElementById("box2");//拖拽box1元素// 拖拽流程//      1.当鼠标在被拖拽元素上按下时，开始拖拽      onmousedown//      2.当鼠标移动时候被拖拽元素跟随鼠标移动      onmousemove//      3.当鼠标松开时，被拖拽元素固定在当前位置     onmouseupdrag(box1);drag(box2);}function drag(obj){//为obj绑定拖拽响应函数obj.onmousedown = function(event){//求出div偏移量 鼠标.clentX - 元素.offsetLeft//求出div偏移量 鼠标.clentY - 元素.offsetTOPvar ol = event.pageX - obj.offsetLeft;var ot = event.pageY - obj.offsetTop;// alert("拖拽");document.onmousemove = function(event){var left = event.pageX - ol;var top = event.pageY - ot;obj.style.left = left + "px";obj.style.top = top + "px";};document.onmouseup = function(event){//当时鼠标松开时，被拖拽元素固定在当前位置//取消document.onmousemove事件   document.onmousemove = null;// alert("1");//取消document.onmouseupdocument.onmouseup = null;};//当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能的异常//这个是浏览器提供的一个默认行为，如果不希望发生这个行为，则可以通过 return false 来取消默认行为return false;};}</script>
</head>
<body style="height: 2000px;"><div id="box1"></div><div id="box2"></div>
</body>
</html>

javascript 基础（76-107）相关推荐

JavaScript基础，Cookies,Sessions
php和JavaScript,掌握JavaScript基础,自定义函数,流程控制语句,事件,调用JavaScript脚本,在PHP中使用JavaScript. JavaScript是网景公司开发的,是 ...
常见JavaScript基础面试题上（附答案）
常见JavaScript基础面试题上(附答案) 1.JavaScript有哪些垃圾回收机制? 有以下垃圾回收机制. 标记清除( mark and sweep) 这是 JavaScript最常见的垃圾回 ...
JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
JavaScript基础09-day11【原型对象、toString()、垃圾回收、数组、数组字面量、数组方法】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
JavaScript 基础知识 - DOM篇(二)
7. 节点操作 7.1 节点的属性节点分类: 标签节点文本节点属性节点注释节点节点常用的属性: nodeType:节点的类型 nodeName:节点名称 nodeValue:节点值常见的节 ...
任务3-1(JavaScript基础)
web前端开发JavaScript基础 1.VScode配置: 2.JavaScript语法: 2.1 注释和console 2.2 三个容器关键字 2.3 数据类型 2.4 类型转换 2.5 数值运 ...
前端学习之 JavaScript基础
一. JavaScript简介 1. JavaScript的历史背景介绍 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.这是历史上第一个比较成熟的网络浏览器,轰动一时 ...
前端JavaScript基础
目录 JavaScript基础 1:JS概述 1.1:历史: 1.2:现状: 1.3:特点: 1.4:应用场景 2.搭建开发环境 2.1:浏览器: 2.2:服务器端 2.3:运行JS 3.语法规范 4 ...
JavaScript 基础学习笔记
JavaScript 基础一.初始 JavaScript 1.JS 注释 2.JS 输入输出语句二.变量 1.变量概述 1)什么是变量 2)变量在内存中的存储 2.变量的使用 3.变量的初始化 4 ...
【JavaScript基础教程】
JavaScript基础教程第一章课程准备 1-1.js简介 1-2.js特点 1-3.ES,JS和JScript关系 1-4.内部引入注释 1-5.外部引入和行内引入 1-6.输入输出工具 1- ...

javascript 基础（76-107）