js day7dom and bom

最新推荐文章于 2022-09-18 17:10:53 发布

QiuShuiFuPing

最新推荐文章于 2022-09-18 17:10:53 发布

阅读量423

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/QiuShuiFuPing/article/details/85217182

版权

css 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

BOM概念
BOM : Browser Object Model 浏览器对象模型，用来描述与浏览器进行交互的方法和接口。
BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。
BOM 的核心对象是 window ，它表示浏览器的一个实例。window对象有双重角色，它既是通过JavaScript 访问浏览器窗口的一个接口，又是ECMAScript规定的全局对象。这意味着在网页中定义的任何一个对象、变量和函数，都以window作为其全局对象。
window内置对象及方法
location对象
href属性控制浏览器地址栏的内容
reload(true)方法刷新页面,如果参数为true,通过缓存刷新。
navigator对象
userAgent 用户代理信息，通过该属性可以获取浏览器及操作系统信息
BOM相关的事件和操作
BOM的常用事件
onload事件：页面内容加载完成（DOM结构，图片.....）
onscroll事件：拖动浏览器的滚动条触发此事件。
onresize事件：浏览器窗口缩放所触发的事件。
可视区的宽高
document.documentElement.clientWidth
document.documentElement.clientHeight
滚动条距离（某些浏览器下面做兼容）
document.documentElement.scrollTop
document.body.scrollTop
window.scrollTo(xpos,ypos)
xpos必需,要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos必需,要在窗口文档显示区左上角显示的文档的 y 坐标。
定时器
setInterval(函数名称，时间)；间隔定时器(反复调用)
clearInterval( 定时器的返回值 ); 停止定时器
setTimeout(函数名称，时间); 延时定时器
clearTimeout( 定时器的返回值 ); 停止定时器

DOM的概念及作用
DOM是”Document Object Model”的首字母缩写，即文档对象模型。用来描绘一个层次化的节点树，允许开发人员获取、添加、移除和修改页面的某一部分元素。

