零基础教学新手必看之JavaScript DOM基础详解

HTML DOM 树

DOM 节点 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

1.整个文档是一个文档节点 2.每个 HTML 元素是元素节点 3.HTML 元素内的文本是文本节点 4.每个 HTML 属性是属性节点 5.注释是注释节点

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

访问 HTML 元素（节点）

您能够以不同的方式来访问 HTML 元素：

• 通过使用 getElementById() 方法

• 通过使用 getElementsByTagName() 方法

• 通过使用H5新增 getElementsByClassName() 方法

• 通过使用H5新增的方法document.querySelectorAll()

• 通过使用H5新增的方法document.querySelector()

特殊节点的获取

• 获取body元素

document.body

• 获取html元素

document.documentElement

改变/获取节点的内容

• innerText 不能识别html标签

• innerHTML 能识别html标签

• value 表单

改变/获取节点的属性值

• href

• src

• title

• alt

表单元素的属性操作

• type

• value

• checked

• selected

• disabled（表单被禁用 true）

修改节点样式属性

• element.style 行内样式

• element.className 类名样式

• ie10 及以上 document.getElementsByClassName('t1').classList.add('t2')

• 全兼容 document.getElementsByClassName('t1')[0].className='t2'

• ie8 及以上 document.getElementsByClassName('t1')[0].setAttribute('class','t2')

通过节点关系获取节点对象

• 父（parent）

• 子（child）

• 同胞（sibling）

父节点拥有子节点，同级的子节点被称为同胞

创建和删除节点

1.创建节点

2.添加节点

3.删除节点

元素注册事件

事件的执行步骤：

• 获取事件源

• 注册事件

• 编写事件处理逻辑

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onkeyup	用户弹起键盘按键
onload	浏览器已完成页面的加载

注册事件的两种方式：

1.element.onclick = function(){}

2.element.addEventListener('click',function(){})

移除事件

1.element.onclick = null

2.select1.removeEventListener('click',fn)

事件的传播方式：

1.捕获阶段 document -> html - >body ->目标节点

2.目标阶段

3.冒泡阶段 目标节点 ->body->html->document