zoukankan html css js c++ java

原生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>

查看全文

相关阅读:
combo,raido
块级作用域问题ES5 & ES6
基本类型和引用类型_深拷贝和浅拷贝
 由数组扁平化切入generator函数
 Promise基本用法
 原生ajax请求之前端
 ExtJS组件window
ORACLE(+) 号的用法，及与逗号运算符的差别
 centos7发布json中文显示乱码
 centos7 svn在repository在的情况下重装恢复

原文地址：https://www.cnblogs.com/gsq1998/p/12230827.html