01_前端JS_DOM和事件

DOM

1.DOM概述:

1.DOM是文档对象模型的缩写,

D:文档—HTML文档或XML文档

O:对象—document对象的属性和方法

M:模型

2.HTML DOM

DOM是将HTML文档表达为数结构,定义了访问和操作HTML文档的标准方法,DOM树:节点(node)的层次,

节点分为: 文档节点,文本节点,元素节点,属性节点

2.获取元素

元素获取的方式

1.通过元素ID

getElementById,返回拥有指定id的第一个元素,如果不存在则返回null;

2.通过标签名字

getElementByTagName,返回一个包括所有给定标签名称的元素集合,如果没有元素就返回一个空集;

3.通过class名字获取

getElementByClassName,返回一个包含指定class名称的元素集合,并在任意元素调用该方法

元素节点的属性操作

• 操作标准属性

​ 元素对象[“属性名”]
​ 元素对象.属性名
​ 元素对象.getAttribute(“属性名”)

• 设置属性值：
  元素对象[”属性名”] = 值
  元素对象.属性名 = 值
  元素对象.setAttribute(“属性名”, 值)

• 操作自定义属性

  获取属性值：
  元素对象.getAttribute(“属性名”)

  设置属性值：
  元素对象.setAttribute(“属性名”, 值)

Node对象的属性和方法

常用的属性:

属性名	描述
firstChild	指向子节点列表中的第一个节点
lastChild	指向子节点列表中的最后一个节点
childNodes	所有子节点的列表
previousSibling	执行前一个兄弟节点,如果这个节点就是第一个,那么值就是null
nextSibling	执行后一个兄弟节点,如果这个节点是最后一个,那么值为null
parentNode	父节点

常用的方法

方法名	描述
hasChildNodes	是否包含子节点
appendChild(node)	将节点添加到子节点列表的末尾
removeChild(node)	从子节点中删除node
replaceChild(newNode,oldNode)	替换子节点
insertBefore(newNode,refNode)	在一个子节点前插入一个新的子节点,在refNode前插入newBefore

2.事件处理

事件驱动编程的核心对象

1.事件源 : 事件主体(指元素和标签)

2.事件名称 : 发出什么样的通知

3.事件响应函数 : 当这个事件发生是,执行什么样的操作

4.事件对象 : 事件发生时,产生一个描述改事件的具体对象,包括具体的参数一起发给响应函数

事件类型:(常用)

鼠标事件及键盘事件及表单事件

事件的绑定方式

元素是不自带条件的,给元素添加功能的时候,需要先给对应元素绑定上对应的事件,然后触发事件,执行绑定好的函数

绑定事件的方式一

1.在元素上使用onXXX属性绑定

xxx事件名称/类型

<input type="butten" value="点我啊" onclick="alert("点我干啥")"/>

这种方式特别简单,缺点是HTML和JS代码交错在一起,不方便维护

2.通过元素对象的事件属性绑定

<!--在该元素被加载完的时候没有绑定事件-->
<input type="button" value="点我啊" id="btn"/>

//使用JS代码为元素绑定事件
var btn = document.getElementById("btn");
btn.onclick = function(){
    alert("点我干啥");
}

这种方式,使得 HTML 和 JS 完全分离开来,便于后期维护, 推荐使用.

注意: 使用这种方式为元素绑定事件, 一定是要在元素被加载后,然后再执行上面的JS代码, 这样才能绑定成功. 试想,一个人都还没出生, 你怎么能让他做事呢?

所以,绑定事件的 JS 代码编写的位置很重要,通常有两种方式

1. 在元素后面编写js代码

   <input type="button" value="点我啊" id="btn"/>
   <script>
       //在input元素被加载后再根据id获取这个元素,可行
   	var btn = document.getElementById("btn");
   	btn.onclick = function(){
       	alert("点我干啥");
   	}
   </script>
   

2. 使用文档加载事件, 在整个html文档加载完成之后再获取元素,绑定事件

   window.onload = function(){
       //这个函数中的代码会在整个文档加载完成之后再执行
       //此时获取元素,可行
   	var btn = document.getElementById("btn");
   	btn.onclick = function(){
       	alert("点我干啥");
   	}
   }
   

3.通过元素对象的方法绑定事件

非IE浏览器和IE9及以上: addEventListener
[Object].addEventListener(“name_of_event”, fnHandler);
name_of_event: 直接使用事件(操作)名称,没有on, 多次添加监听后,触发顺序: 先添加的先执行

​ fnHandler: 事件响应函数

​ [Object].removeEventListener(“name_of_event”, fnHandler);
​ fnHandler : 移除时,传入的"事件响应函数",必须和添加时,传入的是同一个(通过相同标识符引用的那一个函数)
​ 匿名函数,每次创建的都不同

window.onload = function(){
    var btn = document.getElementById("btn");
    // 绑定事件
    btn.addEventListener("click", function(){
        alert("点我干啥?");
    });
    btn.addEventListener("click", function(){
        alert("又来,想si啊!");
    });
}