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)

4. 确定元素大小

3 遍历

待续。。。

4 范围

待续。。。