DOM2 和 DOM3

1 DOM变化

DOM2 DOM3 的目的在于扩展DOM API

1.1 针对XML命名空间的变化

1.2 其他方面的变化

1. DocumentType类型的变化
2. Document类型的变化
3. Node类型的变化
4. 框架的变化

2 样式

2.1 访问元素的样式

任何支持style的HTML元素都有一个style属性，这个style对象是CSSStyleDeclaration的实例，包含着通过style保存的样式

2.2 操作样式表

2.3 元素大小

1. 偏移量
   相对父元素的偏移量

<div id="father" style="width:500px;height:300px;margin:0 auto;border:1px solid black;">
    <div id="son" style="width:10px;height:10px;border:1px solid black;"></div>
</div>

let father = document.querySelector("#father")
let son = document.querySelector("#son")

let fatherOff = {
    width: father.offsetWidth,
    height: father.offsetHeight,
    left: father.offsetLeft,
    right: father.offsetRight,
}
console.log(fatherOff)
let sonOff = {
    width: son.offsetWidth,
    height: son.offsetHeight,
    left: son.offsetLeft,
    right: son.offsetRight,
}
console.log(sonOff)

2. 客户区大小
   指的是元素内容以及内边距所占大小

let sonClient = {
    width: son.clientWidth,
    height: son.clientHeight
}
console.log(sonClient)

3. 滚动大小
   scrollTop
   scrollLeft
   scrollWidth
   scrollHeight

<div id="scroll" style="width: 100%;height:300px;overflow-y: scroll;border:1px solid black;">    
    <div id="father" style="width:500px;height:1300px;margin:0 auto;border:1px solid black;">
        <div id="son" style="width:10px;height:10px;border:1px solid black;"></div>
    </div>
</div>

let scroll = document.querySelector("#scroll")
let father = document.querySelector("#father")
let son = document.querySelector("#son")
setTimeout(() => {
    scroll.scrollTop = 100
}, 1000);

判断子元素在滚动框有没有出现

<div id="scroll" style="width: 100%;height:300px;overflow-y: scroll;border:1px solid black;position: relative;">    
    <div style="width:500px;height:200px;margin:0 auto;border:1px solid green;"></div>
    <div style="width:500px;height:300px;margin:0 auto;border:1px solid green;"></div>
    <div id="father" style="width:300px;height:300px;margin:0 auto;border:1px solid green;position: relative;">fff</div>
    <div style="width:500px;height:300px;margin:0 auto;border:1px solid green;"></div>
</div>

 console.log( scroll.scrollTop + scroll.clientHeight > father.offsetTop)

---

函数防抖封装成构造函数

<style>
    .box{
        width: 100px;
        height: 100px;
        border: 1px solid black;
    }
</style>
<div id="scroll" style="width: 300px;height:400px;border: 1px solid black;overflow-y: scroll;"></div>

let scroll = document.querySelector("#scroll");
for(let i = 1 ; i < 30 ; i++){
    let div = document.createElement("div");
    div.className = "box";
    div.innerHTML = i;
    scroll.appendChild(div)
}

// 构造函数
function Process(performProcessing , wait){
    // 保存定时器的变量
    this.timeoutId = null;
    // 具体要执行的函数
    this.performProcessing = performProcessing;
    let that = this;
    // 动态原型模式
    if(typeof Process.prototype.process != 'function'){
        Process.prototype.process = function(){
            clearTimeout(this.timeoutId);
            that.timeoutId = setTimeout(()=>{
                that.performProcessing()
            } , wait)
        }
    }
}
let boxs = document.querySelectorAll(".box");
let lazyLoad = function(){
    // console.log(this.timeoutId)
    let scrollTop = scroll.scrollTop;
    let clientHeight = scroll.clientHeight;
    let boxsArr = Array.prototype.slice.call(boxs , 0);
    boxsArr.forEach((item , index , arr)=>{
        let offsetTop = item.offsetTop;
        if(scrollTop + clientHeight > offsetTop){
            console.log(Object.prototype.toString.call(item))
        }
    })
}
// new 出来的Process实例
let processor = new Process(lazyLoad , 300)
console.log(processor)
scroll.onscroll = function(e){
    processor.process()
}

4. 确定元素大小

3 遍历

待续。。。

4 范围

待续。。。