DOM（节点树）

DOM基础入门

1什么是对象

• 对象是一组属性，方法和事件的集合体同时也是他们的拥有者
• 在js里面一切皆对象

2 什么是DOM

• document object model（文档对象类型）
• 认识节点树
• 网页文档在浏览器上进行加载解析的时候回自动转化为一个树状模型
• DOM发展史

图片1.png

3 getElementById

• 通过getElementById来获取html的元素并进行样式和属性的修改
• 如果页面上没有发现匹配的值，那么会返回null(空对象)
• 区分大小写
• 多个单词可以直接连在一起写（小驼峰命名法）
• 同一个页面不能出现相同的ID(如果使用，会先加载最先访问到的ID元素)
• id在标准浏览器下区分大小写，但是在IE低版本浏览器里面不会区分大小写
• 在低版本的IE浏览器中 form表单里面name会被当做属性，所以表单元素name和ID最好不要相同

4 访问和更改元素的属性

• 通过点语法来修改属性
• 元素对象.属性
• 在访问和修改class的时候要注意,需要使用className,因为在js中class是保留字
• for在js中是循环，在label中时又是html中的一个属性，在使用js来修改label中的for的属性时，需要用htmlFor,

5 获取和更改元素的样式

• 通过style属性对元素的样式进行修改(这种方式只能访问行内样式)
• 当属性里面有-的时候 可以才用小驼峰命名（后面直接大写）

6 getElementsByTagName

• getElementsByTagName():获取到的是一个数组
• 就算只有一个元素他们都有下标索引值

7 元素获取的兼容性

• 全栈浏览器能兼容的基本获取方式就ID和tagName两种
• 网页中的任何元素后面依然可以跟上.getElementsByTagName
• ID的对象只能是document

事件入门

1 什么是事件？

• js号称事件驱动语言
• 和生活中的事件发生是一个概念

2 事件三要素

• 事件源
• 事件类型(type)
• 事件处理函数(监听器)

3 事件类型

• 鼠标事件
  1 click 鼠标单击事件
  2 dbclick 鼠标双击事件
  3 mouseover 鼠标移上事件
  4 mouseout 鼠标离开事件
  5 mousedown 鼠标按下事件
  6 mouseup 鼠标抬起事件
  7 鼠标事件类型里面都是小写

• 焦点事件
  1 focus 获取焦点（两种方式可以获取光标）
  2 blur 失去焦点

• 键盘事件
  1 keydown 键盘按键按下的时候(键盘上所有的键都会触发事件)
  2 keypress 键盘按键被按下的时候(键盘上除了功能键和方向键，其他都起作用)
  3 keyup 键盘按钮松开时候
  4 他们的事件源可以是网页中的某个具体的元素

• 表单事件
  1 submit 表单被提交的时候
  2 reset 表单被重置的时候
  3 change 表单里面的值发生改变的时候会被触发
  4 change 的事件源可以是input ，textarea，和select
  5 submit和reset的事件源只能是form

• UI事件
  1 load 网页加载完毕（js入口函数）
  2 unload网页卸载的时候
  3 beforeunload当网页卸载前
  4 resize 网页窗口大小发生改变的时候
  5 scroll 鼠标滚动的时候
  6 select当文本框或者文本域被选中的时候

4 事件中的this

• 是指当前的事件源，可以简化我们的程序
• 可以称为排他思想
• 对象中的自定义属性

5 事件对象
6 事件的绑定方式
7 事件流及事件传播
8 阻止默认事件

DOM深入学习

元素的常见操作

• 创建元素
• 删除元素
• 获取元素
• 复制元素
• 替换元素

1 创建元素
2 删除元素

• 语法：父节点.removeChild（要删除的节点）
• 在工作中经常写为：要删除的节点.parentNode.removeChild(要删除的节点)
  3 获取元素（DOM0级下获取元素的方法和属性）
• document.title：网页标题的获取
• document.body：网页主体的获取
• document.documentElement：网页中的跟标签
• document.forms["表单值"].对应的表单属性值
  4 复制节点
• 语法：要复制的节点.colneNode(布尔值)默认的是false
• 节点复制又分为浅复制和深度复制
• 浅复制（只复制元素的指定节点）默认情况下的下就是浅复制
• 深复制（会把元素中的所有节点都进行复制）布尔值改为true