JS中的DOM


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();

多谢阅读 ==!

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

JS中的DOM

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » JS中的DOM
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