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();
}
获取设置内部样式表的属性的属性值
- 内部样式表、外部样式表 与 行间样式表 在获取属性的属性值上不同，但是设置属性的属性值是一样的。
元素节点.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()关闭当前窗口浏览器的事件
浏览器的行为：加载完成、卸载、滚动、缩放1、
事件 load 事件处理程序 onload
unload onunload(仅IE有效)卸载事件
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)停止指定的定时器
var timer = setInterval(fun,2000);
function fun(){
console.log("犯病！");
}function stop(){
clearInterval( timer );
}function goon(){
//将返回的定时器的id赋值给timer这个全局变量
timer = setInterval(fun,2000);
}//js中只有创建定时器，停止定时器。没有继续定时器。
延时定时器：过固定的时间执行。（类似定时炸弹）
- setTimeout(函数名/匿名函数,时间)
- 功能：创建一个延时定时器。
- 参数：参数1 函数名或者匿名函数 参数2时间
- 返回值：定时器的id. 可以根据该id停止定时器
-
clearTimout(id)功能：停止延迟定时器
var timer2 = setTimeout(fun2,5000);
function fun2(){
console.log("爆炸！");
}function stopBoom(){
clearTimeout( timer2 );
}
推荐阅读
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- Shell-Bash变量与运算符
- 清明，是追思、是传承、是感恩。
- 牛人进化+|牛人进化+ 按自己的意愿过一生
- 七老修复好敏感、角质层薄、红血丝
- 华为旁！大社区、地铁新盘，佳兆业城市广场五期！
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 螃蟹和这些食物同吃，轻则腹泻、重则中毒！要小心哦~
- 八、「料理风云」