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

---

多谢阅读 ==！