本文目录：
- 1.获取元素
- 2.动态创建元素
- 3.对元素进行操作(属性、样式及节点遍历)
- 4.事件(什么时机做相应的操作)
1.获取元素
1.1.根据id获取元素
var div = document.getElementById('main');
1.2.根据标签名获取元素
var divs = document.getElementsByTagName('div');------>获取到的是一个伪数组，需要进行遍历。
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
console.log(div);
}
1.3.根据name获取元素
var inputs = document.getElementsByName('hobby');------>获取到的是一个伪数组，需要进行遍历。
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
console.log(input);
}
1.4.根据类名获取元素
var mains = document.getElementsByClassName('main');---->获取到的是一个伪数组，需要进行遍历。
for (var i = 0; i < mains.length; i++) {
var main = mains[i];
console.log(main);
}
1.5.根据选择器获取元素
根据id选择器获取，获取到的是唯一的：
var text = document.querySelector('#text');
根据class选择器获取，获取到的是唯一的(带有该类名的第一个元素)：
var trigger = document.querySelector('.trigger')
获取到的是一个伪数组，需要进行遍历：
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
var box = boxes[i];
console.log(box);
}
2.动态创建元素
2.1.document.write()
document.write('新设置的内容<p>标签也可以生成</p>');
上面这种方式创建元素的缺陷：如果是在页面加载完毕后，此时通过这种方式创建的元素，那么页面上存在的所有内容都会消失。
2.2.innerHTML
var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>';
document.createElement()
my$("btn").onclick = function () {
//创建元素的
var pObj = document.createElement("p");
setInnnerText(pObj, "这是一个p");
//把创建后的子元素追加到父级元素中
my$("dv").appendChild(pObj);
};
3.操作元素
3.1.属性操作
非表单元素的属性
如：href、title、id、src、className
可以直接获取到该元素，然后通过点的方式获得元素上的属性
var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);
var pic = document.getElementById('pic');
console.log(pic.src);
- innerHTML和innerText
var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我会生成为标签</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不会生成为标签</p>';
console.log(box.innerText);
表单元素属性
- value 用于大部分表单元素的内容获取(option除外)
- type 可以获取input标签的类型(输入框或复选框等)
- disabled 禁用属性
- checked 复选框选中属性
- selected 下拉菜单选中属性
自定义属性操作
- getAttribute() 获取标签行内属性
- setAttribute() 设置标签行内属性
- removeAttribute() 移除标签行内属性
- 与element.属性的区别: 上述三个方法用于获取任意的行内属性。
3.2.样式操作
- 使用style方式设置的样式显示在标签行内
var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';
-
注意
通过样式属性设置宽高、位置的属性类型是字符串，需要加上px
3.3.类名操作
- 修改标签的className属性相当于直接修改标签的类名
var box = document.getElementById('box');
box.className = 'clearfix';
//classList操作
ele.classList.contains('className'); //是否有该类
ele.classList.add('newClassName1,newClassName2...'); //添加类
ele.classList.remove('oldClassName1,newClassName2...'); //删除类
ele.classList.toggle('className'); //如果元素中有该className，则删除并返回false，否则添加并返回true
3.4.节点操作
节点操作，方法
- appendChild()
- insertBefore()
- removeChild()
- replaceChild()
节点层次，属性 - parentNode
- childNodes
- children
- nextSibling/previousSibling
- firstChild/lastChild
4.事件
4.1.事件三要素
- 事件源:触发(被)事件的元素
- 事件类型:事件的触发方式(例如鼠标点击或键盘点击)
- 事件处理程序:事件触发后要执行的代码(函数形式)
4.2.注册/移除事件的三种方式
第一种方式：不可重复绑定，重复绑定的话会后来者覆盖前者。
var box = document.getElementById('box');
box.onclick = function () {
console.log('点击后执行');
};
box.onclick = null;
第二种方式：存在兼容性问题，谷歌和火狐支持，ie8不支持。
box.addEventListener('click', eventCode, false);
box.removeEventListener('click', eventCode, false);
第三种方式：存在兼容性问题，ie8支持，谷歌和火狐不支持。
box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);
function eventCode() {
console.log('点击后执行');
}
//元素绑定事件中，eventcode可为命名函数，也可为匿名函数。
兼容代码
function addEventListener(element, type, fn) {
if (element.addEventListener) {
element.addEventListener(type, fn, false);
} else if (element.attachEvent){
element.attachEvent('on' + type,fn);
} else {
element['on'+type] = fn;
}
}
function removeEventListener(element, type, fn) {
if (element.removeEventListener) {
element.removeEventListener(type, fn, false);
} else if (element.detachEvent) {
element.detachEvent('on' + type, fn);
} else {
element['on'+type] = null;
}
}
4.3.事件的三个阶段
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
事件对象.eventPhase属性可以查看事件触发时所处的阶段
4.4.事件对象的属性和方法
- event.type 获取事件类型
- clientX/clientY 所有浏览器都支持，窗口位置
- pageX/pageY IE8以前不支持，页面位置
- event.target || event.srcElement 用于获取触发事件的元素
- event.preventDefault() 取消默认行为
- event.stopPropagation();阻止事件冒泡
- arguments伪数组
my$ ( "dv3").onclick =function (){
console.log ( this.id );
console.log ( arguments.length )
//可以知道函数传入了几个参数
//此处输出为1
//虽function的( )里为空，但该事件在处理中会产生一个事件处理参数对象。
}
4.4.常用的事件类型
鼠标点击事件--->onclick
鼠标进入事件--->onmouseover
鼠标离开事件---->onmouseout
获取焦点事件---->onfocus
失去焦点事件---->onblur
键盘抬起事件---->onkeyup
鼠标移动事件---->onmousemove
容器滚动事件---->onscroll
按下鼠标事件---->onmousedown
鼠标抬起事件---->onmouseup
键盘按下事件---->onkeydown
4.4.1.鼠标事件
onmousedown 鼠标按下的时候触发的事件
onmouseup 当鼠标按下后抬起的时候触发的事件
onmousemove 当鼠标移动的时候触发
onmouseover 当鼠标移⼊的时候触发
onmouseout 当鼠标移出对象的时候触发
onclick 当鼠标单击的时候触发
ondblclick 鼠标双击的时候触发
4.4.2.键盘事件
- onkeydown 当键盘按下的时候触发
- onkeyup 当键盘按下抬起的⼀瞬间触发
4.4.3.表单事件
onsubmit 当⽤户点击submit按钮来提交表单时，就会触发表单的onsubmit事件，如果事件处理程序返回false，就会阻止表单提交，表单就不会发送数据到服务器。
- onchange 修改表单字段的时候触发该事件
- onfocus 当获取到焦点到时候触发
- onblur 当失去焦点的时候触发
4.4.4.窗口事件
onload 元素加载完成时触发,常用的就是window.onload
window.onload = function(){
//等页面加载完成时执行这里的代码
}
onresize 当浏览器窗口尺寸改变的时候触发
window.onresize = function(){
alert(1)
}
4.5.事件的event对象
event对象代表事件的状态，当事件发生的时候用来记录事件的详细信息，类似于飞机的黑匣子
在ie和chrome中，事件对象（event）是一个内置的全局对象，必须在事件调用的时候才有值，如果没有事件调用，event没有值，在firefox中event对象没有被定义，如果这个函数被事件调用，那么这个事件函数中的第⼀个参数就是event对象，这也是标准浏览器下的处理模式，在非标准下，这种方式不被采纳。
总结：在非标准下，使用被定义好的event内置对象，在标准下使用事件函数中的第一个参数，假设传递的第一个参数为e，可以用逻辑或做兼容，var e = e || event
4.5.1.event对象上的属性 clientX,clientY
clientX 事件属性返回当事件被触发时⿏标指针向对于浏览器窗口（或客户区）的水平坐标。clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器窗口（客户区）的垂直坐标。
4.5.2.event对象上的keycode属性
对于 keypress 事件，该属性声明了被敲击的键⽣成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。
示例：用方向键控制box元素移动
//通过键盘控制⽅向
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取到box对象
var oBox = document.getElementById('box');
//定义x y轴的增量
var x = y= 0;
//键盘按下事件
document.onkeydown = function(e){
//事件兼容
var e = e || event;
//上38 下 40 左37 右39
switch(e.keyCode){
case 38:
y -= 10;
break;
case 40:
y += 10;
break;
case 37:
x -= 10;
break;
case 39:
x += 10;
break;
}
//改变偏移量
oBox.style.left = x + "px";
oBox.style.top = y + "px";
}
}
</script>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
4.5.3.阻止事件冒泡
当⼀个元素接收到⼀个事件以后，会将事件传播给它的⽗级元素，它的父级元素会一层一层往上传播，直到最顶层window，这种事件传播机制叫作事件冒泡。
在实际开发中我们通常需要阻止事件冒泡，做法是将event对象上的cancelBubble/stopPropagation属性设置成true、
兼容性写法：
function stopBubble(e) {
if(e && e.stopPropagation) { //非IE
e.stopPropagation();
} else { //IE
window.event.cancelBubble = true;
}
}
w3c：event.stopPropagation()
