DOM 文档对象模型,dom是把文档当对象看待,dom顶级对象是document,dom主要是操作页面元素来改变元素里面的内容、属性等,dom是w3c规范
<!-- 1.获取元素 -->
document.getElementById(id) // <div id="time">2019</div> var timer = document.getElementById('time');
document.getElementsByTagName('标签名') //当页面增加了标签，这个集合中也就增加了元素。
document.getElementsByClassName('类名') //根据类名返回元素对象集合 var boxs = document.getElementsByClassName('box');
document.querySelector('选择器'); //加# . css怎么写就怎么写
document.querySelectorAll('选择器') //根据指定选择器返回
document.body //获取body
document.documentElement //返回html元素
<!-- 2.常见鼠标事件 -->
onclick //点击鼠标左键触发
onmouseover //鼠标经过 鼠标经过自身盒子会触发，经过子盒子还会触发 会冒泡
onmouseout //鼠标离开
onfocus //获取鼠标焦点 //ele.onfocus = function() {}
onblur //失去鼠标焦点
onmousemove //鼠标移动触发
onmouseup //鼠标弹起
onmousedown //鼠标按下
mouseenter //只会经过自身盒子触发 不会冒泡
mouseleave //同样不会冒泡
contextmenu 我们可以禁用右键菜单
selectstart 禁止选中文字
<p>我是一段不愿意分享的文字</p>
<script> // 1. contextmenu 我们可以禁用右键菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
document.addEventListener('selectstart', function(e) {
e.preventDefault(); // 2. 禁止选中文字 selectstart
})
</script>
<!-- 键盘事件 -->
onkeyup 按键松开触发
onkeydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头 不区分字母大小写 a 和 A 得到的都是65
onkeypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头 区分字母大小写 a 97 和 A 得到的是65
document.addEventListener('keydown', function() {
console.log('我按下了down');
})
<!-- 键盘事件对象 -->
keyCode //e.keyCode返回该按键ASCII码
document.addEventListener('keyup', function(e) {
if (e.keyCode === 65) {
alert('您按下的a键');
} else {
alert('您没有按下a键')
} })
<!-- 3.改变元素内容（获取或设置） -->
element.innerText //会去除空格和换行 不会识别html
element.innerHTML //会保留空格和换行 获取或改变element元素内容 div.innerHTML(123)
//div.innerHTML = '<strong>今天是：</strong> 2019'; 就是在div里插入内容
<!-- 4.常用元素属性 -->
src href id alt title
disabled、checked、selected type value //表单元素的属性
<!-- 5.样式属性操作 -->
element.style //行类样式操作 js采用驼峰命名法 // this.style.backgroundColor = 'purple';
element.className //类名样式操作 //如果想要保留原先的类名，我们可以多类名选择器 this.className = 'first change';
<!-- 6.自定义属性操作 -->
<div id="demo" index="1" class="nav"></div>
element.属性 //获取元素自带属性 //div.id
element.getAttribute('属性') //获取自定义属性 //div.getAttribute('index')
element.属性 ='值' //div.id = 'test'; 设置属性
element.setAttribute('属性') //div.setAttribute('index', 2);
element.removeAttribute('index') //移除属性
<!-- 7.节点操作 -->
元素.parentNode //父级节点
元素.children //元素子节点 ul.children[1]
元素.nextSibling //下一个兄弟节点
元素.previousSibling //上一个兄弟节点
document.createElement('li') //创建元素节点
父元素.appendChild('li') //添加节点 添加到末尾
父元素.insertBefore('li', ul.children[0]); //添加到指定元素前面
node.removeChild() //方法从 node节点中删除一个子节点，返回删除的节点。 // ul.removeChild(ul.children[0]);
元素.cloneNode(true) //括号为true 深拷贝 复制标签复制里面的内容 // var lili = ul.children[0].cloneNode(true);
false 浅拷贝 只复制标签不复制里面的内容 // 复制（克隆）节点
<ul>
<li>1111</li>
<li>2</li>
</ul>
<script>
var ul = document.querySelector('ul');
var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili);
</script>
<!-- 8.事件监听 -->
添加事件监听:
传统方式: btn.onclick = function(){}
addEventListener()事件监听（IE9以后支持）:
btns[1].addEventListener('click', function(e) { //添加事件监听 e.target 指向我们点击的那个对象
alert(33);
console.log(e.target)
btns[1].removeEventListener('click', fn); //移除事件事件监听
})
attacheEvent()事件监听（IE678支持):
btns[2].attachEvent('onclick', function() {
alert(11);
})
移除事件监听:
<div>1</div> <div>2</div> <div>3</div>
var divs = document.querySelectorAll('div');
传统方式:
divs[0].onclick = function() {
alert(11);
divs[0].onclick = null;
}
removeEventListener 删除事件:
divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
function fn() {
alert(22);
divs[1].removeEventListener('click', fn);
}
detachEvent:
divs[2].attachEvent('onclick', fn1);
function fn1() {
alert(33);
divs[2].detachEvent('onclick', fn1);
}
<!-- 执行事件的步骤 -->
1. 获取事件 2. 注册事件(绑定事件) 3. 添加事件处理程序(采取函数赋值形式)
<!-- DOM事件流 -->
事件发生会在元素节点按特定顺序传播, 这个传播过程称为DOM事件流
<div class="father">
<div class="son">son盒子</div>
</div>
//点击son后冒泡顺序 son -> father ->body -> html -> document
<!-- 事件对象 -->
事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event
鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置
div.onclick = function(e) {
// 事件对象
e = e || window.event; //兼容IE6~8
console.log(e);
}
事件对象的属性和方法:
e.target 返回触发事件的元素
<ul> <li>abc</li> <li>abc</li> </ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
console.log(this); // 我们给ul 绑定了事件 那么this 就指向ul
console.log(e.target); // e.target 触发了事件的对象 我们点击的是li e.target 指向的就是li
});
</script>
e.type 返回事件的类型 如click mouseover
e.stopPropagation() 阻止冒泡标准(标准)
window.event.cancelBubble = true; // 非标准 ie6-ie8 阻止冒泡
e.preventDefault() 阻止默认行为(标准) 或 return false没有兼容性问题 //比如不让连接跳转
son.addEventListener('click', function(e) {
alert('son');
e.stopPropagation(); // stop 停止 Propagation 传播
});
<!-- 事件委托 -->
给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。
说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。
事件委托的作用: 我们只操作了一次 DOM ，提高了程序的性能 动态新创建的子元素，也拥有事件
<ul>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
</ul>
<script>
// 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
// e.target 这个可以得到我们点击的对象
e.target.style.backgroundColor = 'pink';
})
</script>
<!-- 鼠标事件对象 -->
e.clientX e.clientY 返回鼠标相对于浏览器窗口可视区x和y坐标
e.pageX e.pageY 返回鼠标相对于文档页面的X和y坐标 ie9以上支持
e.screenX e.screenY 返回鼠标相对于鼠标在电脑屏幕的x和y坐标