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 - 自定义： 	<p data-num=3 >
js - 取值： 	 	ele.dataset.num

样式

ele.style.width = "120px"

内容

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

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

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

表单

内容

ele.value 

属性 (boolean)

disabled	禁用

checked		复选框 - 选中

selected	下拉框 - 选中

阻止a跳转

1. #
<a href="#" target="_blank">百度</a>

2. 行内式 js 调用 【 伪协议 void(0) 】
 <a href="javascript:void(0)" target="_blank">百度</a>

3. 行内式定义事件执行： return false
<a onclick="return false;" href="http://www.baidu.com" target="_blank">百度</a>

事件

注册

// 点击事件, 移动端 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   固定规则