前端入门视频笔记 JavaScript（七/八/九）DOM P194-215、234、10121895

JS分为 ECMAScript、DOM文档对象模型、BOM浏览器对象模型三部分

 

七

API（Application Program Interface，应用程序接口）

是一些预定义的函数，让开发人员无需访问源码，无需了解内部工作机制的细节，就可以完成一些功能的工具。

 

Web API 就是指DOM和BOM，是浏览器提供的一套实现浏览器功能和页面元素的API；

它是 JS 的 应用，用JS基础语法实现网页交互效果。

 

04/05  DOM（文档对象模型）简介

DOM（Document Object Modle）是处理可扩展标记语言（HTML或XML）的标准程序接口。

 

将页面表示成DOM树，DOM将树上这些内容都看成对象：

文档（document）—— 一个页面就是一个文档；

元素（element）—— 页面中所有标签都是元素；

节点（node）—— 网页中所有内容（标签、属性、文本、注释等）都是节点。

 

（创建、增、删、改、查、属性操作、事件操作）

06~09 获取元素

要操作元素，实现功能，首先要获取元素，获取方式有以下几种：

（1）通过ID获取

                                            document.getElementById ( 'ID名' )

        返回的是一个元素对象（object），用 console.dir 打印元素对象，可以更好地查看里面的属性和方法。

 

（2）通过标签名获取

                                            document.getElementByTagName ( '标签名' )         或                                       

                                            父元素.getElementByTagName ( '标签名' )

        返回带有指定标签名的对象集合，以伪数组的形式存储；

        还可以获取指定的某一个父元素内部所有指定标签名的子元素。

 

（3）H5新增的获取元素方式（推荐）

        通过类名获取，返回指定类名的对象集合：

                                            document.getElementByClassName ( '类名' )                                                                          

        通过选择器获取（），返回指定选择器的第一个元素对象：     

                                            document.querySelector ( '标签名' )

        返回指定选择器的所有元素对象集合：     

                                            document.querySelectorAll ( '标签名' )

 

（4）获取特殊元素    

                                            document.body                                  //获取body元素 

                                            document.documentElement             //获取html元素 

 

10/11  事件基础

事件的本质：触发——响应机制

 

事件由三要素组成：

• 事件源 —— 事件被触发的对象；
• 事件类型 —— 如何触发；
• 事件处理程序（函数赋值） —— 要实现的事件效果

 

事件执行的步骤：

1. 获取事件源 —— 获取元素然后赋值给变量；
2. 注册（绑定）事件 —— 给变量绑定一个鼠标事件等；
3. 添加事件处理程序 —— 将要实现的功能效果写在函数里，再赋值给事件。

 

12~25  操作元素

JS的DOM操作可以改变网页内容、样式和结构，还可以改变元素的内容和属性；

主要就在事件处理程序（函数）中，通过操作元素来实现想要的效果。

 

（1）改变元素内容

                             element.innerText = '...' ;        或      element.innerHTML

两者的区别：

innerText 不能识别内容中的标签，赋值时会直接打印标签，读取时会删除标签并且去除空格和换行；

innerHTML（标准推荐）能识别内容中的标签，赋值时会实现标签的效果，读取时会直接打印标签并且保留空格和换行。

 

（2）改变元素属性

                              element.属性 = '...' ;    如 img.src = '...' ;

其中还有改变表单属性，如 input.value = '...'；禁用表单元素 element.disabled = true;

 

（3）改变元素的样式属性

行内样式操作：

                                            element.style.样式属性 = '...' ;

其中的样式属性采用驼峰命名法，如fontSize、backgroundColor等；

此操作产生的是行内样式，CSS权重比较高。

 

类名样式操作：

若对于一个元素想修改的样式较多，可以在CSS中新增一个类选择器，使其包含所有的样式操作；

然后在事件处理程序中，将新增选择器的类名赋值给该元素：

                                            element.className = ' (原类名)  新增类名 ' ;

 

 

八

操作元素

排他思想：有一组相同的元素，想要发生事件时只有其中一个元素实现某种样式

—— 在for循环中，先清除所有元素的样式，再修改目标元素的样式。

 

