DOM重点核心

文档对象模型,是W3C推荐的处理可扩展的标记语言的标准编程接口

我们主要针对与勇士的操作,主要有创建、增加、删除、修改、查询、属性操作、事件操作

　三种动态创建元素的区别

　document.write() //在文档中写一个标签,如果页面文档加载完毕,再调用这句话会导致页面重绘

1  <button>123</button>
2     <script>
3         var btn = document.querySelector("button")
4         btn.onclick = function () {
5             document.write("<div>123</div>")
6         }
7     </script>

　element.innerHTML //创建多个元素效率更高(毕业拼接字符串采取数组形式拼接)结果稍微繁杂

 1 <div class="box">
 2     </div>
 3     <script>
 4         var div = document.querySelector(".box")
 5         // for (var i = 0; i < +100; i++) {
 6         //     div.innerHTML += "<a href='#'>1234</a>"
 7         // }
 8         var arr = []
 9         for (var j = 0; j <= 100; j++) {
10             arr.push( '<a href = "#"> 1234 </a>')
11             }
12             div.innerHTML = arr.join("")
13     </script>

document.createElement() //创建多个元素效率稍微低一些但是结构会很清晰

1  <div class="box2">
2     </div>
3     <script>
4         var box2 = document.querySelector(".box2")
5         for (var i = 0; i <= 100; i++) {
6             var a = document.createElement("a")
7             box2.appendChild(a)
8         }
9     </script>

增加的主要有

appendChild(在后面增加)、insertbefore(在前面增加)

删除

removeChild

修改主要是对元素的属性,DOM元素的内容、属性、表单的值等

修改元素的属性:src、innerHTML、title等

修改普通元素内容:innerHTML、innerText

修改表单属性:value、type、disabled等

修改元素样式:style/className

查询

DOM提供的API方法:getElementByid,getElementByTagName 老方法不推荐使用

H5新增的方法:querySelector、querySelectorAll 提倡使用

利用节点操作获取元素:父节点(parentNode)、子节点(children)、兄(previousElementSibling、nextElementSibling)提倡使用

属性操作

setattribute:设置DOM的属性值

getAttribute:得到DOM的属性值

removeAttribute移除属性值

事件操作

给元素注册事件,采取事件源.事件类型=事件处理程序

onclick~~~~~~~~~~鼠标点击触发

onmouseover~~~~~~~~鼠标经过触发

onmouseout~~~~~~~~~鼠标离开触发

onfocus~~~~~~~~~~获取鼠标焦点触发

onblur~~~~~~~~~~~失去鼠标焦点触发

onmousemove~~~~~~~~~~鼠标移动触发

onmouseup~~~~~~~~~~鼠标弹起触发

onmousedown~~~~~~~~~鼠标按下触发

给元素添加事件,我们称为注册事件或者绑定事件

注册事件的两种方法

传统方法和方法监听注册事件方式

传统方式

利用on开头的事件onclick 特点是注册事件的唯一性,同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的函数

方法监听注册方式

addEventListener() 推荐使用特点同一个元素同一个事件可以注册多个监听器按照注册顺序依次执行

eventTarget.addEventListener(type,listener[,useCapture])方法将指定的监听器注册到

type:事件类型字符串,比如click、mouseover 注意:这里不需要带on

listener:事件处理函数，事件发生时,会调用该监听函数

useCapture:可选参数，是一个布尔值，默认是false.学完DOM事件后进一步学习

事件监听注册事件 addeventlistenr()

里面的事件类型是字符串必须加引号而且不带on

同一个元素,同一个事件可以添加多个监听器

attachevent()方法 i9以前的版本支持不推荐使用

 1     <button class="btn2">1234</button>
 2     <script>
 3         var btn = document.querySelector(".btn2")
 4         // 事件监听注册事件  addeventlistenr 里面的事件类型是字符串 必须加引号 而且不带on
 5         btn.addEventListener('click', function () {
 6             alert("88")
 7         })
 8         btn.addEventListener('click', function () {
 9             alert("33")
10         })
11     </script>

删除事件的方式

传统方法和方法监听注册事件方式eventTaget.onclick=null;

方法监听注册:removeEventListener(type,lister[,useCapture])

 1     <div>1</div>
 2     <div>2</div>
 3     <div>3</div>
 4     <script>
 5         var divs = document.querySelectorAll("div")
 6         divs[0].onclick = function () {
 7             alert("ok")
 8             divs[0].onclick = null
 9         }
10         
11         divs[1].addEventListener('click', fn)
12         function fn() {
13             alert("99")
14             divs[1].removeEventListener('click', fn)
15         }
16     </script>

DOM事件流

事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程就叫DOM事件流

捕获阶段~~~~目标阶段~~~~冒泡阶段

注意

JS代码这里执行捕获或者冒泡其中的一个阶段

onclick和attachevent只能得到冒泡阶段

addeventlistener()里面的第三个参数如果是true 表示事件捕获阶段调用处理程序，如果是false表示在事件冒泡阶段调用处理函数

 1 <div class="father">
 2         <div class="son">son</div>
 3     </div>
 4         <script>
 5             // 捕获阶段
 6             // var son = document.querySelector(".son")
 7             // son.addEventListener('click', function () {
 8             //     alert("00")
 9             // }, true)
10             // var father = document.querySelector(".father")
11             // father.addEventListener('click', function () {
12             //     alert("father")
13             // }, true)
14 
15 
16             // 冒泡阶段  如果第三个参数是false就是冒泡阶段
17             var son = document.querySelector(".son")
18             son.addEventListener('click', function () {
19                 alert("00")
20             }, false)
21             var father = document.querySelector(".father")
22             father.addEventListener('click', function () {
23                 alert("father")
24             }, false)
25             document.addEventListener('click', function () {
26                 alert("987")
27             })
28         </script>

JS DOM重点核心笔记