JavaScript（JS）学习笔记 3（DOM简介 事件简介 元素修改 节点操作 事件操作）

JavaScript中的DOM

DOM简介：

• DOM的基本概念：DOM是文档对象模型的缩写，是W3C组织推荐的处理可扩展标记语言（例如HTML和XML）的标准编程接口。
• 文档、元素和节点：一个网页页面就是一个文档，页面中的所有标签都是元素，网页中的所有内容（包括标签、属性、文本、注释等）都是节点。

Console.dir()函数：一个用于输出的函数，使用方法与Console.log函数类似，但是它可以更清晰地输出一个对象中的内容。

DOM获取页面中的元素：

• 通过元素的ID进行获取：首先，在HTML代码中找到需要选择的标签，然后对其ID属性设置一个属性值；接着调用document.getElementById()，在该函数中传入的参数是需要获取的元素的ID属性值。如果该元素存在则返回一个Element对象，该对象中存储了该元素存储的内容的值；如果该元素不存在则返回null。
• 通过元素的标签名进行获取：可以通过getElementsByTagNames()方法获取，传入的参数是一个表示HTML标签名的字符串，返回的是一个页面中所有这些标签名指示的元素对象构成的伪数组。
  • 某个父元素的子标签元素的获取： 首先，先通过一定的方式获取该父元素，然后再使用这个父元素对象的getElementsByTagNames方法获取该父元素的子标签。
• 通过元素的类名进行获取：本方法只有对支持HTML5的浏览器才能使用！使用语法为getElementsByClass()，传入的参数为类名。
• 根据指定选择器获取第一个元素对象：本方法也只有对支持HTML5的浏览器才能使用！使用语法为querySelector("选择器")。需要注意的是该方法只会返回满足条件的第一个元素对象，如果想要获取指定选择器的所有元素对象，则可以类似地使用querySelectorAll()方法。

JavaScript中的事件简介

事件的概念：事件是指可以被JS监测到的行为。只要事件被监测到，就会触发一些响应。

事件的三要素：事件源、事件类型、事件处理程序。

• 事件源：是指事件被触发的对象，例如按钮。
• 事件类型：是指如何出发，或者说是什么事件，例如鼠标点击、鼠标经过、按下键盘等。其中，鼠标点击事件用onclick进行表示。
• 事件处理程序：通过一个函数赋值的方式来完成。

事件响应机制：

• 事件响应机制第一步：获取事件源。通过上面介绍的获取网页中元素的方法来获取事件源，是一个元素对象。
• 事件响应机制第二步：为事件源的指定事件创建响应函数。语法为事件源对象名.事件类型名 = function(参数列表) {函数体}。

JS中常用的事件：

• 鼠标事件：
  • onclick： 鼠标点击左键后触发。
  • onmouseover：鼠标经过时触发。
  • onmouseout：鼠标离开时触发。
  • onfocus：获得鼠标焦点后触发。
  • onblur：失去鼠标焦点后触发。
  • onmousemove：鼠标移动时触发。
  • onmouseup：鼠标弹起时触发。
  • onmousedown：鼠标按下时触发。

JavaScript中的元素修改操作

• 查看和修改元素的内容：
  • element.innerText方法：
    • 作为用于被读取的属性：可以获取一对元素标签中的内容文本，但是会去除HTML标签、空格和换行。
    • 作为可以被修改的属性：可以修改一个网页元素之中的文本，但是需要刷新网页后才能看到效果。这是一个非标准方法，有一些浏览器并不支持。
  • element.innerHTML方法：一种更加常用的方法，也是W3C标准推荐使用的方法。
    • 作为用于被读取的属性：也可以获取一对元素标签中的内容，但是会包含原始的格式，包括HTML标签、空格和换行。
    • 作为可以被修改的属性：类似于innerText方法的使用。
