原生js操作dom的总结
一.学习DOM之前需要知道的
1.什么是window？
window：是一个全局对象, 代表浏览器中一个打开的窗口, 每个窗口都是一个window对象
2.什么是document?
document是window的一个属性, 这个属性是一个对象
document: 代表当前窗口中的整个网页,
document对象保存了网页上所有的内容, 通过document对象就可以操作网页上的内容
3.什么是DOM?
DOM 定义了访问和操作 HTML文档(网页)的标准方法
DOM全称: Document Object Model, 即文档模型对象
所以学习DOM就是学习如何通过document对象操作网页上的内容
1 console.log(window.document); //就是当前html文档的内容
2 console.log(typeof window.document); //是一个对象类型
3 console.log(window.document.title); //就是当前html文档的title标签里的值
二：获取DOM元素的方式之一
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title></title>
6 </head>
7 <body>
8 <!--
9 1.在JavaScript中HTML标签也称之为DOM元素
10 2.使用document的时候前面不用加window
11 var num = 666;
12 window.num;
13 num;
14 同理可证
15 window.document;
16 document;
17 -->
18 <div class="father">
19 <form>
20 <input type="text" name="test" />
21 <input type="password" name="test" />
22 </form>
23 </div>
24 <div class="father" id="box">我是div</div>
25
26 <script>
27 /*
28 1.通过id获取指定元素
29 由于id不可以重复, 所以找到了就会将找到的标签包装成一个对象返回给我们, 找不到就返回Null
30 注意点: DOM操作返回的是一个对象, 这个对象是宿主类型对象(浏览器提供的对象)
31 */
32 /*
33 let oDiv = document.getElementById("box");
34 console.log(oDiv);
35 console.log(typeof oDiv);
36 */
37
38 /*
39 2.通过class名称获取
40 由于class可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组
41 */
42 /*
43 let oDivs = document.getElementsByClassName("father");
44 console.log(oDivs);
45 */
46
47 /*
48 3.通过name名称获取
49 由于name可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组
50 注意点:
51 getElementsByName 在不同的浏览器其中工作方式不同。在IE和Opera中， getElementsByName() 方法还会返回那些 id 为指定值的元素。
52 */
53 /*
54 let oDivs = document.getElementsByName("test");
55 console.log(oDivs);
56 */
57
58 /*
59 4.通过标签名称获取
60 由于标签名称可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组
61 */
62 /*
63 let oDivs = document.getElementsByTagName("div");
64 console.log(oDivs);
65 */
66
67 /*
68 5.通过选择器获取
69 querySelector只会返回根据指定选择器找到的第一个元素
70 */
71 /*
72 // let oDiv = document.querySelector("#box");
73 // let oDiv = document.querySelector(".father");
74 let oDiv = document.querySelector("div>form");
75 console.log(oDiv);
76 */
77
78 /*
79 6.通过选择器获取
80 querySelectorAll会返回指定选择器找到的所有元素
81 */
82 // let oDivs = document.querySelectorAll(".father");
83 // console.log(oDivs);
84 </script>
85 </body>
86 </html>
三：获取DOM元素的方式之二
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title></title>
6 </head>
7 <body>
8 <div>
9 <h1>1</h1>
10 <h2>2</h2>
11 <p class="item">3</p>
12 <p>4</p>
13 <span ewewe="eweww">5</span>
14 </div>
15 <script>
16 /*
17 // 1.获取指定元素所有的子元素
18 // let oDiv = document.querySelector("div");
19 // children属性获取到的是指定元素中所有的子元素
20 //拿到的是伪数组
21 // console.log(oDiv.children);
22 // childNodes属性获取到的是指定元素中所有的节点
23 // console.log(oDiv.childNodes);
24 /*
25
26 /*
27 2.什么是节点?
28 DOM对象(document), 这个对象以树的形式保存了界面上所有的内容
29 HTML页面每一部分都是由节点(标签(元素),文本,属性)
30 */
31
32 // 3.获取指定节点中的第一个子节点
33 // let oDiv = document.querySelector("div");
34 // console.log(oDiv.firstChild);
35 // 获取指定元素中的第一个子元素
36 // console.log(oDiv.firstElementChild);
37
38 // 4.获取指定节点中最后一个子节点
39 // console.log(oDiv.lastChild);
40 // 4.获取指定元素中最后一个子元素
41 // console.log(oDiv.lastElementChild);
42
43 // 5.通过子元素获取父元素/父节点
44 // let item = document.querySelector(".item");
45 // console.log(item.parentElement);
46 // console.log(item.parentNode);
47 // let parentEle = item.parentElement || item.parentNode;
48 // console.log(parentEle);
49
50 // 6.获取相邻上一个节点
51 // console.log(item.previousSibling);
52 // 获取相邻上一个元素
53 // console.log(item.previousElementSibling);
54
55 // 7.获取相邻下一个节点
56 // console.log(item.nextSibling);
57 // 获取相邻下一个元素
58 // console.log(item.nextElementSibling);
59 </script>
60 </body>
61 </html>
四：节点的增删改查
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title></title>
6 </head>
7 <body>
8 <div>
9 我
10 <h1>我是标题</h1>
11 <p>我是段落</p>
12 </div>
13 <script>
14 // 1.创建节点
15 // let oSpan = document.createElement("span");
16 // console.log(oSpan);
17 // console.log(typeof oSpan); //object类型
18
19 // 2.添加节点
20 // 注意点: appendChild方法会将指定的元素添加到最后
21 // let oDiv = document.querySelector("div");
22 // oDiv.appendChild(oSpan)
23 // let oA = document.createElement("a");
24 // oDiv.appendChild(oA);
25
26 // 3.插入节点
27 // let oSpan = document.createElement("span");
28 // let oDiv = document.querySelector("div");
29 // let oH1 = document.querySelector("h1");
30 // let oP = document.querySelector("p");
31 // oDiv.insertBefore(oSpan, oH1); //在oSpan之前插入oh1
32
33 // 5.删除节点
34 // 注意点: 在js中如果想要删除某一个元素, 只能通过对应的父元素来删除
35 // 元素是不能够自杀的
36 // console.log(oSpan.parentNode);
37 // oSpan.parentNode.removeChild(oSpan);
38 // oDiv.parentNode.removeChild(oDiv);
39
40 // 5.克隆节点
41 // 注意点: cloneNode方法默认不会克隆子元素, 如果想克隆子元素需要传递一个true
42 // let oDiv = document.querySelector("div");
43 // let newDiv = oDiv.cloneNode();
44 // let newDiv = oDiv.cloneNode(false);
45 // console.log(newDiv);
46 </script>
47 </body>
48 </html>
五：元素属性的操作
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <div class="we" name="gsq" age="14"></div>
9 <script>
10 /*
11 无论是通过document创建还是查询出来的标签,系统都会将元素包装成一个对象返回给我们,
12 系统在包装这个对象的时候会自动将元素的属性都包装到这个对象中,
13 所以只要拿到这个对象就可以拿到标签属性,操作标签属性
14 */
15 /*
16 1.如何获取元素属性
17 2.如何修改元素属性
18 3.如何新增元素属性
19 4.如何删除元素属性
20 */
21
22 // 1.如何获取元素属性
23 // let div = document.querySelector("div");
24 // console.log(div.getAttribute("name")); //gsq
25 // 注意点: 通过对象.属性名称的方式无法获取到自定义属性的取值
26 // 通过getAttribute方法可以获取到自定义属性的取值
27
28
29 // 2.如何修改元素属性
30 /*
31 let div = document.querySelector("div");
32 // div.age = "19";
33 // div.setAttribute("age", "20");
34 // 注意点和获取元素属性一样
35 // div.nj = "123";
36 div.setAttribute("nj", "123");
37 */
38
39 // 3.如何新增元素属性
40 /*
41 let div = document.querySelector("div");
42 // div.it666 = "itzb";
43 // 注意点: setAttribute方法如果属性不存在就是新增, 如果属性存在就是修改
44 div.setAttribute("it666", "itzb");
45 */
46
47 // 4.如何删除元素属性
48 // let div = document.querySelector("div");
49 // div.removeAttribute("class");
50 // 注意点和获取元素属性一样
51 // div.nj = "";
52 // div.removeAttribute("nj");
53 </script>
54 </body>
55 </html>
六：元素内容的操作
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title></title>
6 </head>
7 <body>
8 <div>
9 我是div
10 <h1>我是标题</h1>
11 <p>我是段落</p>
12 </div>
13 <script>
14 // 1.获取元素内容
15 /*
16 1.innerHTML获取的内容包含标签, innerText/textContent获取的内容不包含标签
17 2.innerHTML/textContent获取的内容不会去除两端的空格, innerText获取的内容会去除两端的空格
18 */
19 /*
20 let oDiv = document.querySelector("div");
21 console.log(oDiv.innerHTML);
22 console.log(oDiv.innerText);
23 console.log(oDiv.textContent);
24 */
25
26 // 2.设置元素内容
27 /*
28 特点:
29 无论通过innerHTML/innerText/textContent设置内容, 新的内容都会覆盖原有的内容
30 区别:
31 如果通过innerHTML设置数据, 数据中包含标签, 会转换成标签之后再添加
32 如果通过innerText/textContent设置数据, 数据中包含标签, 不会转换成标签, 会当做一个字符串直接设置
33 */
34 // let oDiv = document.querySelector("div");
35 // oDiv.innerHTML = "123";
36 // oDiv.innerText = "456";
37 // oDiv.textContent = "789";
38 // oDiv.innerHTML = "<span>我是span</span>";
39 // oDiv.innerText = "<span>我是span</span>";
40 // oDiv.textContent = "<span>我是span</span>";
41 </script>
42 </body>
43 </html>
七：操作元素样式
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title></title>
6 <style>
7 .box {
8 width: 200px;
9 height: 200px;
10 background-color: red;
11 }
12 </style>
13 </head>
14 <body>
15 <div class="box"></div>
16 <script>
17 // 1.设置元素样式
18 /*
19 let oDiv = document.querySelector("div");
20 // 第一种方式
21 // 注意点: 由于class在JS中是一个关键字, 所以叫做className
22 // oDiv.className = "box";
23 // 第二种方式
24 // 注意点: 过去CSS中通过-连接的样式, 在JS中都是驼峰命名
25 // 注意点: 通过JS添加的样式都是行内样式, 会覆盖掉同名的CSS样式
26 oDiv.style.width = "300px";
27 oDiv.style.height = "300px";
28 oDiv.style.backgroundColor = "blue";
29 */
30
31 // 2.获取元素样式
32 let oDiv = document.querySelector("div");
33 // oDiv.style.width = "300px";
34 // 注意点: 通过style属性只能过去到行内样式的属性值, 获取不到CSS设置的属性值
35 // console.log(oDiv.style.width);
36 // 注意点: 如果想获取到CSS设置的属性值, 必须通过getComputedStyle方法来获取
37 // getComputedStyle方法接收一个参数, 这个参数就是要获取的元素对象
38 // getComputedStyle方法返回一个对象, 这个对象中就保存了CSS设置的样式和属性值
39 let style = window.getComputedStyle(oDiv);
40 console.log(style.width);
41 </script>
42 </body>
43 </html>
八：DOM事件
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title></title>
6 </head>
7 <body>
8 <button>我是按钮</button>
9 <a href="http://www.baidu.com">我是a标签</a>
10 <script>
11 /*
12 1.什么是事件?
13 用户和浏览器之间的交互行为我们就称之为事件, 比如：点击，移入/移出
14
15 2.如何给元素绑定事件?
16 在JavaScript中所有的HTML标签都可以添加事件
17 元素.事件名称 = function(){};
18 当对应事件被触发时候就会自动执行function中的代码
19 */
20 let oBtn = document.querySelector("button");
21 oBtn.onclick = function() {
22 alert("按钮被点击了");
23 };
24 // 注意点: 如果给元素添加了和系统同名的事件, 我们添加的事件不会覆盖系统添加的事件
25 let oA = document.querySelector("a");
26 oA.onclick = function() {
27 alert("a标签被点击了");
28 // 以下代码的含义: 用我们添加的事件覆盖掉系统同名的事件
29 return false;
30 };
31 </script>
32 </body>
33 </html>
九：定时器
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title></title>
6 </head>
7 <body>
8 <button id="start">开始</button>
9 <button id="close">结束</button>
10 <script>
11 /*
12 在JavaScript中有两种定时器, 一种是重复执行的定时器, 一种是只执行一次的定时器
13 */
14 // 1.重复执行的定时器
15 /*
16 // setInterval(function () {
17 // console.log("随便写点");
18 // }, 1000);
19 let startBtn = document.querySelector("#start");
20 let id = null;
21 startBtn.onclick = function () {
22 id = setInterval(function () {
23 console.log("随便写点");
24 }, 1000);
25 }
26 let closeBtn = document.querySelector("#close");
27 closeBtn.onclick = function () {
28 clearInterval(id);
29 }
30 */
31
32 // 2.只执行一次的定时器
33 // window.setTimeout(function () {
34 // console.log("随便写点");
35 // }, 5000);
36 let startBtn = document.querySelector("#start");
37 let closeBtn = document.querySelector("#close");
38 let id = null;
39 startBtn.onclick = function() {
40 id = window.setTimeout(function() {
41 console.log("随便写点");
42 }, 5000);
43 };
44 closeBtn.onclick = function() {
45 clearTimeout(id);
46 };
47 </script>
48 </body>
49 </html>
十：添加事件的方式
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <button id="btn">我是按钮</button>
9 <script>
10 var oBtn = document.getElementById("btn");
11 /*
12 方式一:
13 1.通过onxxx的方式来添加
14 注意点: 由于是给属性赋值, 所以后赋值的会覆盖先赋值
15 */
16 /*
17 oBtn.onclick = function () {
18 alert("666");
19 }
20 oBtn.onclick = function () {
21 alert("777");
22 }
23 let obj = {};
24 obj.say = function () {
25 console.log("123");
26 }
27 obj.say = function () {
28 console.log("456");
29 }
30 obj.say();
31 */
32
33 /*
34 方式二:
35 2.通过addEventListener方法添加
36 注意点:
37 1.事件名称不需要添加on
38 2.后添加的不会覆盖先添加的
39 3.只支持最新的浏览器IE9
40 */
41 /*
42 oBtn.addEventListener("click", function () {
43 alert("666");
44 });
45 oBtn.addEventListener("click", function () {
46 alert("777");
47 });
48 */
49
50 /*
51 方式三
52 3.通过attachEvent方法添加
53 注意点:
54 1.事件名称必须加上on
55 2.后添加的不会覆盖先添加的
56 3.只支持低版本的浏览器
57 */
58 /*
59 oBtn.attachEvent("onclick", function () {
60 alert("666");
61 });
62 oBtn.attachEvent("onclick", function () {
63 alert("777");
64 });
65 */
66
67 // 自己封装一个兼容性的添加事件的方法
68 addEvent(oBtn, "click", function () {
69 alert("666");
70 })
71 addEvent(oBtn, "click", function () {
72 alert("777");
73 })
74 function addEvent(ele, name, fn) {
75 if(ele.attachEvent){
76 ele.attachEvent("on"+name, fn);
77 }else{
78 ele.addEventListener(name, fn);
79 }
80 }
81 </script>
82 </body>
83 </html>
十一：事件对象
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <button id="btn">我是按钮</button>
9 <a href="http://www.baidu.com">百度</a>
10 <script>
11 /*
12 1.什么是事件对象?
13 事件对象就是一个系统自动创建的一个对象
14 当注册的事件被触发的时候, 系统就会自动创建事件对象
15 */
16 /*
17 2.事件对象的注意点:
18 在高级版本的浏览器中, 会自动将事件对象传递给回到函数
19 在低级版本的浏览器中, 不会自动将事件对象传递给回调函数
20 在低级版本的浏览器中, 需要通过window.event来获取事件对象
21 */
22 /*
23 var oBtn = document.getElementById("btn");
24 oBtn.onclick = function (event) {
25 // 兼容性的写法
26 event = event || window.event;
27 // alert("666");
28 console.log(event);
29 console.log(typeof event);
30 }
31 */
32 let oA = document.querySelector("a");
33 oA.onclick = function (event) {
34 // 兼容性的写法
35 event = event || window.event;
36
37 alert("666");
38 // 阻止默认行为
39 return false; // 企业开发推荐
40
41 // 注意点: preventDefault方法只支持高级版本的浏览器
42 // event.preventDefault();
43 // event.returnValue = false; // IE9以下的浏览器
44 }
45 </script>
46 </body>
47 </html>
十二：事件执行的三个阶段
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 .father{
12 width: 300px;
13 height: 300px;
14 background: red;
15 }
16 .son{
17 width: 150px;
18 height: 150px;
19 background: blue;
20 }
21 </style>
22 </head>
23 <body>
24 <div class="father">
25 <div class="son"></div>
26 </div>
27 <script>
28 /*
29 1.事件的三个阶段
30 1.1.捕获阶段(从外向内的传递事件)
31 1.2.当前目标阶段
32 1.3.冒泡的阶段(从内向外的传递事件)
33
34 2.注意点:
35 三个阶段只有两个会被同时执行
36 要么捕获和当前, 要么当前和冒泡
37
38 3.为什么要么只能是捕获和当前, 要么只能是当前和冒泡?
39 这是JS处理事件的历史问题
40 早期各大浏览器厂商为占领市场, 以及对事件的理解不同
41 后续W3C为了兼容, 将两种方式都纳入标准
42 */
43
44 // 1.如何设置事件到底是捕获还是冒泡?
45 // 通过addEventListener方法, 这个方法接收三个参数
46 // 第一个参数: 事件的名称
47 // 第二个参数: 回调函数
48 // 第三个参数: false冒泡 / true 捕获
49
50 // 注意点:
51 // onXxx的属性, 不接收任何参数, 所以默认就是冒泡
52 // attachEvent方法, 只能接收两个参数, 所以默认就是冒泡
53
54 let oFDiv = document.querySelector(".father");
55 let oSDiv = document.querySelector(".son");
56
57 // oFDiv.addEventListener("click", function () {
58 // console.log("father");
59 // }, false); //输出 father
60 // oSDiv.addEventListener("click", function () {
61 // console.log("son");
62 // }, false); //输出 son father
63
64 oFDiv.onclick = function () {
65 console.log("father"); //输出 father
66 }
67 oSDiv.onclick = function () {
68 console.log("son"); //输出 son father
69 }
70 /*
71 IE 6.0:
72 div -> body -> html -> document
73 其他浏览器:
74 div -> body -> html -> document -> window
75 注意：
76 不是所有的事件都能冒泡，以下事件不冒泡：blur、focus、load、unload
77 */
78 </script>
79 </body>
80 </html>
十三：事件冒泡的应用
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 ul{
12 list-style: none;
13 width: 300px;
14 margin: 100px auto;
15 border: 1px solid #000;
16 }
17 .selected{
18 background: red;
19 }
20 </style>
21 </head>
22 <body>
23 <ul>
24 <li class="selected">我是第1个li</li>
25 <li>我是第2个li</li>
26 <li>我是第3个li</li>
27 <li>我是第4个li</li>
28 <li>我是第5个li</li>
29 </ul>
30 <script>
31 // 冒泡事件排他的案例
32
33
34 // let oItems = document.querySelectorAll("ul>li");
35 // let currentItem = oItems[0];
36 // for(let item of oItems){
37 // item.onclick = change; //多个li使用一个change方法，节约内存空间
38 // }
39 // function change() {
40 // currentItem.className = "";
41 // this.className = "selected";
42 // currentItem = this;
43 // }
44
45
46
47 let oUl = document.querySelector("ul");
48 let oLi = document.querySelector(".selected");
49 oUl.onclick = function (event) {
50 event = event || window.event;
51 // console.log(event.target); //被点击的li对象
52 oLi.className = "";
53 let item = event.target;
54 item.className = "selected";
55 oLi = item;
56 }
57
58 </script>
59 </body>
60 </html>
十四：阻止事件冒泡
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 .father{
12 width: 300px;
13 height: 300px;
14 background: red;
15 }
16 .son{
17 width: 150px;
18 height: 150px;
19 background: blue;
20 }
21 </style>
22 </head>
23 <body>
24 <div class="father" id="father">
25 <div class="son" id="son"></div>
26 </div>
27 <script>
28 // 1.拿到需要操作的元素
29 var oFDiv = document.getElementById("father");
30 var oSDiv = document.getElementById("son");
31
32 // 2.注册事件监听
33 oFDiv.onclick = function () {
34 console.log("father");
35 }
36 oSDiv.onclick = function (event) {
37 event = event || window.event;
38 // 注意点: stopPropagation方法只支持高级浏览器
39 // event.stopPropagation();
40 // event.cancelBubble = true; // 低级浏览器
41 if(event.cancelBubble){
42 event.cancelBubble = true;
43 }else{
44 event.stopPropagation();
45 }
46 console.log("son");
47 }
48 </script>
49 </body>
50 </html>
十五：2中不同移入和移出事件的区别
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 .father{
12 width: 300px;
13 height: 300px;
14 background: red;
15 }
16 .son{
17 width: 150px;
18 height: 150px;
19 background: blue;
20 }
21 </style>
22 </head>
23 <body>
24 <div class="father">
25 <div class="son"></div>
26 </div>
27 <script>
28 /*
29 1.onmouseover和onmouseenter的区别
30 onmouseover移入到子元素,父元素的移入事件也会被触发
31 onmouseenter移入到子元素,父元素的移入事件不会被触发
32 */
33 /*
34 2.onmouseout和onmouseleave的区别
35 onmouseout移出到子元素,父元素的移入事件也会被触发
36 onmouseleave移出到子元素,父元素的移入事件不会被触发
37 */
38 let oFDiv = document.querySelector(".father");
39 let oSDiv = document.querySelector(".son");
40
41 // oFDiv.onmouseover = function () {
42 // console.log("father"); //输出 father
43 // }
44 // oSDiv.onmouseover = function () {
45 // console.log("son"); //输出 son father
46 // }
47
48
49 // oFDiv.onmouseenter = function () {
50 // console.log("father");
51 // }
52 // oSDiv.onmouseenter = function () {
53 // console.log("son");
54 // }
55
56 oFDiv.onmouseleave = function () {
57 console.log("father");
58 }
59 oSDiv.onmouseleave = function () {
60 console.log("son");
61 }
62 </script>
63 </body>
64 </html>
十六：元素位置的获取
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 div{
12 width: 100px;
13 height: 100px;
14 background: red;
15 margin-left: 100px;
16 margin-top: 100px;
17 }
18 </style>
19 </head>
20 <body>
21 <div id="box"></div>
22 <script>
23 /*
24 offsetX/offsetY: 事件触发相对于当前元素自身的位置
25 clientX/clientY: 事件触发相对于浏览器可视区域的位置
26 注意点: 可视区域是不包括滚动出去的范围的
27 pageX/pageY: 事件触发相对于整个网页的位置
28 注意点: 整个网页包括滚动出去的范围的
29 screenX/screenY: 事件触发相对于屏幕的位置
30 */
31 var oDiv = document.getElementById("box");
32 oDiv.onclick = function (event) {
33 event = event || window.event;
34 console.log("offsetX", event.offsetX);
35 console.log("offsetY", event.offsetY);
36
37 console.log("clientX", event.clientX);
38 console.log("clientY", event.clientY);
39 console.log("----------------------");
40 console.log("pageX", event.pageX);
41 console.log("pageY", event.pageY);
42
43 console.log(event.screenX);
44 console.log(event.screenY);
45 }
46 </script>
47 </body>
48 </html>
原生js操作dom的总结的更多相关文章
- 框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
- 原生js操作Dom节点:CRUD
知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...
- 原生js操作DOM基础-笔记
原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...
- 原生js操作dom的方法
今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. documen ...
- 原生Js操作DOM
查找DOM .querySelectorAll(),它接受包含一个CSS选择器的字符串参数,返回一个表示文档中匹配选择器的所有元素的NodeList元素. .querySelector(),返回第一个 ...
- 原生js 操作dom
1.一些常用的方法 obj.getElementById() 返回带有指定 ID 的元素. obj.getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节 ...
- 原生js操作Dom命令总结
常用的dom方法 document.getElementById(“box”);//通过id获取标签 document.getElementsByTagName(“div”);根据标签名获取页面 ...
- 原生js操作dom备忘
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- 使用原生 JavaScript 操作 DOM
原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...
- js操作DOM对象
js操作DOM对象 (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...
随机推荐
- DotNetGuide荣登GitHub C#中文 Trending 月榜第一
前言 发现最近有一大批应届生同学和Java转.NET的同学加入了我们的DotNetGuide技术社区交流6群(其他5个群都已满500人,6群也已有340多个小伙伴了)今天看到DotNetGuide荣登 ...
- 在VisualStudio中WPF应用程序在打开窗体界面设计时报错<发生了未经处理的异常>的解决方法
在网上找了一个wpf的开源项目,在打开窗体,点击设计的时候,提示错误信息如下 System.Resources.MissingSatelliteAssemblyExceptionThe satelli ...
- 在Docker中搭建rabbit MQ集群 （Mac + OrbStack）
我以为用docker搭建一个rabbitMq集群会非常简单,但是结果却出乎意料,我花了差不多两个半天才搞定.这还是依赖了AI的协助,否则难度不敢想象. 我的环境是Mac上的OrbStack.用了Kim ...
- Spring定时任务和@Async注解异步调用
Spring定时任务 1.@Scheduled注解方式 使用方式 @Scheduled的使用方式十分简单,首先在项目启动类添加注解@EnableScheduled. 编写定时任务方法,方法上添加注解@ ...
- 开源流式湖仓服务 Arctic 详解：并非另一套 Table Format
[点击了解更多知识] 本文根据作者于 Arctic 开源发布会演讲内容整理(略有删减),系统解读 Arctic 项目研发初衷.生态定位.核心特性.性能表现及未来规划. 首先感谢大家参与我们 Arcti ...
- 国产开源存储之光：Curve 通过信创认证
网易数帆喜讯再传,Curve 近日通过信息技术应用创新(信创)认证! Curve 是一款高性能.易运维.云原生的分布式存储系统,由网易数帆存储团队发起开源,现为 CNCF 沙箱项目.国家工业信息安全发 ...
- Linux-makefile命令后面的-j4 -j8是什么意思？
其实是指在编译指定的文件时用多少个线程进行编程的意思~ 相关命令示例如下: make zImage -j8 make modules -j8 --------------------------- m ...
- django 信号判断是新增、修改还是删除
在Django的信号处理器中,你可以使用一些方法来确定信号是关于新增(create).修改(update)还是删除(delete)的.这通常涉及到检查 created 和 instance 参数的值. ...
- Linux 提权-密码搜寻
本文通过 Google 翻译 Password Hunting – Linux Privilege Escalation 这篇文章所产生,本人仅是对机器翻译中部分表达别扭的字词进行了校正及个别注释补充 ...
- bitwarden本地搭建(无需购买SSL证书)
bitwarden本地搭建(无需购买SSL证书) 在安装之前,笔者在这里先声明一下,我安装bitwarden使用的操作环境为ArchLinux,我的想法是,因为这只是一个"密码本" ...