DOM

获取元素

document.getElementById('id')
// 参数为元素id 大小写敏感的字符串
// 返回的是一个元素对象

document.getElementsByTagName('tagName')
// 参数为元素标签名 大小写敏感的字符串
// 返回的是一个HTML集合 HTMLCollection

document.getElementsByClassName('className')
// 参数为元素类名 大小写敏感的字符串
// 返回的是一个HTML集合 HTMLCollection

document.querySelector('选择器')
// 返回指定选择器的第一个对象
// 选择器需要加符号 类名. id#

document.querySelectorAll('选择器')
// 返回指定选择器的所有元素对象集合
// 选择器需要加符号 类名. id#

document.body
// 获取body

document.documentElement
// 获取HTML

事件基础

// 事件三要素: 事件源 事件类型 事件处理程序
<button id="btn">按钮</button>

var btn = document.getElementById('btn')
btn.onclick = function(e){
    console.log(e)
}

改变元素内容

// 从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
// 不识别HTML标签
// 可读写
element.innerText

// 起始位置到终止位置的全部内容，但包括html标签，同时保留空格和换行
// 识别HTML标签
// 可读写
element.innerHTML

常用元素属性操作

// src/href title
var img = document.querySelector('img')
img.src = 'xxx'

// value disabled checked selected
var input = document.querySelector('input')
input.value = 'xxx'

this

// this指向事件函数调用者
var btn = document.querySelector('button')
btn.onclick = function (){
    console.log(this === btn) // true
}

样式属性操作

// js样式采用驼峰命名法
// js修改style样式操作 产生的式行内样式 css权重比较高
// 使用样式较少 或者功能简单的情况下使用

var div = document.querySelector('div')
div.onclick = function (){
    this.style.backgroundColor = 'black'
}

// className 类名
// 会直接更改元素类名，会覆盖原先的类名
// 样式较多 或者功能复杂
div.onclick = function (){
    this.className = 'black'
}

.black{
    background-color: black;
}

获取属性值

// element.属性
// 获取元素自带属性

// element.getAttribute('属性')
// 获取自定义属性

设置属性值

// element.属性 = value

// element.setAttribute('属性',value)

// h5设置自定义属性
<div data-index='1'></div>

// h5获取自定义属性
// dataset是一个集合，里面存放了所有以data开头的自定义属性
div.dataset.index

// 如果自定义属性里面有多个-链接的单词，获取时采用驼峰命名法
<div data-list-name='xxx' />
div.dataset.listName

移除属性值

// element.removeAttribute('属性')

节点操作

// 元素节点 1 
// 属性节点 2
// 文本节点 3 包括文字、空格、换行

// 父级节点
element.parentNode

// 子节点 包含元素节点、文本节点
element.childNodes

// 子元素节点
element.children

// 第一个子节点
element.firstChild

// 第一个子元素节点
element.firstElementChild

// 最后一个子节点
element.lastChild

// 最后一个子元素节点
element.lastElementChild

// 上一个兄弟节点
element.previousSlibing

// 上一个兄弟元素节点
element.previousElementSlibing

// 下一个兄弟节点
element.nextSlibing

// 下一个兄弟元素节点
element.nextElementSlibing

// 创建节点
document.createElement('li')

// 添加/追加节点
node.appendChild(child)

// 插入父元素下某个子元素之前
node.insertBefore(child, node)

// 删除节点
node.removeChild(child)

// 复制节点
// 括号参数为空或者false 只克隆复制节点本身 不克隆里面的子节点
// true 复制标签并复制内容
node.cloneNode()

阻止a链接点击事件 url添加#

<a href='javascript:;' />

三种动态创建元素的区别

// 直接将内容写入页面的内容，文档流执行完毕，会导致页面重绘
document.write()

// 将内容写入某个dom节点，不会导致页面重绘
// 创建多个元素效率更高（不要拼接字符串，采用数组形式拼接），结构稍微复杂
element.innerHTML

// 创建多个元素效率低一点，但是结构更清晰
document.createElement()

事件高级

// 监听注册事件
// type 事件类型字符串 不用on
// listener 事件处理函数，事件发生触发
// useCapture 可选参数，默认false
// true 处于捕获阶段 false 处于冒泡阶段
eventTarget.addEventListener(type, listener, useCapture)

// 删除事件 解绑事件
element.onclick = function (){
    element.onclick = null;
} 

// type 移除的事件类型字符串
// listener 从目标事件移除的函数
eventTarget.removeEventListener(type, listener[, useCapture])

btn.addEventListener('click', fn)
function fn(){ ...}
btn.removeEventListener('click',fn)

// 手动调用点击事件
element.click()

// DOM事件流
// 捕获阶段 当前目标阶段 冒泡阶段
// 事件冒泡 事件开始时由最具体的元素接收，
// 然后逐级向上传播到DOM最顶层节点的过程
// 事件捕获 由DOM最顶层节点开始，
// 然后逐级向下传播到最具体的元素接收的过程

--------------------------------
捕↓ (-------document-------) ↑冒
获↓    (-----html-----)      ↑泡
阶↓      (---body---)        ↑阶
段↓        (-div-)           ↑段
---------出于当前阶段------------

// 事件对象
var btn = document.querySelector('button')
btn.onclick = function (event) {
   event = event || window.event // ie兼容性处理
   // event事件对象
   // 系统创建的，包含事件一系列相关数据的集合
}

// event.target 返回的是触发事件的元素对象
// ie兼容性
var target = event.target || event.srcElement
// this 返回的是绑定事件的对象

// 事件类型
event.type 

// 阻止默认行为
event.preventDefault()
// ie兼容性
event.returnValue

// 阻止事件冒泡
event.stopPropagation()
// 不含事件对象
window.event.cancelBubble = true

// 事件委托
// 不给每个子节点单独设置事件监听器，
// 而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点
// 可以对未来创建的子元素动态添加事件 

// 鼠标事件
// 禁止鼠标右键菜单
// contextmenu主要控制应该何时显示上下文菜单，
// 主要用于取消默认上下文菜单
document.addEventListener('click' ,function (e){
    e.preventDefault();
})

// 禁止选中文字
// selectstart

// 鼠标事件对象
e.clientX / e.clientY
// 鼠标在可视区的x和y坐标
e.pageX / e.pageY
// 鼠标在页面文档的x和y坐标

// 键盘事件
// keydown keyup keypress(不识别ctrl/shift功能键)
// 执行顺序 keydown => keypress => keyup
// event.keyCode 按键ASCLL码值