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滚动事件

示例

//浏览器的滚动事件
//scroll  onscroll
// 当拖动滚动条时会反复的触发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 );
}