• 修改元素的属性：在JS中通过上面介绍的方法获取了元素对象后，即可直接修改该元素对象的属性值来修改元素的属性。例如，想要把元素A的B属性修改为C，只需要先获取A元素，然后写下A.B = C。
• 修改元素的样式：
  • 通过style属性进行修改：在JS中，可以先获取一个元素对象，然后获取该元素的style属性。接着，可以继续通过和修改属性类似的方式来修改元素的样式。例如，element.style.backgroundColor = "red"。
    • 注意事项：在JS中通过这种方式修改元素样式，新的样式是以权重很高的行内样式的形式新增的，因此可能会覆盖一些低权重的样式设置。
    • 适用情况：适合于样式比较少比较简单的情况，但是不适合对大量的样式进行同时修改。
  • 通过element.className属性进行修改： 首先，需要创建一个CSS样式类；然后，对于需要修改样式的元素，将其className属性修改为该类的名称即可。
    • 适用情况：对于需要修改的样式较多时，这种方式会更见简洁和方便。
    • 注意事项：如果该元素原先有一个类，则通过className属性进行样式修改后，原来的样式类会被覆盖掉。如果想要同时保留原先的样式类（设为class1），同时修改为现在的样式类class2，则需要为该属性赋值为"class1 class2"。
• 查看、修改和移除元素的自定义属性：
  • 元素的两种属性：元素的属性分为两大类，第一类是元素本身自带的属性，例如class、id等等，这些属性可以通过前面介绍的element.属性名的方式进行查看和修改。然而，在很多情况下只使用元素自带的属性是不够的，我们还需要自行为元素创建更多的属性，也就是自定义属性。
    • 自定义属性的优点： 自定义属性可以将一些值直接存放在网页中，从而避免了将所有数据都存放在数据库中，使用起来更加方便。
    • H5中的自定义属性：为了更好地区分元素内置属性和自定义属性，H5中规定自定义属性都已data-开头作为属性名。
  • 查看自定义属性的值：对于自定义属性，如果需要查看该属性的值，则需要通过element.getAttribute()方法进行获取，传入的参数是属性名。另外，H5中也支持使用element.dataset.属性名或element.dataset[属性名]的方式来获取元素的某个自定义属性，但是这个dataset中只会存放所有以data-开头的属性。
  • 修改自定义属性的值：可以通过element.setAttribute()方法来设置某个自定义属性的值。使用语法为：element.setAttribute(属性名, 新设置的值)。这种方式也可以创建一个新的自定义属性。
  • 移除自定义属性：可以通过removeAttribute(自定义属性名)的方式来移除一个元素的自定义属性。

JavaScript中的节点操作

JS中两种获取网页元素的方式：获取元素的操作可以分为两种。一种是利用DOM提供的方法来获取元素，但是这种方法的逻辑性不强且过程繁琐。另一种方式是利用节点的关系来获取元素，这种方式逻辑性很强但是兼容性稍微差一些。

节点概述：网页中的所有内容都是节点，包括文档、标签、标签属性和文本等。在DOM树中的所有节点都可以通过JS进行访问、修改、创建和删除。节点一般包含节点类型（nodeType）、节点名称（nodeName）和节点值（nodeValue）三个基本属性。

• 节点类型：元素节点的类型为1，属性节点的类型为2，文本节点的类型为3。在实际开发过程中，节点操作主要是指对元素节点进行操作。

节点层次：利用DOM树可以把节点划分为不同的层次关系，并由此来更方便地获取网页中的某个元素。

• 父级节点：通过element.parentNode可以获取一个节点的父节点，如果该节点没有父节点则直接返回null。
• 子节点：
  • 获取一个节点的所有子节点：
    • 标准用法：通过element.childNodes可以返回包含指定节点的子节点的集合（包含元素节点和文本节点），该集合是即时更新的集合。由于返回结果中也包含经常不使用的文本节点，需要额外根据nodeType来筛选出元素节点，因此这种获取子节点的方式不推荐。
    • 非标准用法：通过element.children属性来获取一个元素的子元素节点。该属性是一个只读属性，只返回一个节点的子节点中的元素节点。虽然这不是一个标准，但是得到了各个浏览器的支持，因此可以放心使用，并且要重点掌握。
  • 获取一个节点的第一个/最后一个子节点：可以分别通过element.firstChild和element.lastChild获取该元素的第一个和最后一个子节点，但是这种方式也不会绕过文本节点。对于只想要获得元素节点的情况，可以分别使用element.firstElementChild和element.lastElementChild获取第一个和最后一个元素子节点（但是这两个属性只有IE9以上才支持）。综合考虑到方便性和兼容性，实际开发过程中，最常直接使用chilren数组的第一个元素和最后一个元素来获取节点的第一个或最后一个元素节点。