（4）自定义属性的操作

自定义属性是为了保存并使用数据，使有些数据可以保存在页面中而不用保存到数据库中。

获取元素的属性值：

element.属性                            —— 获取内置属性的值；

element.getAttribute ('属性')     —— 主要获取程序员给元素自定义的属性的值；

 

修改元素的属性值：

element.属性 = '值'                            —— 设置内置属性的值；

element.setAttribute ('属性', '值')       —— 主要设置自定义属性的值（class有点不同）；

 

移除属性：

element.removeAttribute ('属性') 

 

进行操作时，不容易判断一个属性是否是自定义属性，所以H5新增规定自定义属性都以 data- 开头来命名；

并新增data- 开头的自定义属性的读写方式： element.dataset.属性   或    element.dataset ['属性'] 

    （element.dataset 中存放了所有data-开头的自定义属性；

       其中的属性名不需要加data- 的开头，直接用后面连接的名字；

       若属性名后面部分有多个 “-” 连接的单词，则读写时采用驼峰命名法。）

 

（5）动态创建元素

document.write ('元素标签') —— 直接将内容写入页面的内容流，但文档流执行完后，会导致页面全部重绘；（了解）

node.innerHTML = '元素标签'  —— 直接写入，创建多个元素时，用拼接字符串的方式 += ，会比较耗时；用数组存储时，就会效率较高；

document.createElement ('元素标签')  —— 创建后还要与appendChild添加进去，创建多个元素时，效率会稍低一点。

 

12~19..  节点操作

 获取元素有两种方式：

一是利用DOM提供的方法（函数）获取，但这种方法逻辑性不强且繁琐；

二是利用节点层级关系（父子兄关系）获取，逻辑性强但兼容性稍差。

 

网页中所有的内容，如标签、属性、文本、注释等都是节点，在DOM中用node表示；

节点的三个基本属性：nodeType（节点类型）、nodeName（节点名称）和 nodeValue（节点值）；

nodeType：元素节点为1、属性节点为2、文本节点（文字、空格、换行等）为3；

 

（1）父节点

先获取一个元素作为node后，使用：

                                            node.parentNode

返回当前node最近的一个父节点，若无则返回null。

 

（2）子节点

                                            node.childNodes

返回当前node的所有子节点的集合，包括元素、文本节点等等（不提倡）。

 

                                            node.children

• 返回当前node的所有子元素节点，是一个只读属性（常用）。

 

                                            node.firstChild / lastChild

获取当前node的第一个/最后一个子节点，不管是文本节点还是元素节点。

 

                                            node.firstElementChild / lastElementChild

获取当前node的第一个/最后一个子元素节点，但只有IE9以上才支持；

所以实际开发中常用            node.children [ 0 ] 、node.children [ node.children.length - 1 ]

 

（3）兄弟节点

                                            node. previousSibling / nextSibling

返回当前node的上一个/下一个兄弟节点，包括元素、文本节点等等。

 

                                            node. previousElementSibling / nextElementSibling

返回当前node的上一个/下一个兄弟元素节点，但只有IE9以上才支持；

解决办法：自己封装一个兼容性函数。

 

（4）创建元素节点

原先页面中不存在的节点，通过 node.createElement ('元素标签') 可以创建一个元素节点；

然后通过 父级node.appendChild (子级元素) 可以将新创建的子元素添加到指定父节点的子节点列表的末尾；

或者通过 父级node.insertBefore (子级元素, 指定子元素) 添加到指定子元素的前面。

 

九

（5）删除节点：删除父元素中的某个子节点

                                            父级node.removeChild (子级元素)

 

（6）复制节点：

node.cloneNode (); 将当前的元素节点复制一份；

再通过 父级node.appendChild (新复制的节点) 添加到父元素中；

• 注意：如果 node.cloneNode () 括号里是空或者false，则进行的是浅拷贝，即只复制标签，不复制里面的内容；
• node.cloneNode (true);  为深拷贝，同时复制节点标签和内容。

 

 

鼠标事件

 

 

13~26..  事件高级

 

注册、删除事件

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

两种方式：传统方式（上文）和方法监听注册方式

 

