首页 > 代码库 > DOM，BOM
DOM，BOM
1.DOM:文档对象模型(Document Object Model)
1)子节点:只是这一代的后代,不会计算后代的后代
1.childNodes:获取子节点,
--IE6-8:获取的是元素节点,正常
--高版本浏览器:但是会包含文本节点和元素节点(不正常)
2.nodeType:节点的类型
--nodeType=3-->文本节点
--nodeTyPE=1-->元素节点
所以获取元素节点兼容的方法:
for(var i=0;i<oUL.childNodes.length;i++){
if(oUl.childNodes[i].nodeType==1){
oUl.childNodes[i].style.background=‘red‘;
}
}
3.children属性:只获取元素节点,不获取文本节点,比上面的好用所以我们一般获取子节点时,最好用这个属性
2)父节点:
1.parentNode:获取某一个元素的父节点(获取的是直接父级)
--this.parentNode.style.display=‘none‘;
2.offsetParent:获取元素相对定位的父级(会根据样式的不同而不同)
(若CSS中直接父级没有定位,会直接往上面找,直到找到有定位的父级)
3.firstChild/firstElementChild:第一个子节点
lastChild/lastElementChild:最后一个子节点
nextSibling/nextElementSibling:下一个兄弟节点
previousSibling/previousElementSibling:上一个兄弟节点
--IE6-8下兼容:firstChild,lastChild,nextSibling,previousSibling,
(高版本浏览器IE9+,FF,Chrome不兼容,其获取的空白文本节点)
--高版本浏览器下兼容:firstElementChild,lastElementChild,nextElementSibling,previousElementSibling
(低版本浏览器IE6-8不兼容)
--兼容写法:
if(oUl.firstElementChild){
oUl.firstElementChild.style.background=‘red‘;
}else{
oUl.firstChild.style.background=‘red‘;
}
3)DOM方式操作元素的属性:
(之前学过.和[]操作属性的方法,可以下面的互换)
1)设置属性:element.setAttribute(属性名称,值)
2)获取属性:element.getAttribute(属性名称)
3)删除属性:element.removeAttribute(属性名称)
4)获取元素的方法:
--document.getElementById()
--document.getElementsByTagName()
--document.getElementsByName()
--封装一个通过class获取元素的函数
function getByClass(oParent,sClass){
var arr=[];
aEle=oParent.getElementByTagName(‘*‘);
for(var i=0;i<aEle.length;i++){
if(aEle[i].className==sClass){
arr.push(aEle[i]);
}
}
return arr; //把所有得到的元素放进数组里面返回出去
}
var aBtn=getByClass(oUl,‘list‘);
for(var i=0;i<aBtn.length;i++){
aBtn[i].style.background=‘red‘;
}
5)DOM操作应用:
1.创建元素: document.createElement(‘li‘);
2.设置或返回元素的inner HTML: element.innerHTML
3.向元素的最后添加新的子节点: 父级.appendChild(子节点)
4.向元素的最前面添加新的子节点：父级.insertBefore(子节点,在谁之前)
insertBefore在IE下不行,因为ul里面本来没有li,找不到第一个元素子节点
--兼容写法
if(aLi.length>0){ //假如里面原来有li子元素
oUl.insertBefore(cLi,aLi[0]);
}else{ //原来没有元素,直接appendChild即可
oUl.appendChild(cLi);
}
例:创建元素和插入元素:
1)创建一个元素:var cLi=document.createElement(‘li‘);
2)给创建的元素节点添加文本节点:cLi.innerHTML=oTxt.value;
3)将创建的子节点添加到某个父级元素里面:oUl.appendChild(cLi);
5.从元素中删除子节点:
element.removeChild()-->父级.removeChild(子节点);
var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);
删除之前:Coffee,Tea,Milk
删除之后:Tea,Milk
6.element.hasAttribute():如果元素拥有指定属性,则返回true,否则返回 false
document.getElementsByTagName("BUTTON")[0].hasAttribute("onclick"); //true
7.element.hasChildNodes():如果元素拥有子节点,则返回 true,否则 false
document.body.hasAttributes(); //false
6)文档碎片:(现在基本上已经不用,高版本浏览器性能提高不大)
--创建一个文档碎片:var oFrag=document.createDocumentFragment()
--可以提高DOM操作的性能
--原理:假如我需要差很多元素到文档中,每插入一个元素,页面需要重新渲染一次,
插入多个页面需要渲染多次,性能比较低,这时候就可以将这些要插入的
元素放入到文档碎片中,最后一次性插入,一次性渲染,性能较高
2.BOM:浏览器对象模型(Browser Object Model)
1.Window对象:
1)特点:所有浏览器都支持window对象,它表示浏览器窗口
所有 JavaScript 全局对象,函数以及变量均自动成为window对象的成员
全局变量是window对象的属性
全局函数是window对象的方法
甚至 HTML DOM 的document也是window对象的属性之一
document.getElementById("header")完整写法为:window.document.getElementById("header");
2)Window对象属性:(其实全局对象都是Window对象的一个属性,只不过我们平时使用时都是省略window的,
直接使用这些全局对象,下面会对全局对象做具体介绍)
1.window.colsed:返回窗口是否已被关闭(true,false)
2.window.document:对Document对象的只读引用
3.window.history:对History对象的只读引用
4.window.location:用于窗口或框架的Location对象
5.window.Navigator:对Navigator对象的只读引用
6.window.Screen:对Screen对象的只读引用
3)Window对象方法:全局的函数(如alert())也是Window对象方法,有些我们平时使用时也是省略window,直接使用
1.打开窗口:
--window.open(‘about:blank‘)==>新弹出来一个空白页
--window.open(‘about:blank‘,‘_self‘)==>在当前窗口打开一个新的
--window.open(‘about:blank‘,‘_blank‘)==>新弹出来一个空白页,以前的窗口还在,默认为blank
window.open方法打开的窗口是有返回值的,返回的是当前新打开的窗口,也是一个窗口对象
例子:在新打开的窗口中写文字
oBtn.onclick=function(){
var newWindow=window.open(‘about:blank‘);
newWindow.document.write(oTxt.value);
};
2.关闭窗口:
--window.close()==>在谷歌下可以关闭,在IE会有提示,在火狐下会禁止脚本关闭用户打开的窗口
--需要将用户打开的窗口先open打开,再close才有用
<input type=‘button‘ value=http://www.mamicode.com/‘open‘ onclick="window.open(‘close.html‘);" />
<input type=‘button‘ value=http://www.mamicode.com/‘close‘ onclick="window.close();" />
3.定时器的使用:
1)间隔性:setInterval(fn,毫秒数) //作用是每隔多少时间执行一次函数
2)延时性:setTimeout(fn,毫秒数) //过多久执行一次函数,只执行函一次
3)关闭定时器:clearInterval()/clearTimeout()
是指从下一次开始关闭定时器,但是函数后面的代码会继续执行完毕,
所以一般将函数后面的代码写在else里面与关闭定时器分割开来
如何‘开‘或者‘关‘一个定时器
<input id="btn1" type="button" value="http://www.mamicode.com/打开" />
<input id="btn2" type="button" value="http://www.mamicode.com/关闭" />
<script>
window.onload=function(){
var oBtn1=document.getElementById(‘btn1‘);
var oBtn2=document.getElementById(‘btn2‘);
var timer=null; //打开一个定时器
oBtn1.onclick=function(){
//setInterval返回上面打开的定时器
timer=setInterval(function(){
alert(‘a‘);
},1000);
}
oBtn2.onclick=function(){
//关闭时直接关闭上面打开的计时器即可
clearInterval(timer);
}
}
</script>
4.窗口尺寸:
可视区尺寸:document.documentElement.clientWidth
document.documentElement.clientHeight
滚动条滚动距离(滚动条高度):
IE,Chrome:document.body.scrollTop
FF:document.documentElement.scrollTop
兼容处理:var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
5.系统对话框:(用的较少)
--警告框:alert(‘内容‘); ==>没有返回值
--选择框:confirm(‘提问的内容‘); ==>返回boolean值(确定返回true,取消返回false)
--输入框:prompt(‘提示内容‘,‘默认值‘); ==>返回当前输入的字符串或null
6.window对象常用事件:window.onload,window.onscroll,window.onresize
关于CSS中的固定定位fixed:IE6不兼容,position:fixed
所以要想做右下角的固定小广告,需要用js实现,不能直接fixed固定
问题1:当窗口改变大小时,右下角oDiv并不随着改变位置,需要用到window.onresize
问题2:右下角小的oDiv会在滚动时出现抖动现象,可以做一个判断
userAgent>IE6==>fixed
IE6==>用运动解决 (在JS运动里面会讲到运动)
window.onscroll=window.onresize=function(){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var oDivheight=oDiv.offsetHeight;
var clientHeight=document.documentElement.clientHeight;
var Top=clientHeight-oDivheight+scrollTop;
oDiv.style.top=Top+‘px‘;
}
2.Navigator对象:包含有关浏览器的信息
navigator.appName:返回浏览器的名称
navigator.appVersion:返回浏览器的平台和版本信息
navigator.userAgent:返回由客户机发送服务器的user-agent头部的值(也有当前的浏览器和浏览器版本信息)
判断浏览器:
mozilla = /firefox/.test(navigator.userAgent.toLowerCase());
webkit = /webkit/.test(navigator.userAgent.toLowerCase());
opera = /opera/.test(navigator.userAgent.toLowerCase());
3.Screen对象:包含有关客户端显示屏幕的信息
JS中有几个对象的用处不大,而Screen对象就是其中之一,Screen对象基本上只用来表明客户端的能力,不详细说明了
4.History对象:包含用户(在浏览器窗口中)访问过的URL
1)History对象的属性:
length属性:返回浏览器历史列表中的URL数量,对于刚加载到窗口的第一个页面而言history.length=0
2)History对象的方法:
1.history.go():可在用户历史记录中任意跳转,可以向后,也可以向前
go()方法参数为数字时:
后退一步:history.go(-1);
前进一步:history.go(1);
前进两步:history.go(2);
go()方法参数为字符串时:此时浏览器会跳到历史记录中包含该字符串最近的位置,可能前进,也可能后退,
具体看参数字符串离哪个历史记录近.
跳到最近的 baidu.com 页面:history.go(‘baidu.com‘);
2.history.back():代替history.go()方法的后退一步
后退一步:history.back();
3.history.forward():代替history.go()方法的前进一步
前进一步:history.forward();
5.Location对象:
是最有用的BOM对象之一,它提供了与当前窗口中加载的文档有关的信息
location对象是一个很特别的对象,因为它既是window对象的属性也是document对象的属性,
也就是说:window.location与document.location引用的是同一个对象。
1)Location对象属性:
--location.hash设置或返回从井号(#)开始的UR(锚),如果没有此系列,则返回空字符串
location.hash="#part2";
document.write(location.hash);
--location.host:设置或返回服务器名称和当前URL的端口号 ‘localhost:8080‘
--location.hostname:设置或返回不带端口号的服务器名称 ‘localhost‘
--location.href:设置或返回当前加载页面的完整URL,而location对象的toString()方法也返回这个值
‘http://localhost/learnjs/drag.html‘
--location.pathname:设置或返回URL中的目录和(或)文件名 ‘/learnjs/drag.html‘
--location.port:设置或返回当前URL的端口号,若无则返回空字符串 ‘8080‘
--location.protocol:设置或返回页面使用的协议。通常为http:或https:
--location.search:设置或返回URL的查询字符串.这个字符串以问号开头 ‘?q=javascript‘
2)查询字符串参数:虽然上面的属性可以访问到location的大多数信息,但访问URL包含的查询字符串的属性并不完整
虽然location.search可以返回从问号到URL末尾的所有内容,但不能访问其中的每个查询字符串参数
创建函数,用以解析查询字符串,返回包含所有参数的一个对象:
function getQueryArgs(){
//取得查询字符串并去掉开头的问号
var qs=(location.search.length>0 ? location.search.substring(1) : ‘‘);
//定义保存数据的对象
var args={};
//取得每一项:
var items=qs.length ? qs.split(‘&‘) : [];
var item=null;
var name=null;
var value=http://www.mamicode.com/null;
//逐个将每一项添加到args对象中
for(var i=0;i<items.length;i++){
item=items[i].split(‘=‘);
name=decodeURIComponent(item[0]);
value=http://www.mamicode.com/decodeURIComponent(item[1]);
if(name.length){
args[name]=value;
}
}
return args;
}
//假设查询的字符串是:?a=1&B=2
var args=getQueryArgs();
alert(args[‘a‘]); //1
alert(args.B); //2
3)Location对象方法:
--location.assign(‘URL‘):加载新文档,可以打开一个新的文档,并在浏览器中添加一条历史记录
--window.location=‘URL‘/location.href=http://www.mamicode.com/‘URL‘与location.assign(‘URL‘)作用相同.
在这些打开新文档的方法中,常用的是location.href属性
--location.reload():重新加载当前文档
没有参数时,页面会以最有效的方式重载,即可能从浏览器缓存中重新加载
有参数(true)时:从服务器从新加载
location.reload(); //可能从缓存中加载
location.reload(true); //从服务器重新加载
注:位于reload()调用之后的代码可能会也可能不会执行,这要取决于系统资源和网络延迟等情况,
因此reload()最好放在代码最好一行.
--location.replace():用新的文档替换当前文档,也是加载新文档,replace()方法不会往历史记录中添加一个新的记录.
当使用该方法时,新的URL将覆盖History对象中的当前记录,而上面介绍的方法都会生成一条新的历史记录
如果想要禁止用户通过‘后退‘按钮返回到前一个页面(既不想添加一条历史记录),就可以使用replace()方法
oBtn.onclick=function(){
location.replace(‘http://localhost/learnjs/index.html‘);
};
DOM，BOM