DOM 定义了访问和操作HTML文档的标准方法
访问（查找标签）
---- 直接查找
document.getElementById(“idname”)
document.getElementsByTagName(“tagname”)
document.getElementsByName(“name”)
document.getElementsByClassName(“name”)
---- 导航属性
NodeElement.parentElement // 父节点标签元素
NodeElement.children // 所有子标签
NodeElement.firstElementChild // 第一个子标签元素
NodeElement.lastElementChild // 最后一个子标签元素
NodeElement.nextElementtSibling // 下一个兄弟标签元素
NodeElement.previousElementSibling // 上一个兄弟标签元素
操作
1 文本操作
取值操作
element.innerHTML (关于标签的操作)
element.innerText （关于文本操作）
赋值操作：
element.innerHTML=""
element.innerText=""
2 属性操作 <div key1=value1 key2=value2>DIV</div>
取属性值： （1）element.getAttribute(属性名) 。
（2）element.属性名 （推荐）
赋值操作： （1）element.setAttribute(属性名，属性值) 。
（2）element.属性名=属性值
关于class属性：
element.classlist.add("class值")
element.classlist.remove("class值")
关于select标签：
ele_select.options.length=0 清空操作
ele_select.selectedIndex 选中option的索引值
关于style属性：实现对标签的css操作
element.style.样式属性="值"
3 节点操作
-----添加标签
生成一个标签：var ele_create=document.createElement("标签名")
// <p></p> <img>
添加标签：
父标签.appendChild(添加标签对象)
insertBefore
-----删除节点：
父标签.removeChild(查找到的标签对象)
-----替换节点：
父标签.replaceChild(newnode,查找到的标签对象)
----- 拷贝一个节点
node.cloneNode(true) //true表示同时拷贝子节点
DOM两种绑定事件方式
方式1
<script>
function foo(self){
alert(123)
// self： <p onclick="foo(this)"></p>
}
</script>
<p onclick="foo(this)"></p>
方式2
一个标签对象.on事件=function(){
alert(456)
// this：绑定事件的标签对象
}
具体事件
点击事件 onclick
获取/失去焦点 onfocus onblur
内容发生变化 onchange (selecte)
onmouse 与鼠标相关的事件
提交事件：onsubmit
加载事件：onload