day0329
DOM 是一项 W3C (World Wide Web Consortium) 标准。
HTML DOM（文档对象模型）
HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：
- 作为对象的 HTML 元素
- 所有 HTML 元素的属性
- 访问所有 HTML 元素的方法
- 所有 HTML 元素的事件
换言之：
HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被结构化为对象树：
DOM对象常用属性
DOM对象属性设置或者更改都会引起重绘
宽高：width height
位置：left top
鼠标位置： x y
DOM对象：
document对象：
document.documentElement→HTML元素
body对象：
document.body→body元素
DOM常用属性必须已经是 放在页面中 渲染的DOM对象元素
HTML DOM document对象：
文档对象代表网页。
如果希望访问 HTML 页面中的任何元素，那么总是从访问 document 对象开始。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
查找HTML元素：
改变HTML元素：
添加和删除元素：
添加事件处理程序：
查找HTML对象：
HTML DOM Element 对象
属性和方法
Element补充：
属性
宽高
| 属性 | 中文含义 | 解释 |
|---|---|---|
| clientWidth clientHeight | 客户宽高 | 边框（不含）以内的所有宽高之和-滚动条宽高17px |
| offsetWidth offsetHeight | 偏移宽高 | DOM元素在页面中占位的宽高 |
| scrollWidth scrollHeight | 滚动区域宽高 | 会变为内容宽度 |
scrollWidth会变为内容宽度
位置
| 属性 | 中文含义 | 解释 |
|---|---|---|
| clientLeft clientTop | 客户位置 | 边线宽高 |
| offsetLeft offsetTop | 偏移位置 | 元素左上角（占位的左上顶点）的相对位置 |
| scrollLeft scrollTop | 滚动条位置 | 滚动条位置 |
offsetLeft offsetTop父元素有定位，相对于父元素；父元素无定位，相对于body
scrollLeft scrollTop 滚动条距离上端 可读可写
X/CH=ST/SH
初始化第一次渲染时，页面中的滚动条不可以设置，当第一次渲染完毕，交互时有效
实现返回顶部按钮
user-select:none 文本不能被选择
.div3{
width: 100px;
height: 10000px;
overflow: scroll;
border: 1px solid #000;
}
.div2{
width: 50px;
height: 50px;
font-size: 50px;
border:1px solid #000;
text-align: center;
user-select: none;/*文本不能被选择*/
position: fixed;
bottom: 100px;
right: 100px;
display: none;
}
<div class="div2">^</div>
<div
class="div3">asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br></div> var div2;
var bool=false;
init();
function init(){
div2=document.querySelector(".div2");
div2.addEventListener("click",clickhandler);
document.addEventListener("scroll",scollHandler);
setInterval(animation,16);//向上滚动有个过渡
}
function scollHandler(e){
if(document.documentElement.scrollTop>document.documentElement.clientHeight){
div2.style.display="block";
}else{
div2.style.display="none";
}
}
function clickhandler(e){
bool=true;
}
function animation(){
if(!bool) return;
document.documentElement.scrollTop-=500;
bool=document.documentElement.scrollTop!==0;
}原来用body.scrollTop,现在用documentElement.scrollTop？？
BFC导致margin合并
外边距合并：当两个块元素的垂直外边距相遇时，它们将形成一个外边距。合并的外边距的高度等于两个发生合并的外边距的高度中的较大者。
三种情况：
1.兄弟元素位于上下，上面的margin-bottom与下面的margin-top合并
2.父子元素margin-top合并
3.单独元素无内容，上下margin合并
事件
事件驱动型语言 与 注入式语言
解耦合
事件基础
Event
侦听接收 抛发
document.addEventListener("click",clickhandler);
function clickhandler(e){
console.log("aaa")
}系统事件：
自定义事件：
如果需要接收和抛发事件，必须要有对应的对象，接收和抛发的对象
接收和抛发的对象必须是同一个，而且必须是继承EventTarget类型的对象
所有的DOM对象都是可以抛发和接收事件的
接收和抛发对象必须一致，侦听事件类型必须和抛发事件类型一致，侦听必须在先，抛发在后
侦听事件的函数中，有且仅有一个参数，这个函数就是抛发的事件对象
document.dispatchEvent(evt);抛发事件
document.addEventListener("chilema",chilemeHandler);
var evt=new Event("chilema");
evt.a=10;
document.dispatchEvent(evt);//抛发事件
function chilemeHandler(e){
console.log(e.a);
console.log(e===evt);
}
观察者模式
中介者模式
Event补充：
事件原理
事件是针对事件目标对象的，来抛发内容
但是并不是直接抛发过去，尤其是针对DOM元素，根据 树型结构 来传递事件
var t=new EventTarget();//创建事件目标对象三个阶段：
eventPhase
1.捕获阶段
外到內
2.目标阶段
停着
3.冒泡阶段
内到外冒泡
div{
margin: auto;
position: absolute;
left:0;
top:0;
right: 0;
bottom: 0;
}
.div1{
width:300px;
height: 300px;
background-color: red;
}
.div2{
width: 150px;
height: 150px;
background-color: orange;
}
.div3{
width: 50px;
height: 50px;
background-color: yellow;
}
<div class="div1">
<div class="div2">
<div class="div3"></div>
</div>
</div>
var div1=document.querySelector(".div1");
var div2=document.querySelector(".div2");
var div3=document.querySelector(".div3");
addEventListener()
addEventListener(事件类型，事件执行函数，是否捕获阶段触发|事件配置对象)
事件类型 :
系统事件类型 被分为多个类别 例如 Event，MouseEvent，事件类型必须是字符串
事件执行函数 :
有且仅有一次参数，不能通过事件直接传入参数内容,因为事件执行函数是一个事件处理后回调的函数，所以只能传入函数名
如果传参就需要执行才可以，但是回调函数必须是函数名，因此不能在这里传参
div1.addEventListener("click",divclickHandler1);
div2.addEventListener("click",divclickHandler2);
div3.addEventListener("click",divclickHandler3);
事件执行函数是一个回调执行的，在事件处理中并没有处理这个回调执行的结果，也就意味着
事件执行函数不能是return返回数据
事件执行函数里面的this发生了改变
事件是否在捕获阶段被触发，默认是false，冒泡阶段触发
div2.addEventListener("click",divclickHandler2,true);事件对象中的方法e.stopPropagation()是阻止传递
function divclickHandler3(e){
console.log(e);
e.stopPropagation();
e.cancelBubble=true;//IE 8及以下
}属性e.cancelBubble=true;//IE 8及以下
事件配置对象
{once:true}只触发一次
div1.addEventListener("click",divclickHandler1,{once:true});{bubbles:true}就会让抛发的事件冒泡
var evt=new MouseEvent("click",{bubbles:true,clientX:100,clientY:100})
div3.dispatchEvent(evt);侦听的事件目标对象和被点击到的目标对象并不是相同的
div1.addEventListener("click",divclickHandler1);
function divclickHandler1(e){
console.log("div1","___________")
console.log("this:",this)
console.log("e.currentTarget:",e.currentTarget)
console.log("e.srcElement:",e.srcElement)
console.log("e.target:",e.target)
}点击外面的红色div1：
点击中间的橙色div2：
点击里面的黄色div3：
在事件触发函数中
e.target和e.srcElement（IE兼容）相同：
事件 触发 的目标对象（比如可能是内部子元素）
this和currentTarget相同:
事件 侦听 的目标对象（设置侦听的）
事件委托
将子元素或者后代元素的事件委托给父元素
减少事件侦听的增加，防止内存泄漏
实现三级菜单点击隐藏
ul {
max-height: 1000px;
transition: all 0.5s;
overflow: hidden;
}
<ul class="menu">
<li>
北京
<ul>
<li>朝阳</li>
<li>
昌平
<ul>
<li>沙河</li>
<li>老牛湾</li>
<li>回龙观</li>
<li>霍营</li>
<li>天通苑</li>
</ul>
</li>
<li>海淀</li>
<li>东城</li>
<li>通州</li>
</ul>
</li>
<li>上海</li>
<li>山西</li>
<li>
陕西
<ul>
<li>西安</li>
<li>
咸阳
<ul>
<li>泾阳</li>
<li>三原</li>
<li>淳化</li>
<li>旬邑</li>
</ul>
</li>
<li>铜川</li>
<li>宝鸡</li>
</ul>
</li>
<li>河北</li>
<li>河南</li>
</ul>
var menu = document.querySelector(".menu");
menu.addEventListener("click", clickHandler);
function clickHandler(e) {
if (e.target.nodeName !== "LI") return;
if (
e.target.firstElementChild &&
e.target.firstElementChild.nodeName === "UL"
) {
if (!e.target.bool) {
e.target.firstElementChild.style.maxHeight = 0;
e.target.bool = true;
} else {
e.target.firstElementChild.style.maxHeight = "1000px";
e.target.bool = false;
}
}
}点击对应的地点可折叠/显示
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
