DOM、BOM、事件知识总结 DOM、BOM、事件知识总结

DOM、BOM、事件知识总结 DOM相关知识 DOM（Document Object Model）文档对象模型如何获取元素节点 1、根据id来获取元素节点（Object类型的）

在document中找Id为box的元素节点
示例：

var oDiv = document.getElementById("box"); console.log( oDiv ); alert(oDiv);

2.根据class来获取所有的指定class值的元素节点
示例

var oUls = document.getElementsByClassName("list"); console.log(oUls); alert(oUls); //切记！根据className获取到是集合！不是元素节点。要遍历集合才可以拿到集合中元素节点。 for (var i = 0; i < oUls.length; i++) { console.log( oUls[i] ); //记得加上[i],即中括号里面加上下标，[下标] }

3.根据标签名来获取所有该类型的元素节点。
示例

var oLis = document.getElementsByTagName("li"); console.log( oLis ); alert( oLis ); for (var i = 0; i < oLis.length; i++) { console.log( oLis[i] ); } console.log("____________________________"); // 在第一个ul的子标签中查找所有tagName为li的元素节点 var oLi1s = oUls[0].getElementsByTagName("li") for (var i = 0; i < oLi1s.length; i++) { console.log( oLi1s[i] ); }

4.根据name属性值来获取所有元素节点（表单元素中有）
示例

var oInputs = document.getElementsByName("fm"); console.log( oInputs ); alert( oInputs ); for (var i = 0; i < oInputs.length; i++) { console.log( oInputs[i] ); }var oImgs = document.getElementsByTagName("img"); console.log( oImgs.length ); //集合中只有一个元素。但是要想获取这一个元素的时候还是要通过下标法获取通过遍历的方式，然后下标法获取 console.log( oImgs[0] );

获取元素节点属性的属性值

获取属性的属性值 元素节点.属性名
示例

console.log( $("inp").placeholder );

设置属性的属性值 元素节点.属性名 = 新属性值
示例

$("inp").placeholder = "哈哈哈哈哈哈啊";

获取元素节点属性的属性值方法2

1.获取元素节点属性的属性值 元素节点.getAttribute("属性名")

console.log( $("inp").getAttribute("placeholder") );

2.设置元素节点属性的属性值 元素节点.setAttribute("属性名","新属性值");

$("inp").setAttribute("value","王小二"); // 特殊之处：可以获取设置自定义的属性的属性值 console.log( $("inp").my ); console.log( $("inp").getAttribute("my") ); console.log( $("inp").value );

3.移除属性 元素节点.removeAttribute("属性名")

$("inp").removeAttribute("value");

元素节点常用的属性

// 注意：！获取class的属性值需要根据className来获取 console.log( oDiv.className ); //更改class属性的属性值 oDiv.className = "mydiv"; console.log(oDiv.className); // innerHTML指的是该元素节点开始标签与结束标签之间的HTML代码。 console.log( oDiv.innerHTML ); // innerText指的是该元素开始标签与结束标签之间的文本。 console.log( oDiv.innerText ); // outerHTML指的是开始标签与结束标签再加上innerHTML console.log( oDiv.outerHTML ); //直接给innerHTML赋值（可以是一串html代码），既然外面有双引号，里面就要用单引号。 oDiv.innerHTML = "男女未知";

获取样式表中的属性 1、获取行间样式表的属性

语法：元素节点.style.属性名

console.log( $("box").style.width ); console.log( $("box").style );

2、设置行间样式表的属性的属性值

语法：元素节点.style.属性名 = 属性值。
类似与background-color --> backgroundColor
font-size-->fontSize

$("box").style.backgroundColor = "green"; $("box").style.color = "red"; $("box").style.fontSize = "40px"; //必须带单位

练习
点击按钮改变div的背景色。背景色随机。

function changebg(){ $("box").style.backgroundColor = randomColor(); }

获取设置内部样式表的属性的属性值

内部样式表、外部样式表与行间样式表在获取属性的属性值上不同，但是设置属性的属性值是一样的。

1、设置样式表中属性的属性值:元素节点.style.属性名 = 新的属性值。

var oDiv = $("box"); console.log(oDiv); //对与单标签的innerHTML不可用,例如input标签 // console.log( $("inp").innerHTML ); // $("inp").innerHTML = ""; oDiv.style.width = "100%";

2、获取内部样式表中属性的属性值

IE专用 元素节点.currentStyle["属性名"]
元素节点.currentStyle 在ie获取最终应用元素节点上的所有样式。

console.log( oDiv.currentStyle["height"] ); console.log( oDiv.currentStyle ); console.log( oDiv.currentStyle.length );

所有的浏览器伪类
传两个参数：第一个参数：元素节点；第二个参数：伪类（如果没有的话，就打印空，即null）

console.log( window.getComputedStyle(oDiv,null) ); //最终应用在div上的所有的样式 console.log( window.getComputedStyle(oDiv,null).length ); console.log( window.getComputedStyle(oDiv,null)["background-color"]); //获取某个指定的属性的属性值

