一、DOM概述

1.DOM

• DOM 是 Document Object Model 文档对象模型的缩写。根据 W3C DOM 规范，DOM 是一种与浏览
  器，平台，语言无关的接口，可动态地修改 XML 和 HTML。

2.HTML DOM

• DOM 是将 HTML 文档表达为树结构， 定义了访问和操作 HTML 文档的标准方法； DOM 树：节点
  （node）的层次。文档节点（document）、元素节点、属性节点、文本节点； DOM 把一个文档表示
  为一棵家谱树（父，子，兄弟）。

  
  DOM树结构

二、 获取元素

• getElementById() 方法返回带有指定 ID 的元素
• getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表
• getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
• getElementsByName() 方法可返回带有指定名称的对象的集合。

三、 DOM创建节点

• createTextNode('文本') ： 创建文本节点。
• createElement('元素名') : 创建元素节点。

四、 DOM元素对象方法

• 父元素节点.appendChild() : 为元素添加一个新的子元素
• 父元素节点.childNodes : 返回元素的一个子节点的数组
• 父元素节点.firstChild : 返回元素的第一个子节点
• 父元素节点.lastChild ： 返回的最后一个子节点
• 父元素节点.replaceChild(newnode,oldnode) : 将某个子节点替换为另一个
• 父元素节点.removeChild(删除的子节点变量)；

• 父元素节点.hasChildNodes() ：是否包含子节点

  
  DOM节点
• node.attributes : 返回一个元素的属性数组
• node.removeAttribute() : 从元素中删除指定的属性
• node.innerHTML 设置或者返回元素的内容。 例子：innerHTML =“<h1>我是h1标签</h1>” //会解析标签
• node.innerText 设置或者返回元素的内容。//不会解析内容
• node.setAttribute('属性名称','属性值') 创建或改变某个新属性。
• node.style.样式 = '样式值'
• node.getAttribute("属性名")获取属性值
• node.inserBefore(要插入的节点对象 , 要添加新的节点前的子节点。)​

五、 event事件

1.事件驱动编程的核心对象

1. 事件源
   谁发出事件通知，发出消息；也就是事件主体（通常指元素和标签）；
2. 事件名称
   发出什么样的通知的名称，比如鼠标到我头上了，我被别人点了一下；
3. 事件响应函数
   谁对这个这个事件感兴趣，当这个事件发生时要执行什么样的操作；
4. 事件对象
   一般来说，当事件发生时，会产生一个描述该事件的具体对象，包括具体的参数等一起发给响应函
   数，好让他们通过事件对象来了解事件更加详细的信息

<!--
p元素是事件源
click是事件名称
-->
<p style="color: red" id="p1" onclick="shout();">Hello world!</p>
<script>
//响应函数
function shout(e){//响应函数，监听函数
   alert(e.clientX);//e事件对象
}
</script>

2.绑定事件:

方式一：
        内联绑定事件
           < div onclick="onc()">事件< /div>
该方式特别简单,但是缺点是HTML和JS交错在一起,维护性差.
------------------------------
方式二： 
       匿名函数function(){}绑定事件
            div2.onclick = function(){  console.log('这是div2!');  }

这种方式,使得HTML和JS完全分离开来,便于后期维护, 推荐使用.
注意:使用这种方式为元素绑定事件, 一定是要在元素被加载后,然后再执行上面的JS代码, 这样才能绑定
成功. 试想,一个人都还没出生, 你怎么能让他做事呢?
要解决这个问题：
1.在元素后面编写js代码
2.使用文档加载事件
window.onload = function(){...}
------------------------------
方式三： 
       addEventListener('事件'，函数 ,是否为捕获阶段【true/false】); 
           ​它的第二个参数是一个函数(绑定事件)，‘事件’事件名去掉on

3.鼠标事件

• onclick单击事件
• ondblclick双击事件 -------------- div2.ondblclick = function(){}
• onmouseover鼠标移入
• onmouseout鼠标移出

4.键盘事件

• onkeydown键盘按下

 text1.onkeydown = function(e){
    if(e.key == 'Enter'){   
        console.log('回车了！');
    }
        console.log(e);
}

• onkeypress 某个键盘按键被按下并松开
• onkeyup 某个键盘按键被松开

6.表单事件

• onblur 元素失去焦点时触发
• onchange 该事件在表单元素的内容改变时触发
• onfocus 元素获取焦点时触发
• onsubmit 表单提交时触发