查找标签：
直接查找 ：
- document.getElementById('id'值)； // 返回值一定是标签对象
- document.getElementsByClass('c1');//返回的是标签对象集合
- document.getElementsByTagName('标签名') //根据标签名获得标签集合
- document.getElementsByName; //根据name属性获取一个标签集合
导航查找：（依据某个标签定位其它标签）
- element.parentElement //父节点标签元素
- element.children //所有子标签
- element.firstElementChild //第一个子标签元素
- element.lastElementChild //最后一个子标签元素
- element.nextElementSibling //下一个兄弟标签元素
- element.previousElementSibling//上一个兄弟标签元素
标签操作：
文本操作：
取值操作
console.log(ele_p.innerText); 文本 hello
console.log(ele_p.innerHTML); 标签文档 <a herf=''>hello</a>
赋值操作
ele_p.innerText='google';
ele_p.innerHTML='<a href=''>google</a>
属性操作
原生JS方式：
element.setAttribute(name,value)
element.getAttribute(属性名)
DHTML的简化方式：
element.属性名
element.属性名=’值‘
class操作：
<p class='c1 c2'>yuan</p>
className
element.classList.add() //添加
element.classList.remove() //删除
css 样式操作：
element.style.css属性=值
value 值 ：
element.value
input textarea select
节点操作：
- 创建节点： document.createElement(标签名称）
var ele=document.createElement('input')
- 添加节点：父节点.appendChild(子节点)
- 删除节点：父节点.removeChild(子节点)
- 替换节点: 父节点.replaceChild(新节点，替换节点)
- 拷贝节点：element.cloneNode(true)
事件绑定：
- <div onclick='foo(this)'>DIV</div>
function foo(self){
self //事件触发标签
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p onclick="foo(this)">hello</p>
<script>
function foo(self){
alert(self.innerHTML)
}
</script>
</body>
</html>
2.标签对象.on事件=function(){
this //事件触发标签
}
for (var i=o;i<eles.length;i++){
eles[i].onclick=function(){}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="p1">hello</p>
<ul>
<li class="item">111</li>
<li class="item">222</li>
<li class="item">333</li>
</ul>
<script>
var ele_p=document.getElementById('p1');
ele_p.onclick=function(){
// alert(123)
console.log(this) //打印的标签
}
JS事件：
操作系统： 对下管理所有的硬件 对上提供接口
event对象：保存的是与这次触发事件相关的具体信息
事件委派：
作用域链：