DOM的基本操作
查询（获取元素）
getElementById()：获取特定 ID 元素的节点
getElementsByTagName()：获取相同元素的节点列表，返回类数组，使用[0]来获取
getElementsByClassName()：获取相同类名的节点列表（IE8及以下不支持），返回类数组
getElementsByName()：获取相同的name值的元素列表，返回类数组
querySelector()：通过选择器获取元素，如果获取多个只返回第一个。
querySelectorAll()：通过选择器获取元素，可同时获取多个元素，返回类数组。/'kwɪri/
document.documentElement 获取的html标签元素
document.body 获取body标题元素
创建、添加、删除、克隆、替换
document.createElement() ：文档上创建一个元素节点/krɪ'et/
box.appendChild(node) ：把node节点插入到box的内部最后的位置a
box.insertBefore(newNode, existNode)：在box内，把newNode节点插入到exsitNode的前面/'ɪnsɝt/
box.removeChild(node)：删除box内部的子节点
obj.cloneNode(）：克隆(复制)obj节点，可以传一个布尔值为参数，如果参数为true，连同obj子元素一起克隆。/klon/
obj.replaceChild(新添加的节点 , 被替换的节点)：替换子节点
默认属性和自定义属性及getAttribute等方法。obj.attributes返回的是一个关于obj属性的类数组！
getAttribute() 获取特定元素节点属性的值，某些低版本浏览器不支持. əˈtrɪbjut
setAttribute() 设置特定元素节点属性的值，某些低版本浏览器不支持
removeAttribute() 移除特定元素节点属性，某些低版本浏览器不支持
outerHTML/innerHTML/innerText
innerHTML：读写元素节点里的内容，从节点的起始位置到终止位置的全部内容,包括内部的元素。
outerHTML：除了包含innerHTML的全部内容外, 还包含元素节点本身。
innerText：获取某个元素节点的文本内容
DOM元素类型
节点可以分为元素节点、属性节点和文本节点...，他们分别用不同的数字代表类型。
例如：元素(1) 属性(2) 文本(3)
每个元素节点又有三个非常有用的属性，分别为：nodeName、nodeType、nodeValue
parentNode 获取当前节点的父节点 /nod/
childNodes节点的集合 /nəuds/
childNodes 获取当前元素节点的所有子节点,这里面包含空白节点，但在IE9之前，IE浏览器会自动忽略空白节点.返回的也是一个类数组
获取css属性的值
属性，没有单位
offsetWidth、offsetHeight：获取元素盒模型的尺寸
offsetLeft、offsetTop ：元素的偏移值(和定位有关)
offsetParent ：获取定位父亲元素。
获取任意的css属性的值，有单位。
getComputedStyle ：标准浏览器
currentStyle ：IE浏览器
文档碎片（createDocumentFragment）
文档碎片在理论上可以提高DOM操作的执行效率，将要追加的dom操作先放置在文档碎片中，最后在追加给对应的元素。
强化练习
1.广告弹出窗(自动关闭+添加倒计时效果)

2.顶部悬浮效果（百度新闻的导航）
3.回到顶部效果（百度新闻的回到顶部效果）
4.动态创建表格和删除操作
5.模拟进度条

6.简易年历
7.点击按钮换图片(可参考百度新闻的轮播图)
8.tab切换案例

//一.js依靠浏览器进行解释的--BOM(浏览器对象模型)

//BOM的核心--window对象

//BOM :++ Browser Object Model 浏览器对象模型，用来描述与浏览器进行交互的方法和接口

//BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。

//二.window下面的子对象。

//1.location对象

//地址栏后面可以通过?和&传递数据。

//https://tmall.com/shop/view_shop.html?spm=a21bo & pvid=e60f7e5d & pos=10

//1.1 href属性控制(读写)浏览器地址栏的内容

//alert(location.href);//获取

//location.href='http://www.baidu.com';//设置

//1.2 reload(true)方法 刷新页面,如果参数为true,通过缓存刷新。

//alert(123);

//location.reload(true);

//1.3 search属性:获取地址栏后面从?开始的数据(包括?)。location.search().sbustring(1)==截取？之后的数据

//思考题：将地址栏后面的数据转换成对象。

//https://tmall.com/shop/view_shop.html?spm=a21bo & pvid=e60f7e5d & pos=10

/*var obj={

spm:a21bo,

pvid:e60f7e5d,

pos:10

}*/

//2 navigator对象

//userAgent 用户代理信息，通过该属性可以获取浏览器及操作系统信息

//获取浏览器的信息

//alert(navigator.userAgent);

//3 history对象：控制浏览器的前进后退按钮

//history.forward();//前进

//history.back();//后退

//history.go(num);//正数前进，负数后退

//4 open/close打开关闭浏览器。

//window.open('http://www.jd.com','_blank');//打开页面。

/*document.οnclick=function(){

window.close();//关闭页面

}*/

</script>

事件

//1.onload事件：页面内容加载完成（DOM结构，图片.....）之后，再触发里面的代码（按顺序加载时，若js放在前面，元素会找不到，用onload）

//html任意地方引入js.因为内容加载完成后触发。

window.οnlοad=function(){//页面内容加载完成之后，再触发里面的代码

//var oBox=document.getElementById('box');

//alert(oBox);

}

</script>

//var oBox=document.getElementById('box');

//alert(oBox);//[object HTMLDivElement]

//2.onscroll事件：拖动浏览器的滚动条触发此事件。

//此事件的触发频率很高。拖到滚动条一次，会产生多次事件。

/*window.οnscrοll=function(){

console.log('hello,滚动条');

}*/

//3.onresize事件：浏览器窗口缩放所触发的事件。也有触发频率，但频率没有onscroll多。

/*window.οnresize=function(){

console.log('hello,浏览器的窗口');

}*/

</script>

可视区的宽高

//1.可视区宽高，用户能够看得见的区域。

//获取html:document.documentElement

/*window.οnresize=function(){

console.log(document.documentElement.clientWidth);

console.log(document.documentElement.clientHeight);

}*/

//2.获取滚动条的距离（onscroll使原有的，scrolltop是html变有的）

/*window.οnscrοll=function(){

console.log(document.documentElement.scrollTop);

}*/

//3.window.scrollTo(xpos,ypos);

/*document.οnclick=function(){

window.scrollTo(0,0);

}*/

</script>

定时器

//1.间隔定时器

//setInterval(函数名，时间)；间隔定时器(反复调用)

//clearInterval( 定时器的返回值 ); 停止定时器

/*var timer=null;

var i=0;

function fn(){

console.log(i);

i++;

}

//setInterval(fn(),1000);//不能这样写setInterval(fn(),1000);只能执行一次，（）表示已经出发了

timer=setInterval('fn()',1000);

document.οnclick=function(){//停止定时器

clearInterval(timer);

}*/

/*var timer=null;

var i=0;

timer=setInterval(function(){

console.log(i);

i++;

},1000);

document.οnclick=function(){//停止定时器

clearInterval(timer);

}*/

//2.延迟定时器:规定的时间延迟触发一次

//setTimeout(函数名称，时间); 延时定时器

//clearTimeout( 定时器的返回值 ); 停止定时器

/*var timer=null;

timer=setTimeout(function(){

console.log(123456);

},3000);

document.οnclick=function(){//停止定时器

clearTimeout(timer);

}*/

</script>

广告弹出框自动关闭

<span>离广告结束还剩<strong>5</strong>秒</span>

</div>

var aSpan=document.getElementsByTagName('span');//是个数组

var oBox=document.getElementById('box');

var aStrong=document.getElementsByTagName('strong');

/*aSpan[0].οnclick=function(){

oBox.style.display='none';

}*/

//自动消失

/*setTimeout(function(){

oBox.style.display='none';

},3000);*/

//倒计时的消失

var timer=null;

var num=aStrong[0].innerHTML;

timer=setInterval(function(){

num--;

if(num==0){

oBox.style.display='none';

clearInterval(timer);

}

aStrong[0].innerHTML=num;

},1000);

</script>

<body>

<!--

cTable.style.border="1px solid red"; (定义在<style></style>中的)

cTable.border="1px";(定义在html中，如<table border=""></table>)

<a href="http://www.baidu.com">mylink1</a>

<a href="http://www.baidu.com">mylink2</a>

<a href="http://www.baidu.com">mylink3</a>

</div>

</div>-->

//标签元素、标签元素的属性、标签元素里面的内容（<p class="box">88888888888</p>

）

//一.对document下面的元素进行增，删，改，查

//1.获取元素对象--查找

//第一种方法--通过id名获取元素--最快最优。

//var oBox=document.getElementById('div1');

//alert(oBox);//[object HTMLDivElement]

//var oP=document.getElementById('p1');

//alert(oP);//[object HTMLParagraphElement]

//第二种方法--通过标签名获取，返回一个类数组。

//var aA=document.getElementsByTagName('a');

//alert(aA.length);//2

//alert(aA[0]);//http://www.baidu.com/ 特殊(目标点就是元素对象)

//alert(aA[0].innerHTML);//mylink1

//第三种方法--通过选择器的方式获取元素对象，类似于css选择器。

//var oP=document.querySelector('.nav p');//获取一个，如果指向有多个，取第一个。

//alert(oP.innerHTML);

/*var aP=document.querySelectorAll('.nav p');//类数组，获取多个元素

alert(aP.length);

alert(aP[1].innerHTML);*/

//className:js下面获取选择器的类名，千万不能使用class(js里面具有特殊用途)

//2.创建元素--增

//document.createElement('元素的名称')：文档上创建一个元素节点

//var cDiv=document.createElement('div');//创建一个div元素

//alert(cDiv);//[object HTMLDivElement]

//cDiv.innerHTML='我是被创建出来的';

//box.appendChild(node) ：把node元素节点插入到box（父元素）的内部最后的位置

//document.body.appendChild(cDiv);//追加，一般在body里而非html开始追加

for(var i=1;i<=10;i++){//DOM创建

var cDiv=document.createElement('div');

cDiv.innerHTML=i;

document.body.appendChild(cDiv);

}

/*var str='';

for(var i=11;i<=20;i++){//字符串拼接--比上面性能好（使用概率大）

str+='<div>'+i+'</div>';

}

document.body.innerHTML+=str;*/

//创建表格，删除表格

var cTable=document.createElement('table');

cTable.style.border='1px solid red';

for(var i=1;i<=9;i++){

var cTr=document.createElement('tr');

for(var j=1;j<=9;j++){

var cTd=document.createElement('td');

cTd.style.padding='15px 30px';

cTd.style.border='1px solid red';

//如果是最后一个td，添加删除按钮。

if(j==9){

var cButton=document.createElement('button');

cButton.innerHTML='删除'+i;

cTd.appendChild(cButton);

}else{

cTd.innerHTML=i*1111111;

}

cTr.appendChild(cTd);

}

cTable.appendChild(cTr);

}

document.body.appendChild(cTable);

//函数里面有一个特殊的对象--this

//this总的指向:指向函数的调用者，谁调用函数，this指向谁

//事件处理函数里面的this指向当前操作的元素。

var aButton=document.querySelectorAll('table button');

for(var i=0;i<aButton.length;i++){

aButton[i].onclick=function(){//给多个按钮同时添加事件。

//alert(this.innerHTML);//输出当前点击按钮的botton内容。

//parentNode属性:获取父节点

/*alert(this.parentNode);//td

alert(this.parentNode.parentNode);//tr

alert(this.parentNode.parentNode.parentNode);//table

alert(this.parentNode.parentNode.parentNode.parentNode);//body

alert(this.parentNode.parentNode.parentNode.parentNode.parentNode);//html

alert(this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode);//document

alert(this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode);*///null

//3.删除元素

//box.removeChild(node)：删除box内部的子节点(node)(子子节点也会删除)

//window.confirm(提示文字):弹出选择框，确定--true 取消--false;

if(window.confirm('你确定要删除吗？')){

this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);

}

</script>

微博发布

<body>

//4.box.insertBefore(newNode, existNode)：在box内,把newNode节点插入到exsitNode的前面

var oButton=document.querySelector('button');

var oT=document.querySelector('textarea');

var oUl=document.querySelector('ul');

oT.focus();//表单获取焦点

//alert(oUl.children.length);//获取元素对象的子元素，返回一个类数组。

oButton.onclick=function(){

if(oT.value!=''){

var cLi=document.createElement('li');

cLi.innerHTML=oT.value;

//childern属性：获取元素对象的子元素，返回一个类数组。

//oUl.children[0] 第一个子元素

//oUl.children.length 子元素的长度。

if(oUl.children.length<1){

oUl.appendChild(cLi);

}else{

oUl.insertBefore(cLi, oUl.children[0]);

}

oT.value='';//清空文本域的内容

}else{

alert('请输入内容');

}

oT.focus();

}

</script>

克隆

<body>

<div class="box"><strong>被克隆的元素</strong></div>

//obj.cloneNode(）：克隆(复制)obj节点，可以传一个布尔值为参数，如果参数为true，连同obj子元素一起克隆。

/*var oBox=document.querySelector('.box');

var cloneBox=oBox.cloneNode(true);//克隆div元素

document.body.appendChild(cloneBox);*/

//obj.replaceChild(新添加的节点 , 被替换的节点)：替换子节点

/*var oBox=document.querySelector('.box');

var cP=document.createElement('p');

cP.className='box';

cP.innerHTML=oBox.innerHTML;

document.body.replaceChild(cP,oBox);*/

</script>

</body>

Html

<ul>

</ul>

//1.html属性操作：默认的属性(标签自带的属性)和自定义的属性。

//2.默认的属性的操作

//var oLi=document.querySelector('li');//元素对象。

//读--点操作符和中括号

//alert(oLi.id);

//alert(oLi['id']);//J_SiteNavSeller

//alert(oLi.className);//class被js占用。

//alert(oLi.aaa);//undefined 自定义无法通过点操作符获取。

//读--getAttribute()

//alert(oLi.getAttribute('id'));//J_SiteNavSeller

//alert(oLi.getAttribute('class'));//ok

//写

//oLi.id='hehe';

//oLi['id']='abc'

//3.自定义的属性

//var oLi=document.querySelector('li');//元素对象。

//js代码添加自定义属性。

//oLi.abc='def';//自定义属性，IE8可以查看自定义属性。

//alert(oLi.abc);？

//手动添加自定义属性。

//setAttribute():添加自定义的属性

//oLi.setAttribute('xxx','yyyy');

//alert(oLi.xxx);//undefined

//alert(oLi.getAttribute('data-name'));

</script>

10.<div class="box"><strong>被克隆的元素</strong></div>

var oBox=document.querySelector('.box');

//可读写

//console.log(oBox.innerHTML);//<strong>被克隆的元素</strong>

//console.log(oBox.outerHTML);//<div class="box"><strong>被克隆的元素</strong></div>

//console.log(oBox.innerText);//被克隆的元素

//oBox.outerHTML='被克隆的元素';

</script>

11. <div class="box" id="div1">

<ul>

</ul>

</div>

var oBox=document.querySelector('.box');

//标签：元素，节点。

//元素节点

/*alert(oBox.nodeType);//1

alert(oBox.nodeName);//DIV

alert(oBox.nodeValue);//null*/

//属性节点

//console.log(oBox.attributes);//obj 属性节点集合，返回类数组。

//alert(oBox.attributes[0].nodeType);//2

//alert(oBox.attributes[0].nodeName);//class

//alert(oBox.attributes[0].nodeValue);//box

//文本节点

//children:子节点的集合,返回类数组,之前的属性。

//childNode:子节点的集合,返回类数组，新的属性。

//var oUl=document.querySelector('.box ul');

/*console.log(oUl.children.length);//5

console.log(oUl.childNodes.length);//11*/

//alert(oUl.childNodes[0].nodeType);//3

//alert(oUl.childNodes[0].nodeName);//#text

//alert(oUl.childNodes[0].nodeValue);//

//alert(oUl.childNodes[3].childNodes[0].nodeValue);

</script>

</body>

12.<body>

var oBox=document.querySelector('.box');

//1.通过属性词获取元素的css属性--没有单位

//offsetWidth,offsetHeight:获取盒模型尺寸。width+padding+border

//console.log(oBox.offsetWidth);//220

//offsetLeft,offsetTop：获取盒子绝对位置(没有定位,相对可视区。有点位,相对于父元素).

//console.log(oBox.offsetLeft);//离可视区的偏移位置

//offsetParent：获取定位父级。

//alert(oBox.offsetParent);//[object HTMLBodyElement]

</script>

</body>

13.<body>

<ul>

</ul>

console.time('ok');

var oUl=document.querySelector('ul');

for(var i=1;i<=10000;i++){

var cLi=document.createElement('li');

cLi.innerHTML=i;

oUl.appendChild(cLi);

}

console.timeEnd('ok');

</script>

</body>

14. <script>

console.time('ok');

var oUl=document.querySelector('ul');

var fragment=document.createDocumentFragment();//新建碎片

for(var i=1;i<=10000;i++){

var cLi=document.createElement('li');

cLi.innerHTML=i;

fragment.appendChild(cLi);//先放到碎片中

}

oUl.appendChild(fragment);//一次性追加

console.timeEnd('ok');

</script>

15.<body>

<ul>

</ul>

console.time('ok');

var oUl=document.querySelector('ul');

var str='';

for(var i=1;i<=10000;i++){

str+='<li>'+i+'</li>';

}

oUl.innerHTML=str;

console.timeEnd('ok');

</script>

</body>

16.<div class="box">123</div>

var oBox=document.querySelector('.box');

//读取css属性值

//1.js提供的四个属性：offsetWidth......

//2.getComputedStyle/currentStyle

//alert(oBox.style.width);//无法获取css的属性值，可以读取行间样式

//写入css的属性

//1.elementobj.style.属性名=值;

//注意：font-size==> fontSize 中杠在属性设置时写成驼峰命名的形式。

//注意单位。

//oBox.style.backgroundColor='red';

//oBox.style.fontSize='100px';

//oBox.style['font-size']='500px';

/*oBox.style.width='200px';

oBox.style.height='200px';

oBox.style.backgroundColor='orange';

oBox.style.position='absolute';

oBox.style.left='200px';

oBox.style.top='200px';*/

//2.利用cssText属性--将css代码以字符串的形式赋值。

oBox.style.cssText='width:200px;height:200px;background: red; position: absolute;left:200px;top:200px;';

</script>

17.<body>

<!--<a href="#" class="active" x=0>JavaScript</a>

<a href="#" class="active">JavaScript</a>

</div>

<li>javascript</li>

</ul>

<ul>

</ul>

<ul>

</ul>

</div>

//tab切换：一一匹配，让按钮和跟按钮对应的内容进行一一匹配。

//1.获取元素

var aA=document.querySelectorAll('.tab .title a');

var aUl=document.querySelectorAll('.tab .content ul');

//2.三个a添加点击事件。

//如果循环里面有事件，事件里面的i是循环的最后一次值。

for(var i=0;i<aA.length;i++){

//alert(i); //0,1,2

aA[i].onclick=function(){

//i:循环的最后一次的值,循环结束的值。

//4.点击当前的a元素之前，清空所有的类名。

for(var j=0;j<aA.length;j++){

aA[j].className='';

aUl[j].style.display='none';

}

//3.当前点击的a添加className

this.className='active';

//5.让和a想匹配的内容显示。

aUl[this.getAttribute('x')].style.display='block';

//alert(this.getAttribute('x')); //当前点击的a的索引。

}

for(var i=0;i<aA.length;i++){

aA[i].index=i;//自定义属性(自定义索引)

aA[i].onclick=function(){

for(var j=0;j<aA.length;j++){

aA[j].className='';

aUl[j].style.display='none';

}

this.className='active';

aUl[this.index].style.display='block';

};

}

</script>

</body>

18.<body>

<ul>

</ul>

<ol>

</ol>

</div>

var box=document.querySelector('#box');

var picLi=document.querySelectorAll('#box ul li');

var btnLi=document.querySelectorAll('#box ol li');

var left=document.querySelector('#left');

var right=document.querySelector('#right');

var num=0;

//小圆圈添加鼠标经过事件

for(var i=0;i<btnLi.length;i++){

btnLi[i].index=i;

btnLi[i].onmouseover=function(){

num=this.index;//当前操作的元素的索引。

tabSwitch()

};

}

function tabSwitch(){

for(var j=0;j<btnLi.length;j++){

btnLi[j].className='';

picLi[j].style.display='none';

}

btnLi[num].className='active';

picLi[num].style.display='block';

}

right.onclick=function(){

num++;

if(num>7){

num=0;

}

tabSwitch();

}

left.onclick=function(){

num--;

if(num<0){

num=7;

}

tabSwitch();

}

//自动轮播

var timer=setInterval(function(){

right.onclick();//自动执行右键

},2000);

box.onmouseover=function(){

clearInterval(timer);

}

box.onmouseout=function(){

timer=setInterval(function(){

right.onclick();//自动执行右键

},2000);

}

</script>

</body>

<body>

<ul>

</ul>

<ol>

</ol>

</div>

var box=document.querySelector('#box');

var picLi=document.querySelectorAll('#box ul li');

var btnLi=document.querySelectorAll('#box ol li');

var left=document.querySelector('#left');

var right=document.querySelector('#right');

var num=0;

//小圆圈添加鼠标经过事件

for(var i=0;i<btnLi.length;i++){

btnLi[i].index=i;

btnLi[i].onmouseover=function(){

num=this.index;//当前操作的元素的索引。

tabSwitch()

};

}

function tabSwitch(){

for(var j=0;j<btnLi.length;j++){

btnLi[j].className='';

picLi[j].style.opacity=0;

}

btnLi[num].className='active';

picLi[num].style.opacity=1;

}

right.onclick=function(){

num++;

if(num>7){

num=0;

}

tabSwitch();

}

left.onclick=function(){

num--;

if(num<0){

num=7;

}

tabSwitch();

}

//自动轮播

var timer=setInterval(function(){

right.onclick();//自动执行右键

},2000);

box.onmouseover=function(){

clearInterval(timer);

}

box.onmouseout=function(){

timer=setInterval(function(){

right.onclick();//自动执行右键

},2000);

}

</script>

20.<body style="height: 3000px;">

<!--<script type="text/javascript">

//1.onload事件：页面内容加载完成（DOM结构，图片.....）之后，再触发里面的代码

//html任意地方引入js.因为内容加载完成后触发。

// window.οnlοad=function(){

// var oBox=document.getElementById('box');

// alert(oBox);

//}

// window.οnlοad=function(){//页面内容加载完成之后，再触发里面的代码

// //var oBox=document.getElementById('box');

// //alert(oBox);

// }

</script>-->

document.onclick=function(){window.scrollTo(0,0);}

//var oBox=document.getElementById('box');

//alert(oBox);//[object HTMLDivElement]

//2.onscroll事件：拖动浏览器的滚动条触发此事件。

//此事件的触发频率很高。拖到滚动条一次，会产生多次事件。

/*window.οnscrοll=function(){

console.log('hello,滚动条');

}*/

//3.onresize事件：浏览器窗口缩放所触发的事件。也有触发频率，但频率没有onscroll多。

/*window.οnresize=function(){

console.log('hello,浏览器的窗口');

}*/

</script>

</body>

QiuShuiFuPing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js day7dom and bom

BOM概念BOM : Browser Object Model 浏览器对象模型，用来描述与浏览器进行交互的方法和接口。BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。BOM 的核心对象是 window ，它表示浏览器的一个实例。window对象有双重角色，它既是通过JavaScript 访问浏览器窗口的一个接口，又是ECMAScript规定的全局对象。这意味...
复制链接

扫一扫