web Api

元素

获取

document.getElementById('id名')

// 注意 s ; Elements
document.getElementsByClassName('class名')
document.getElementsByTagName('标签名')
document.getElementsByName('name属性的value')

// H5新方法
document.querySelector('#id || .class || 标签名')
document.querySelectorAll('#id || .class || 标签名')

属性

1. 点语法 .
ele.id
ele.name
ele.className

2. key值 []
ele['id']
ele['name']

3. getAttribute 可获取自定义属性
ele.getAttribute('id')
ele.getAttribute('zidingyi')
ele.getAttribute('class')

设置
ele.name = "tag"
ele['name'] = 'tag'
ele.getAttribute('zidingyi'，'666')

4. H5 自定义属性
html - 自定义：

js - 取值： ele.dataset.num

样式

ele.style.width = "120px"

内容

ele.innerHtml
// 无兼容问题 + 标签解析

ele.innerText
// no回车 & 隐藏元素 + 不解析标签

ele.textContent
// 兼容问题 + 不解析标签

表单

内容

ele.value

属性 (boolean)

disabled 禁用

checked 复选框 - 选中

selected 下拉框 - 选中

阻止a跳转

1. #
百度

2. 行内式 js 调用 【 伪协议 void(0) 】
百度

3. 行内式定义事件执行： return false
百度

事件

注册

// 点击事件, 移动端 300秒 延迟
ele.onclick = function(){
// 样式修改
// 内容变化
// Dom操作
// 数据 + 逻辑处理
}

// 鼠标移入
ele.onmouseover || ele.onmouseoenter

// 鼠标移出
ele.onmouseout || ele.onmouseleave

// 获得焦点
ele.onfocus

// 失去焦点
ele.onblur

监听

ele.addEventListener("on",click,function(){
// 数据 + 逻辑处理
})

模块方法

全选、不全选、反选【旗帜思维】

全选：
遍历 + checked = true

不全选：
遍历 + checked = false

反选：
1. 全选按钮 checked = true
2. 遍历子按钮 有不被勾选的 改为 checked = false

点击目标 - 高亮 【排他思维】

在点击时
1. for循环 + 清空所有状态

2. 添加高亮效果

tab栏切换 【类名切换+排他+索引联动】

1. 类名切换
默认类名样式：
display:none // 隐藏
点击添加的类名样式：
display:block // 显示

2. 排他
点击时，清空所有样式 （移除类名）

3. 索引联动
根据 tab栏 自定义索引属性 i，对应展示列表 [i]（添加类名）

节点 node

类型 nodeType

名称 nodeName

值 nodeValue

子节点

childNodes 【ie8 -空文本】

// 获得当前元素的 所有 子节点

ele.childNodes

children 【ie8 +注释文本】

// 获得当前元素下的 子元素 节点

ele.children

// 子元素个数
ele.children.length

firstChild 【ie8 -空文本】

// 获得第一个子节点
ele.firstChild

firstElementChild 【ie8 不支持】

// 获得第一个子元素
ele.firstElementChild

lastChild 【ie8 -空文本】

// 获得第一个子节点
ele.firstChild

lastElementChild 【ie8 不支持】

// 获得第一个子节点
ele.firstChild

同辈节点

nextSibling 【ie8 -空文本】

// 获取下一个节点

ele.nextSibling

nextElementSibling 【ie8 不支持】

// 获取下一个元素节点

ele.nextElementSibling

// 兼容方法

function (){
do{
node = ele.nextSibling
}while(node.nodeType == 1)

return node
}

previousSibling 【ie8 -空文本】

// 获取上一个节点的方法

ele.previousSibling

previousElementSibling 【ie8 不支持】

// 获取上一个元素

ele.previousElementSibling

// 兼容思路同上

父节点 【完美】

// 找到父节点

ele.parentNode

追加 & 拷贝

// 浅拷贝
let newEle = ele.cloneNode()

// 深拷贝
let newELe = ele.cloneNode(true)

// 区别：
是否会拷贝 innerHTML
深： 会
浅： 不会

let newEle = ele.cloneNode(true)

// 追加元素
body.appendChild(newEle)

兼容解决原理

1. 用支持的方法获取元素

2. 对获取元素的 nodeType 进行判断， 是否 == 1
// 元素的 nodeType == 1 固定规则