传统注册方式：

< button  onclick = "alert( 'hi' )" > </buttin>  或  btn.onclick = function() {...}

具有注册事件的唯一性，即同一个事件的同一个函数只能设置一个处理函数，设置多个时就有层叠性。

 

方法监听注册方式：

                                     eventTarget.addEventListener ( type, listener[, useCapture] )

是一个方法，将指定监听器（事件处理程序）注册到目标对象上，同一个事件可以添加多个监听器并连续执行；

IE9之前的IE不支持，用attachEvent()代替。

 

参数：

type —— 事件类型字符串，如 'click'、'mouseover'；

listener —— 事件处理程序，事件发生时就调用此监听函数，function() {...}；

useCapture -—— 可选参数，默认false，表示在事件冒泡阶段调用事件处理程序，true 表示在时间捕获阶段调用。

 

（2）删除事件（解绑事件）

传统方式：

                   eventTarget.onclick/.. = null;

 

监听方式：

要将事件处理程序单独写，然后调用

                  eventTarget.removeEventListener ('click', fn); 

 

事件流、事件委托

（3）DOM事件流

事件流：是指从页面中接收事件的顺序；

DOM事件流：事件发生时，在元素节点之间按照特定顺序传播的传播过程。

 

三个阶段：

1. 捕获阶段，从最顶层到目标元素 document、html、body、div 逐级向下传播事件；
2. 到达当前目标阶段，目标元素接收事件；
3. 冒泡阶段，从目标元素返回顶层，逐级向上传播事件。

 

如果document或者其他父元素也注册了事件，就会按照捕获或者冒泡阶段的顺序来执行事件处理程序；

JS代码中只能执行捕获或者冒泡其中的一个阶段；

传统onclick等 只能在冒泡阶段；

监听注册方式中，由参数useCapture决定。

 

（5）事件委托（代理、委派）

原理：如果要多个子节点全都要设置事件监听器，就将事件监听器设置在其父节点上，就可以利用事件冒泡原理影响每个子节点。

（触发子节点，事件向上冒泡，就会触发父节点的事件）

 

 

事件对象、鼠标键盘事件

（4）事件对象

它是一系列与事件相关的数据的集合，代表事件的状态，如鼠标点击事件，事件对象就包含了 鼠标坐标 等相关信息；

写在事件处理函数的小括号里，可以看作 形参，function ( event ) {...}；

系统自动存在的，不用创建或者传递参数；

IE9以下不支持，要写成 window.event。

 

常用属性和方法：

都有兼容性问题

属性方法	说明
e.target	返回触发事件的对象元素
e.currentTarget	返回注册事件的对象元素，同 this
e.type	返回事件的类型，如click、mouseover等
e.preventDefault ()	阻止默认事件行为，让链接不跳转或者submit按钮不提交
e.stopPropagation ()	阻止事件冒泡

 

（6）鼠标事件

（了解）

  contextmenu     上下文菜单  ——  主要用于警用鼠标右键菜单，用事件对象的属性 e.preventDefault(); 来禁用；

  selectstart         开始选中     ——   用 e.preventDefault(); 来禁止鼠标选中。

 

鼠标事件对象 MouseEvent：

鼠标事件对象	说明
e.clientX / Y	返回鼠标相对于浏览器窗口可视区的X / Y坐标 （只有数值没有单位）
e.pageX / Y	返回鼠标相对于文档页面的X / Y坐标
e.screenX / Y	返回鼠标相对于电脑屏幕的X / Y坐标

 

（7）键盘事件

键盘事件	触发条件
onkeyup	某个键盘被松开时触发
onkeydown	某个键盘被按下时触发，按下不松开时会一直触发
onkeypress	与onkeypress相同，只是不能识别ctrl、shift、箭头等功能键

keydown 和 keypress 都有时，先执行 keydown，后执行 keypress；

keyup 和 keydown 事件不区分字母的大小写，而 keypress 区分字母大小写。

 

键盘事件对象 KeyboardEvent：

键盘事件对象	说明
e.keyCode	返回触发按键的ASCII码值，可用于判断用户按下了哪个键

 

10.4