DOM中的知识没有总结完，太恶心了，换换脑筋吧，总结一下DOM。英文、汉语、大写、小写之间的转换真的很麻烦 BOM相关知识 window 的6个官方制定的对象属性： window.document HTML文档 window.frames 框架 window.location 地址栏 1、Window.location.href:通过修改location的href属性，从而实现页面的跳转。eg:window.location.href="file:///C:/Users/Administrator/Desktop/1613/day8--BOM/4.html";
2、reload()不传参数带缓存的刷新，里面传参数，不带缓存的刷新。eg:window.location.reload(true);
window.history 历史记录 1、window.history.length 获取记录的条数（通过修改location.href的属性值来进行页面跳转是会增加记录的）
2、window.history.back() 回到记录中的上一条
3、window.history.forward() 回到记录中的下一条
4、window.history.go(-3) 跳转到指定的记录，里面可以传正数，也可以传负数。正数：往后面找，负数：往前面找
window.navigator浏览器的厂商信息 1、window.navigator.userAgent 浏览器之间是通过userAgent（用户代理）区分的（如果发现有chrome这个字符串，说明是chrome浏览器，由此判断浏览器的型号。firefox IE同理）
示例

if(window.navigator.userAgent.toLowerCase().indexOf("chrome")!=-1){ alert("谷歌浏览器"); } if (window.navigator.userAgent.toLowerCase().indexOf("firefox")!=-1) { alert("火狐"); } if (window.navigator.userAgent.toLowerCase().indexOf("msie")!=-1) { alert("IE"); }

window.screen 用户设备的屏幕分辨率 BOM中常用的方法 1、window.open(url,"","描述新窗口特性的字符串")
注意
传三个参数：
参数一：url 即一个地址。
参数二：target：与框架有关，什么都不写，默认打开一个新窗口。
参数三：字符串：描述新窗口特性，注意：每一个属性之间是按照逗号隔开的
示例

window.open("5.history.html","","width=300px,height=500px,left=300px,top=0px");

2、window.close()关闭当前窗口
浏览器的事件

浏览器的行为：加载完成、卸载、滚动、缩放
事件 load 事件处理程序 onload
unload onunload(仅IE有效)卸载事件

1、window.onload页面加载完成
注意:
页面从上到下全部加载完成，才会触发onload事件，不需要调用这个函数，页面会自己调用
示例:

window.onload = function(){ alert("页面加载完成!"); }

2、window.onunload卸载
示例

window.onunload = function(){ alert("大王，你真的要离开臣妾了吗?"); }

3、window.onscroll滚动事件
示例

//浏览器的滚动事件 //scrollonscroll // 当拖动滚动条时会反复的触发scroll事件，会一直调用onscroll事件处理程序 window.onscroll = function(){ console.log("滚"); //获取高度用 document.documentElement.scrollTop(获取html的高度-->Element) 或者 document.body.scrollTop(获取body的高度) //例子：3||4的值是3，如果3可以的话，就不用4 var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; console.log( scrollTop ); }function goTop(){ document.documentElement.scrollTop = 0; document.body.scrollTop = 0; }

4、window.onresize缩放的时候触发resize ，事件处理程序是onresize
示例

window.onresize = function(){ console.log("我要变了"); //获取可视窗口的宽 //先分别打印这三个 console.log( document.documentElement.clientWidth ); console.log( document.body.clientWidth ); console.log( window.innerWidth ); //获取浏览器可视区域的宽度var w = document.documentElement.clientWidth||document.body.clientWidth||window.innerWidth; //获取可视窗口的高度 console.log( document.documentElement.clientHeight ); console.log( document.body.clientHeight ); console.log( window.innerHeight ); var h = document.documentElement.clientHeight||document.body.clientHeight||window.innerHeight; }

把获取可是窗口封装成函数如下

//获取滚动高度 function $top(){ return document.documentElement.scrollTop||document.body.scrollTop; } //获取可视窗口的宽 function $w(){ return document.documentElement.clientWidth||document.body.clientWidth||window.innerWidth; }//获取可视窗口的高 function $h(){ return document.documentElement.clientHeight||document.body.clientHeight||window.innerHeight; }

定时器间歇定时器：每隔固定的时间调用一次。

setInterval()
功能：创建一个间歇定时器
参数：参数1:函数名或者匿名函数参数2:时间（单位是毫秒，1000毫秒=1秒）
返回值：定时器的id. 可以根据该id停止定时器
var timer = setInterval(函数名/匿名函数,时间(毫秒))
clearInterval(id)停止指定的定时器

【DOM、BOM、事件知识总结】示例

var timer = setInterval(fun,2000); function fun(){ console.log("犯病！"); }function stop(){ clearInterval( timer ); }function goon(){ //将返回的定时器的id赋值给timer这个全局变量 timer = setInterval(fun,2000); }//js中只有创建定时器，停止定时器。没有继续定时器。

延时定时器：过固定的时间执行。（类似定时炸弹）