1 Dom树,Dom节点和Dom对象

  1. DOM树
  2. DOM节点
  3. DOM 对象 
  4.    1. 全称Document object Model,中文名称对象模型
  5.    2.作用:用来的元素节点进行操作,比如修饰元素节点的内容,修改元素节点的样式

2 Dom节点操作(增删改查)

1.获取DOM节点

  1. document.getElementById('xxxx');// 根据id来获取dom节点,xxx是id名.id是惟一的
  2. document.querySelector('xxx');//根据选择器来获取dom 节点(只能获取一个),xxx可以是任何选择器
  3. document.querySelectorAll();//根据选择器来获取dom节点(获取前部),xxx可以是任何值
  5. dir(xxx)可以在控制台查看对象属性

2.获取DOM节点的属性和样式

  1. 获取属性-见demo
  2. 获取样式-见demo

3.获取dom节点的内容

  1. innerHTML 获取内容连同元素节点
  2. inner Text 只获取文本内容

3.1添加节点

  1. 创建节点和插入节点
  2. 通过点击事件插入节点

3.2删除节点

  1. remove()

3.3修饰节点(内容,样式,属性)

  1. -修饰内容 节点.innerHTML=xxx; innerText=xxx;
  2. -修饰样式 节点.style.xxx=xxx; // style是行内样式
  3. -修饰属性 节点.属性名=xxx;

3.事件绑定

1.普通事件绑定(DOM 一级)

  1. :onxxx
  2. :xxx.click

2.高级事件绑定(DOM 二级)addEventListener

dom一级事件绑定和dom二级事件绑定区别: 同类型事件, 前者绑定多次, 只会执行一次, 后者可以执行多次

3.使用js触发事件

4.事件常见类型

onchange HTML元素改变
onclick 用户点击html元素
onmouseover 用户一个html元素上移动鼠标
onmouseout 用户一个html元素上移开鼠标
onkeydown 用户按下键盘按键
onkeyup 用户松开键盘按键
onload 浏览器已完成页面的加载
oninput 键盘输入事件
touchStart 触摸开始
touchMove 滑动
touchEnd 触摸结束

5.事件对象

  1. event对象:每个事件被触发时,都会产生一个event对象
  2. target和currentTarger
  3.    .target表示被触发的元素(比如:点击事件就是被点击的元素)
  4.    .currentTarget是事件绑定的元素

6.事件冒泡和事件捕获

1.事件流(事件的传播)

  1.  1. 事件捕获阶段
  2.  2. 目标阶段
  3.  3. 事件冒泡阶段

2.事件冒泡应用:事件委托(托管)