DOM个人学习笔记

1.获取元素：
常用：
1.

document.querySelector('要获取的元素')返回匹配的第一个元素对象
document.querySelectorAll('要获取的元素')以伪数组的形式返回匹配的所有元素对象

以上都存在兼容性问题，考虑兼容性可以通过document.getElementById（‘要获取的id选择器名’）
document.getElementByTagName（‘要获取的标签选择器名’）等
2.节点操作获得元素

(element).parentNode   返回elemen元素的上一级父节点
(element).children  伪数组形式返回element的所有子节点
(element).nextElementSibling   下一个兄弟节点
(element).preElementSibling   上一个兄弟节点

以上获得的都是元素节点，也有一大堆获取文本节点等方法，比较少见

2.修改元素
获取并修改元素的文本内容，也可以直接加入新的标签

1.(element).innerHTML='修改的内容'  
div.innerHTML = '<div>我是新加入的div标签的内容</div>';

修改自带的元素属性，如img有src，title等属性，表单有type，value等属性

var img=document.querySelector('img');//获取img元素
img.src='路径';

修改样式属性
1.

var div=document.querySelector('div')//获取元素
//法一：style修改样式
img="路径";
div.style.backgroundImage='url("+img+")';
//法二，添加新的类
div.className='newcalss'

2.自定义属性及其修改

var div=document.querySelector('div')//获取元素
div.setAttribute('属性名','值');//设置自定义属性
div.getAttribute('属性名')//获得自定义属性
div.removeAttribute('属性名')

3.创建元素
法一：通过innerHTML创建见上文
法二：节点操作创建

var div=document.querySelector('div')//获取元素
var son=document.createElement('标签名');//新建一个标签名的元素
div.appendChild(son) //添加元素追加在div末尾;
div.insertBefore(son,element)//添加元素在div内element元素前

4.删除节点

var div=document.querySelector('div')//获取元素
div.removeChild(child);//删除div内的child子节点

事件：
1.传统方式创建事件，事件注册具有唯一性，且只能获得冒泡阶段
1.事件源，通过上述一些方法获取的元素
2.事件类型
: 鼠标点击：onclick
: 鼠标经过：onmouseover
: 鼠标离开：onmouseout
: 焦点事件：onfocus获取焦点 onblur 失去焦点
: 禁止弹出鼠标右键菜单：contextmenu
: 禁止鼠标选中 ：selectstart
3.事件处理程序：事件源.事件类型=函数

//例:
var div=document.querySelector('div')//获取元素
div.onclick=function(){
	console.log('这是一个控制台');
	this.onclick = null;//删除事件
}

2.方法监听注册
div.addEventListener(‘事件类型’,执行函数，是否在捕获阶段调用函数);默认false冒泡
事件类型去掉on

var div=document.querySelector('div')//获取元素
div.addEventListener('click',fun);
function fun(){
	alert('这是一个弹框');
	div.removeEventListener('click', fun);//删除该事件
}

事件对象
作为事件处理函数的参数调用，系统自建
常见属性
: target 返回触发事件的对象
: type 返回事件的类型
: preventDefault() 阻止默认的事件或行为
: stopPropagation 阻止冒泡
鼠标事件对象（mouseEvent)
常见属性
: clientX,clientY,相对于窗口可视区的x，y坐标
: pageX,pageY,相对于文档页面的x，y坐标

键盘事件对象
事件
: onkeyup 键盘弹起时触发
: onkeydown 键盘按下时触发
: onkeypress 键盘按下时触发
onkeypress与onkeydown区别：
1.onkeypress不识别功能键
2,onkeypress区分大小写
3.当两个都有时，先执行onkeypress

属性：
keycode：判断按下了哪个建，值对应ASCI码