JS中的DOM
什么是DOM
DOM(document object moudel)文档对象模型,DOM的学习,需要学习四个模块:1:操作节点 ; 2:操作css ; 3:事件 ; 4:定时器 ;
操作节点
操作节点一般分为三个部分:
- 操作元素节点
- 操作属性节点
- 操作文本节点
操作元素节点
操作元素节点无非就是增删改查;
创建元素节点:createElement()
删除元素节点:removeChild()
插入元素节点:appendChild() insertBefore()
复制元素节点:cloneNode()
替换元素节点:replaceChild()
操作属性节点
<div title="xx"></div> // title = "xx" 叫做属性节点
属性节点可以通过元素节点打点来设置和使用
操作属性节点:
- 方式一:打点 获取div.title 设置div.title = “xx”
- 方式二: getAttribute() :div.getAttrib(“title”);
setAttribute() :div.setAttribute(“tlitle”,“xx”)
操作文本节点
获取文本节点:div.innerHTML;
设置文本节点:div.innerHTML = “xx”;
操作css
操作css分三大类:js操作css,js操作css行内样式和js操作盒子模型
操作css类
className
div.className = “xx” // 设置一个新类
div.className = “” // 把div上的css类清空
div.className // 获取div上都有哪些类
操作css行内样式
操作行内样式就是操作style的属性节点
<div style="color:red"></div>
div.style.display = "blue"
操作盒子模型
JS操作盒子模型:13个api,三个系列:client系列,offset系列,scroll系列
client系列:
clientWidth: 获取box的内容区域width+左右padding (可视区域width的大小)
clientHeight:获取box的内容区域height+上下padding (可视区域height的大小)
clientTop:获取盒子的上边框大小
clientLeft:获取盒子的左边框大小offset系列:
offsetWidth: box.offsetWidth 在clientWidth的基础上加了border
offsetHeight: box.offsetHeight 在clientHeight的基础上加了border
offsetTop: 获取一个绝对定位元素相对于参考点上面的距离
offsetLeft: 获取一个绝对定位元素相对于参考点左面的距离
offsetParent(***):获取一个绝对定位元素的参考点scroll系列: width, height, top, left
scrollWidth/scrollHeight:获取盒子或页面真实内容的宽度
scrollTop:获取页面或盒子向上卷去的高度
scrollLeft:获取页面或盒子向左卷去的宽度
事件
事件绑定:
HTML0级别的事件绑定<button onclick="f1()"">xxx</button>
DOM0级别的事件绑定btn.onclick = function(){}
基本属性赋值
DOM2级别的事件绑定btn.addEventLisener()
基于事件池机制事件对象:
本质是一个对象box.onclick = function (e) { }
// 事件对象中浏览器调用监听器传递的实参,e仅仅是形参
我们可以通过事件对象来实现以下操作:
- 阻止事件冒泡:
son.onclick = function (e) {
e.cancelBubble = true
console.log("son...")
}
box.onclick = function (e) {
console.log("box...")
}
- 阻止默认事件:
1, a标签来说,阻止默认事件:
<a href="javascript:;">百度一下,你就知道</a>
2,利用事件对象阻止默认事件:
a.onclick = function (e) {
e.preventDefault() // 阻止默认事件
}
3,在监听器最后面写个return false;
a.onclick = function (e) {
return false;
}
form也有默认事件,这个事件叫提交事件
js form.onsubmit = function () { console.log("提交了... ") }
form也有一个默认的提交事件,阻止默认事件:js e.preventDefault() // 阻止默认事件 a.onsubmit = function (e) { return false; }
定时器
定时器:
一次性定时器:window.setTimeout(()=>{},1000);
// 1s后执行里面的回调函数
关闭定时器:clearTimeout();
循环定时器:window.setInterval(()=>{},1000);
// 每隔1s执行里面的回调函数
循环定时器要产生很多EC,如果不用了,一定要使用定时器。
关闭定时器:clearInterval();
多谢阅读 ==!