• 兄弟节点：实际开发中使用兄弟节点的情况较少。
  • 可以通过分别通过nextSibling和previousSibling来分别获取当前元素的下一个兄弟节点，如果不存在则返回null，这两个属性同样没有过滤掉非元素节点。
  • 如果需要获取当前节点的下一个和上一个元素节点，则可以分别通过nextElementSibling和previousElementSibling属性进行获取，但是这两个属性也只有IE9以上的浏览器才可以支持。
  • 目前针对兼容性的问题还没有很好的解决方法，只能通过单独的节点类型判断（即通过nodeType）才能在保证兼容性的情况下获取兄弟元素节点。

创建和添加节点：

• 创建节点：使用document.createElement('tagName')方法可以创建由tagName指定标签类型的HTML元素，因为这些元素原先不存在，因此也把这种方式称为动态创建元素节点。
  • 和innerHTML的效率比较：无论对于什么浏览器，如果innerHTML方法不拼接字符串，而是采用join方法合并数组的方式进行连接，则对于创建多个元素的场景具有更高的效率，但是结构较为复杂；createElement方法创建元素的效率低一些，但是结构更加清晰。
• 添加节点：只创建一个节点无法将其置入到网页中进行显示，还需要进行节点添加。
  • 第一种方法：node.appendChild(child)方法可以将一个节点添加到指定父节点的子节点列表的末尾。这个方法非常常用。
  • 第二种方法：node.insertBefore(child，指定元素)的方法可以将一个节点添加到父节点的指定子节点的前面。

删除节点：可以通过node.removeChild()函数来删除一个节点的某个子节点，传入的参数是需要删除的节点对象，并且将该对象返回。

复制节点：可以通过被复制的节点对象.cloneNode()方法来返回一个节点的副本，即实现一个节点的复制。

• 注意事项：
  • 方法的参数：如果该方法中的参数为空或者false，则表示该复制是一次浅复制，不会复制该节点中的子节点。只有括号中的参数为true，才表示深复制，即复制节点及节点中的内容。
  • 添加节点：在复制好一个节点后，还需要找到另外一个节点，将复制的节点添加到另一个节点的子节点列表中（例如使用上面介绍的appendChild方法）。

JavaScript中的事件操作

注册事件：

• 基本概念：给元素添加事件，被称为注册事件，也被称为绑定事件。
• 两种方法：分为传统方式和方法监听注册方式。
  • 传统方式：注册事件具有唯一性。也就是说，同一个元素的同一个事件只能设置唯一一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。这里的很多事件都带了on。
  • 监听方式：该方式是W3C标准推荐的方式，但是在IE9之前不支持。这种方式下同一个元素对同一个事件可以注册多个监听器（监听处理函数），这些监听器会按照注册的顺序依次执行。

添加事件监听：可以使用addEventLsitener来添加事件监听。

• 使用语法：eventTarget.addEventListener (type, listener [, useCapter])。
• 语法解释：
  • type：事件类型字符串，比如click、mouseover等。这里的事件类型都没有带on。
  • listener：事件处理函数，事件发生时会自动调用该监听函数。
  • useCapture：可选参数，是一个布尔值，在后续过程中会进行学习。

删除事件：

• 对于传统方式：将某个元素的事件绑定的函数设置为null即可。
• 对于监听方式：对指定的元素调用removeEventListener()方法。该方法传入两个参数，第一个参数是事件的名称字符串，第二个参数是该事件绑定的监听器名称，但是无须用字符串表示。可以看出，对于监听方式，添加和删除监听方式的语法除了方法名称不同，其他的语法都是完全相同的。

DOM事件流：

• 基本概念：事件流是指页面中接受事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。
• 事件的冒泡：由IE最早提出。这是指如果触发了一个事件，则该事件开始由最具体的元素接收，然后逐级向上传播到DOM的最顶层。冒泡是一种从下往上的传播过程，在传播过程中经过的元素如果对该事件设置了监听器，则会执行其对应的监听处理函数的内容。
• 事件的捕获：由网景公司最早提出。这是指从DOM最顶层节点开始，逐级向下传播到最具体的元素接收的过程。捕获是一种从上往下的传播过程。
• JS代码中的实现：JS代码只能执行捕获或冒泡中的一个阶段。对于传统方式的事件机制，只能得到冒泡阶段。对于监听方式的事件机制，在添加事件时，如果将useCapture属性赋值为true，则表示处于捕获阶段；如果赋值为false或者省略，则表示处于冒泡阶段。
• 注意事项：
  • 实际开发中往往都是采用事件冒泡的方式而不采用捕获方式。
  • 有些事件不存在冒泡，例如onblur、onfocus等等。
  • 冒泡有时会带来麻烦，但是有时又会带来意想不到的好处。

