JS中的DOM

时间:2020-8-2 作者:admin


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


多谢阅读 ==!

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。