原生js操作dom的总结

摘要:
DOM定义了访问和操作HTML文档(网页)的标准方法。DOM的全名是DocumentObjectModel,即文档模型对象。因此,学习DOM就是学习如何通过文档对象1控制台操作网页上的内容。log//当前html文档2console的内容。log//它是一个对象类型3console。log//它是当前html文档的title标记中的值2:获取DOM元素1˂!

一.学习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的总结》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇AndroidManifest.xml文件详解(meta-data)iis 7上发布mvc报错:403.14Forbidden Web 服务器被配置为不列出此目录的内容下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

开发一个简易的图书增删改查页面

需求 """1. 实现用户登录、注册 2. 列出图书列表、出版社列表、作者列表 3. 点击作者,会在新的页面列出该作者出版的图书列表 4. 点击出版社,会列出该出版社旗下图书列表 5. 可以创建、修改、删除 图书、作者、出版社 A. 点击修改书籍按钮,弹出模态框,模态框中展示该书的信息且信息可以修改, B. 书名不可重复,不可修改 C. 修改图书信息时...

JQuery中的DOM操作

内容摘录自锋利的JQuery一书 一. DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core(核心)、HTML-DOM和CSS-DOM。 1. DOM Core DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网页,也可以用来处理任何一种使用标记语言编写出来的文档,如XM...

JS CustomEvent自定义事件传参

首先,看了鑫大佬的文章后,百度了文章内容的两个方法: 1、CustomEvent事件是有程序创建的,可以有任意自定义功能的事件 2、dispatchEvent()方法给节点分派一个合成事件 这两个方法之前也见过,不过并没有去了解,这次刚好又看到,就简单了解一下。好了,直接进入正文 一、addEventListener事件触发 例子,假设DOM对象变量名称是...

js 把对象按照属性名的字母顺序进行排列

var obj = {name: "zhangsan", age: 8, ace: 5, nbme: "lisi"};//要排序的对象 function objKeySort(obj) {//排序的函数 var newkey =Object.keys(obj).sort();   //先用Object内置类的keys方法获取要排序对象的属性...

【实践】js实现windows系统日历

思路:1、定义好每一个月份的日期天数2、获取当前的系统日期初始化数据3、输出日历    2.1、先获取当前月的第一天是星期几(这一点与日历的排版至关重要!)    2.2、获取当前月的天数    2.3、获取当前月有多少个星期(即要输出多少行 行数这里我会预留多一行)    2.4、获取当前年份和月份 用作显示 <!DOCTYPE html>...

js 计算浮点数

JS的浮点计算 最近遇到了数值计算的时候,计算结果出现了类似于199.9999999999999999999的情况,但是被用来计算的两个数值都只是两位数。 就像这样      --------》         0.1 + 0.2 = 0.30000000000000004。 其实对于浮点数的四则运算,几乎所有的编程语言都会有类似精度误差的问题,...