事件对象：

• 基本概念：事件对象只有事件存在才能存在，是事件有关的一系列数据的集合，例如绑定事件的对象等等。可以作为参数传入事件监听程序的参数列表中。
• 创建和使用方式：默认情况下它是系统创建的，因此我们不需要手动传参。但是，如果我们需要使用事件对象中的数据，则需要显式地进行传参。
• 手动命名：我们可以手动对传入事件监听处理函数的事件对象命名，通常命名为e。
• 注意事项：在IE6到IE8中，浏览器不会给方法传递参数，因此事件对象不适用。
• 常用属性和方法：
  • e.target：返回触发事件的对象。该方法是一个标准方法。需要注意，该属性需要与this对象进行区分，
  • e.srcElement：和e.target等效，但是不是一个标准方法，适用于ie6到ie8的浏览器。
  • e.type：返回事件的类型，例如click、mouseover等，这些事件类型都不带on。
  • e.preventDefault()：该方法会组织默认事件（默认行为），是一个标准方法，例如不让链接跳转。该方法对于低版本的IE浏览器不适用。
  • e.stopPropagation()：可以阻止事件的冒泡。这种方法也不支持低版本的浏览器。

事件委托：

• 其他名称：也被成为事件代理，在jQuery中被称为事件委派。
• 基本原理：不是给每一个子节点都设置事件监听器，而是将事件监听器设置在其父节点上，然后利用冒泡原理影响该父节点的每个子节点。
• 使用优点：只需要操作一次DOM，提高了程序的性能。

鼠标事件：

• 禁止鼠标右键菜单：

  • 基本功能：可以禁止用户选定一段文本后，对其中的内容进行复制等操作。
  • 使用语法：对于整个文档绑定鼠标上下文菜单事件（contextmenu）的监听器，监听器中写入e.preventDeFault()即可。

• 禁止被鼠标选中：

  • 基本功能：不让某个区域中的内容被鼠标选中。（如果还是想要选中然后复制内容，则可以通过浏览器的F12键打开检查进行复制）。
  • 使用语法：对于整个文档绑定鼠标选中事件（selectstart）的监听器，监听器中写入e.preventDefault()即可。

• 鼠标事件对象：event对象代表事件的状态，以及与事件相关的一系列信息的集合。现阶段主要学习的事件对象是鼠标事件对象和键盘事件对象。

  • 常用的鼠标事件对象：
    • mousemove：鼠标只要移动超过1px就会触发该事件。
  • 鼠标事件对象中的重要属性：
    • e.clientX或e.clientY：返回鼠标相对于浏览器窗口可视区的X坐标或Y坐标。无论页面是否通过滚轮拖动，坐标都不变。
    • e.pageX或e.pageY：返回鼠标相对于文档页面的X坐标或Y坐标（IE9以上的浏览器才支持）。这是一种最常用的方法。
    • e.screenX或e.screenY：返回鼠标相对于电脑屏幕的X坐标或Y坐标，这个方法使用较少。

键盘事件：

• 常用键盘事件：

  • keyup：某个键盘按键被松开时触发。
  • keydown：某个键盘按键被按下时触发。
  • keypress：某个键盘按键被按下时触发，但是不会识别功能键（例如Ctrl Shift等）。
    • 上述三个事件的触发顺序：先触发keydown，再触发keypress，最后触发keyup。
    • 如果采用传统方式，则上述的三个事件对象的名称都要再前面加上前缀on。

• 键盘事件的常用属性：

  • 获取按下或松开的是哪一个键：通过键盘事件的key属性可以知道按下或松开的键的ASCII码值，由此来判定按下的是哪一个键。keyup和keydown对象的该属性不区分字母的大小写，如果需要区分大小写，则键盘事件应该使用keypress。

同系列其他文章

• JavaScript（JS）学习笔记 1（简单介绍 注释和输入输出语句 变量 数据类型 运算符 流程控制 数组）
• JavaScript（JS）学习笔记 2（函数 作用域 预解析 对象 内置对象 简单数据类型和复杂数据类型）