事件及dom节点|青训营笔记

这是我参与第四届青训营笔记创作活动的第八天

本篇文章从以下几个方向学习

• addEventListener()方法的使用
• 事件冒泡与捕获
• dom节点的创建,替换,移除

addEventListener()方法

常用

可以通过该方法添加事件
通过removeEventListener()方法可以移除事件监听

• 语法：element.addEventListener(event, function, useCapture);
• 第一个参数表示事件的类型，第二个表示触发事件后调用的函数，第三个参数是描述事件是捕获还是冒泡
• 使用规则：

1.element.addEventListener("click", myFunction)直接使用函数名 。 2.同一个元素可以绑定多个事件。 3.若需要传递参数，可使用匿名函数

function aFunction(a, b) {
    var result = a * b;
    document.getElementById("demo").innerHTML = result;
}

事件冒泡与事件捕获

• 冒泡：点击之后事件由内向外触发（从点击位置开始）
• 捕获：点击之后事件由外向内触发（从点击位置开始）

第三个参数 true表示冒泡，false表示捕获

dom元素节点

• 尾部创建
• 开始位置创建
• 移出
• 替换

appendChild()创建节点

创建步骤：

<div id="div0">
    <p>第一个</p>
</div>
//创建一个p标签
var get=document.createElement("p")
//创建文本
var text=document.createTextNode("第二个")
//将文本节点添加到新创建的p节点中
get.append(text)
//获取div
var div=document.getElementById("div0");
//将p标签添加到div
div0.appendChild(get)
---------------
//最终结果
<div id="div0">
    <p>第一个</p>
    <p>第二个</p>
</div>

insertBefore()

• 创建方法同appendChild()
• 最终的结果如下

<div id="div0">
    <p>第二个（新）</p>
    <p>第一个（旧）</p>
</div>

#### removeChild()移除
- 方法：
1.获取父元素

var parent = document.getElementById("div1")
2.获取子元素（要移除的元素）

var child = document.getElementById("p1");

3.从父中移出子

parent.removeChild(child);

replaceChild()替换

• 创建一个新的
• 获取旧的
• 替换parent.replaceChild(xin, jiu)

getElementsByTagName()获取集合

//获取p元素集合
var a = document.getElementsByTagName("p");
//显示个数

document.getElementById("p").innerHTML = myCollection.length;