Dom操作：文档对象模型
作用：
** 1、动态操作html元素节点（写特效）**
2、动态元素的样式
3、节点操作
动态操作html元素节点元素（element):
节点的样式操作:
增
删
改
查：读、获取（遍历）
如何获取当前需要操作的元素节点：
Dom tree(dom树)：root element（html）
document.write（）
document（当前文档的根节点）
节点本质：（组成当前文档的html里面的每一个标签）
节点对象：某一个标签
获取元素的方法：
document.getElementById() : 通过id属性获取元素（有且只有一个）
document.getElementsByClassName() : [ ] classname（可以有多个类名）
document.getElementsByName() : [ ] name 属性 使用场景（表单）
document.getElementsByTagName() :[ ] 标签名
document.querySlector(selector) : 通过选择器来匹配元素（有且只匹配一个）
document.querySlectorAll(selector) : 批量匹配
操作元素的属性（html）
方式1：
·获取元素的属性：元素节点.属性【console.log（imgEles.width）】
设置属性：imgEles.属性（width） =''值”
删除属性：imgEles.属性 = " 空 "
方式2：
获取属性：imgEles.getAttribute("src")
设置属性：imgEles.setAttribute("属性"，"修改属性的值")
删除属性：imgEles.removeAttuibute(属性)
操作元素的样式属性（css样式）
js只能操作css的内联样式属性
style属性（元素的内联样式）
设置样式：imgEles.style.css样式属性="值"
获取样式：imgEles.style.css样式（style="")
注意：在js中，设置css属性带杠（-）的属性需要写成小驼峰形式
给元素增加属性
1、ele.className="name"
2、ele.id="value"
3、ele.dataItem="xxx"
元素节点操作：
1、document.createElement(tagName) //节点对象（空标签）
2、document.createTextNode = "value" //创建一个字符串（string） | 文本节点
3、ele.cloneNode(ele) //复制一个节点 节点对象
4、father.appendChild(son) //追加子节点
5、father.insertBefore(son,son1) // 把son1节点追加到son节点后面
6、father.removeChild(son) 删除某一个元素里面的子节点
7、father.replaceChlid( son,son1 ) //把某一个元素里面的son节点替换成son1节点
8、ele.remove(); //移除元素自身节点
9、ele.cloneNode( true|flase ) //复制节点
节点的属性：
1、ele.nodeName //节点名称（div）|（只读）
2、ele.nodeValue //节点的值
3、ele.nodeType //节点的类型 （只读）
4、father.children //获取当前元素的所有子节点
5、ele.fatherNode //获取一个元素的父节点
6、ele.nextSibling //获取元素的下一个兄弟元素
7、ele.previousSibling //获取元素的上一个兄弟元素
8、father.firstChild //获取某个元素的第一个子节点
9、father.lastChlid //获取某个元素的最后一个子节点
设置元素的内容：
1、设置元素的内容：ele.innerText = '值' （只能是双标签）
2、设置元素的内容：ele.innerHtml = '值' （设置html）
3、(1)元素属性添加：ele.id
(2)元素属性添加：ele.calssName
js事件：
事件对象：event（关键字）
e.preventDefaule():阻止标签的默认行为
e.target 触发的元素节点
1、性质：客户端的某个动作行为的瞬间
2、鼠标事件：
鼠标点击：onclick
鼠标双击：ondbclick
鼠标移入：onmouseover
onmouseenter:
鼠标移出：onmouseout
onmouseenter
鼠标右键：oncontextmenu
3、键盘事件：
按键按下：onkeydown
按键抬起：onkeyup
按下+抬起：onkeypress
4、表单事件：
焦点事件：（1）获取焦点：onfocus
（2）失去焦点：onblur
内容变更事件：onchage
表单验证事件：<form onsubmit="return fn() " > </form>
5、滚动条事件：window.onscroll=function(){
}
6、移动端事件（touch）：
7、页面加载完毕：
window.onload= function(){
}
8、鼠标滚轮事件：
window.onwheel = function(){
}
9、拖拽事件：
10、流媒体事件：
11、屏幕分辨率变更事件：
js事件的绑定：
性质：捕获客户端的动作行为
绑定事件的方式：
1、通过事件的属性来绑定
<div onclick='fn()'></div>
2、节点动态属性绑定
ele.onclick = function(){
}
ele.onclick = fn
3、给元素添加事件监听的方式
ele.addEventListenaer("类型"，方法体，[触发])
ele.addEventListenaer（""）
js事件场景：以冒泡的方式触发（事件嵌套）
阻止超链接的默认行为：
<a href="javascript:vaild(0) id=btn">规划设计<>
<a href="javascript:;id=btn">
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
