js DOM

DOM（Document Object Model——文档对象模型）是用来处理HTML和XML的跨平台API。它允许运行在浏览器中的代码访问文档节点并与之交互。

document对象指代整个文档节点, 它是文档内其他节点的访问入口，提供了操作其他节点的方法。节点可以分为元素节点、文本节点和属性节点。节点之间有层级关系，父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点，同级的子节点被称为同胞（兄弟或姐妹）

JavaScript通过 HTML DOM，可访问 HTML 文档的所有元素。通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。这包括访问页面中的所有 HTML 元素、HTML属性、CSS样式以及对所以事件作出反应。

DOM HTML/CSS

节点获取

要进行DOM操作，首先要获取到需要操作的节点或节点集合，接下来介绍常用的DOM获取方法和属性。

名称	描述
getElementById()	获取带有指定id的节点
getElementsByTagName()	获取带有指定标签名的节点集合
querySelector()	获取指定选择器或选择器组匹配的第一个节点
querySelectorAll()	获取指定选择器或选择器组匹配的所有节点集合

<div class="box" id="container">
    <p class="item" title="111">项目1</p>
    <p class="item">项目2</p>
    <p>项目3</p>
    <input type="text" value="123">
</div>

// 获取id为container的节点
document.getElementById('container')

// 获取所有p元素节点
document.getElementsByTagName('p')
// 使用索引获取节点集合中的某个元素节点
document.getElementsByTagName('p')[0]

// 获取被选择器.box .item匹配的第一个节点
document.querySelector('.box .item')

// 获取被选择器p匹配的所有节点
document.querySelectorAll('p')
// 使用索引获取节点集合中的某个元素节点
document.querySelectorAll('p')[0]

除了函数方法，我们还可以使用属性来获取节点信息，下表介绍了一些获取元素节点信息常用的属性。

名称	描述
innerHTML	返回元素内包含的所有HTML内容（文本和标签），类型为字符串
parentNode	返回指定节点的父节点
children	返回指定元素的子元素节点集合
firstElementChild	返回指定元素的第一个子元素节点
lastElementChild	返回指定元素的最后一个子元素节点

<div class="box" id="container">
    <p class="item" title="111">项目1</p>
    <p class="item">项目2</p>
    <p>项目3</p>
    <input type="text" value="123">
</div>

// 获取第一个类名为item的元素内容
document.querySelector('.box .item').innerHTML

// 获取input元素节点的父节点
document.querySelector('input').parentNode

// 获取类名为box的元素的子节点集合
document.querySelector('.box').children

// 获取p元素的所有子节点的第一个子节点
document.querySelector('p').firstElementChild

还可以获取HTML文档中元素节点的属性，主要有两种方法：

名称	描述
getAttribute()	返回元素一个指定的属性值
直接使用属性名称获取	适用于部分属性（如：title，value，href）

<div class="box" id="container">
    <p class="item" title="111">项目1</p>
    <p class="item">项目2</p>
    <p>项目3</p>
    <input type="text" value="123">
</div>

// 获取input元素的value属性值
document.querySelector('input').getAttribute('value')

// 获取input元素的value属性值
document.querySelector('input').value

节点修改

对HTML DOM的修改主要涉及到节点内容、节点属性值、CSS样式的修改。

名称	描述
innerHTML	innerHTML除了获取元素内容，也可通过赋值用于修改元素中内容。如果修改内容中包含html字符串会被解析成html元素
setAttribute(name,value)	设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性
通过属性名更改属性	对元素属性重新赋值可更改对应属性值

<div class="box" id="container">
    <p class="item" title="111">项目1</p>
    <p class="item">项目2</p>
    <p>项目3</p>
    <input type="text" value="123">
</div>

// 更改为文字
document.querySelector('p').innerHTML = '测试项目' 
// 更改为html内容（p元素中内容替换为span元素）
document.querySelector('p').innerHTML = '<span>测试项目</span>' 

// 更改input的type属性值为button
document.querySelector('input').setAttribute('type', 'button')

// 更改input的type属性值为button
document.querySelector('input').type = 'button'

为了实现网页交互效果，我们经常需要控制DOM的CSS样式，可以通过style属性控制样式，style属性可以设置或返回元素的内联样式。

var box = document.querySelector('div')
// 将元素中文字设置为白色 
box.style.color = "#fff" 
// 将元素左外边距设置为100px 
box.style.marginLeft = "100px" 

节点添加

可以在指定元素节点后面新增元素节点或者文本内容。

