JS进阶知识三

黑马金牌编程 09-16 129

前言：

如今朋友们对“js追加节点”都比较看重，各位老铁们都需要了解一些“js追加节点”的相关内容。那么小编也在网摘上网罗了一些有关“js追加节点””的相关资讯，希望我们能喜欢，你们快快来学习一下吧！

JS进阶知识三

6、DOM重点核心

文档对象模型( Document ObjectModel ,简称DOM) , 是W3C组织推荐的处理可扩展标记语言

( HTML或者XML )的标准编程接口。

W3C已经定义了-系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。

1.对于JavaScript ,为了能够使JavaScript操作HTML , JavaScript就有了-套自己的dom编程接口。

2.对于HTML , dom使得html形成一棵dom树. 包含戈档、元素、节点

关于dom操作,我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

6.1创建

1.document.write

2.innerHTML

3.createElement

6.2增

1.appendChild(后面添加)

2.insertBefore（前面添加）

6.3删除

1.removeChild

6.4改

主要修改dom的元素属性，dom元素的内容、属性，表单的值等

1.修改元素属性: src. href. title等

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

3. 修改表单元素: value、 type、 disabled等

4.修改元素样式: style、 className

6.5查

主要获取查询dom元素

1. DOM提供的API方法: getElementByld. getElementsByTagName 古者用法不太推荐

2. H5提供的新方法: querySelector. querySelectorAl 提倡

3.利用节点操作获取元素:父(parentNode).子(children)、兄(previousElementSibling.

nextElementSibling)提倡

6.6属性操作

主要针对自定义属性

1. setAttribute :设置dom的属性值

2. getAttribute :得到dom的属性值

3. removeAttribute移除属性

6.7事件操作

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

1.注册事件（绑定事件）

1.1注册事件概述

给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式：传统方式和方法监听注册方式

传统注册方式

利用on开头的事件onclick<button onclick= " alert('hi~')" > </button>btn.onclick = function() {}特点:注册事件的唯一性同一个元素同一个事件只能设置-个处理函数, 最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式

w3c标准推荐方式addEventListener()它是一一个方法IE9之前的IE不支持此方法,可使用attachEvent0代替特点:同一个元素同一个事件可以注册多个监听器按注册顺序依次执行

1.2 addEventListener事件监听方式

注意：

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

(2)同一个元素同一个事件可以添加多个侦听器(事件处理程序)

1.4注册事件兼容性解决方案

兼容性处理的原则：首先照顾大多数浏览器，在处理特殊浏览器

2.删除事件（解绑）

2.1删除事件的方式

1.传统注册方式

eventTarget.onclick = null;

2.方法监听注册方式

①eventTarget . remove EventListener (type，listener [，useCapture]) ;

<body>    <div>1</div>    <div>2</div>    <div>3</div>    <script>        var divs = document.querySelectorAll('div');        divs[0].onclick = function(){            alert(11);            //1.传统方式删除事件            divs[0].onclick = null;        }        divs[1].addEventListener('click',fn)//里面的fn 不需要调用加小括号                  function fn(){            alert(22);            divs[1].removeEventListener('click',fn);        }        //3.        divs[2].attachEvent('onclick',fn1)                  function fn1(){            alert(33);            divs[2].removeEventListener('onclick',fn1);        }            </script>

2.2删除事件兼容性解决方案

3.DOM事件流

事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。

比如我们给一个div 注册了点击事件:

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

注意：

4.事件对象

1. event 就是一个事件对象写到我们侦听函数的小括号里面当形参来看

2.事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数

3.事件对象是我们事件的系列相关数据的集合跟事件相关的比如鼠标点击里面就包含了鼠标的相

关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息比如判断用户按下了那个键

4.这个事件对象我们可以自己命名比如event、evt、 e