名称	描述
createElement(tagName)	创建一个由标签名称tagName指定的HTML元素
appendChild(node)	将一个节点插入到指定父节点的子节点列表的末尾处
insertAdjacentHTML(position, text)	将指定文本解析为HTML字符串，插入到指定位置（IE不友好）

<div class="box" id="container">
    <p class="item" title="111">项目1</p>
    <p class="item">项目2</p>
    <p>项目3</p>
    <input type="text" value="123">
</div>

// 创建一个p元素
newDiv = document.createElement('p')
// 可以直接对创建完的元素进行操作，如：修改元素内文字
newDiv.innerHTML = '我是新元素'
// 添加到 <div> 的最尾部
document.querySelector('div').appendChild(p)

// 将一个新元素 <p> 插入到 <div> 的最尾部
var div =  document.querySelector('div')
div.insertAdjacentHTML('beforeend', '<p></p>')

节点删除

可以删除某一个元素节点及该元素节点的子节点。

名称	描述
removeChild(child)	删除选定的子节点，需要指定其父元素
remove()	删除选定节点（IE不友好）

<div class="box" id="container">
    <p class="item" title="111">项目1</p>
    <p class="item">项目2</p>
    <p>项目3</p>
    <input type="text" value="123">
</div>

// 删除div中的第一个p元素
var parent = document.querySelector('div')
var child = document.querySelector('p')
parent.removeChild(child)

// 删除div中的第一个p元素
var p1 = document.querySelector('p')
p1.remove()

DOM 事件

事件就是用户与浏览器交互的方法，规定了浏览器在什么时刻执行什么事情。比如鼠标单击，双击，键盘输入，页面或图像载入。

事件源要与事件绑定后，才能触发对应事件。下面以鼠标点击事件为例，介绍事件的三种绑定方式。

事件绑定

方式一：行内事件属性赋值

<button onclick="alert('行内事件属性赋值')">点击按钮</button>

方式二：事件属性赋值

var btn = document.querySelector('button');
btn.onclick = function() {
  alert('事件属性赋值')
}

方式三：事件监听
addEventListener(type, listener, useCapture)

参数type为事件类型，参数listener为监听器（处理程序），参数useCapture默认为false，设置为true时，不会因冒泡触发监听器

const btn = document.querySelector('button');
btn.addEventListener('click', function() {
  alert('事件监听')
})

事件类型

HTML 事件主要分为三类：鼠标事件、键盘事件和窗口事件。我们与网页的交互大多是通过鼠标和键盘来触发的，了解并掌握鼠标及键盘事件可以帮助我们实现许多常用的交互效果。

常用鼠标事件如下表所示：

名称	描述
click	单击鼠标左键触发。焦点在按钮并按了Enter键时，也会触发
contextmenu	右键点击（右键菜单显示前触发）
dblclick	双击左键触发
mouseenter	指针移至元素范围内触发一次
mouseleave	指针移出元素范围外触发一次
mouseover	指针移至元素或其子元素内，可能触发多次
mouseout	指针移出元素，或者移至其子元素内，可能触发多次

常用键盘事件如下表所示，使用时注意触发顺序（keydown->keypress->keyup），不同的键盘事件触发时机不同，返回的结果有区别。

名称	描述
keydown	按下任意按键，按住可连续触发
keypress	按下按键（包括字母，文字和Enter）触发，按住可连续触发，不能监听一些特殊按键（ALT、CTRL、SHIFT、ESC、方向键等）
keyup	释放任意按键

使用键盘事件属性可以精确的控制键盘操作，如：回车触发，方向键触发。

名称	描述
keyCode	keyCode属性返回keypress事件触发的键的值的字符代码，或者keydown或keyup事件的键盘代码。字符代码 - 表示ASCII字符的数字。键盘代码 - 表示键盘上真实键的数字
charCode	返回keypress事件触发时按下的字符键的字符Unicode值，用于keydown或keyup时总是返回0
key	返回按键的标识符(字母区分大小写)。keypress，keyup，keydown返回值相同

窗口事件在浏览器窗口发生变化时触发，其中包括窗口大小更改，加载窗口，关闭窗口，窗口滚动等。常用窗口事件如下表所示：

名称	描述
load	当整个页面及所有依赖资源（如样式表和图片）都已完成加载时，将触发load事件
beforeunload	window、document 和它们的资源即将卸载时触发。当事件属性 returnValue 被赋值为非空字符串时，会弹出一个对话框，让用户确认是否离开页面（示例如下）。否则，事件被静默处理。一些浏览器实现仅在框架或内置框架接收到用户手势或交互时才显示对话框
resize	窗口大小改变时触发
scroll	元素内发生滚动时触发