JS小知识大课堂

BOM概念
什么是BOM？
BOM是Browser Object Model的缩写，简称浏览器对象模型。这个对象就是window
BOM提供了独立于内容而与浏览器窗口进行交互的对象
BOM主要用于管理窗口与窗口之间的通讯，其核心对象是window。
什么是BOM？
BOM是Browser Object Model的缩写，简称浏览器对象模型。这个对象就是window
BOM提供了独立于内容而与浏览器窗口进行交互的对象
BOM主要用于管理窗口与窗口之间的通讯，其核心对象是window。
window对象是js中全局对象的寄存地。
window对象的常见方法：
alert(要显示的文本); //弹出信息框
prompt(提示对话框信息); //弹出输入框，点击确定，返回字符串，点击取消，返回null
confirm(提示文字); //点击确定返回true，点击取消返回false
close( ); //关闭浏览器（火狐不支持！），但都支持通过别的网页打开的新的网页关闭
//不允许关闭非脚本打开的页面
open(url,name,feature,replace);
//open(‘http://www.baidu.com’,’_blank’,‘width=300,height=300’)
//谷歌会默认把系统自动打开的新网页阻止掉，但不阻止通过事件打开的网页
window对象下内置的子对象：
1.history对象：该对象包含浏览器访问过的url。
该对象的属性：
history.length; //返回历史记录的数量
该对象的方法：
history.back(); //后退，加载前一个url。
history.forward(); //前进，需要后退一下之后，才有前进的方向
history.go(num); //参数为正，前进相应的数目，为负，后退相应的数目，为0，刷新
2.location对象：包含当前url的相关信息，而history对象不能具体反映url的相关信息。
该对象的属性：
location.href; //设置或返回完整的url
location.search; //返回url?后面的查询部分
location.hash; //是一个可读写的字符串，是url的锚部分（从#开始的部分）哈希
该对象的方法：
location.reload(); //刷新页面的方法，一般情况下，传递一个true，不使用缓存刷新。缓存？
location.assign(url); //加载新页面，当url为空字符时，加载当前页面
3.navigator对象：浏览器信息
navigator.appName; //返回当前浏览器名
navigator.appCodeName; //返回当前浏览器的代码名
navigator.appVersion; //返回当前浏览器的版本号和平台
navigator.platform; //返回当前计算机的操作系统
4.frames对象：包含当前页面所有的框架信息。
frames.length; //返回当前页面的框架数量
frames[0].location; //修改第一个框架的地址
5.screen对象：包含当前显示屏信息
screen.width/height //屏幕总宽高度
screen.availWidth/availHeight //屏幕的宽高（不包括任务栏）
window对象介绍，内置对象（location／history／navigator）及方法
window对象是js中全局对象的寄存地。
window对象的常见方法：
alert(要显示的文本); //弹出信息框
prompt(提示对话框信息); //弹出输入框，点击确定，返回字符串，点击取消，返回null
confirm(提示文字); //点击确定返回true，点击取消返回false
close( ); //关闭浏览器（火狐不支持！），但都支持通过别的网页打开的新的网页关闭
//不允许关闭非脚本打开的页面
open(url,name,feature,replace);
//open(‘http://www.baidu.com’,’_blank’,‘width=300,height=300’)
//谷歌会默认把系统自动打开的新网页阻止掉，但不阻止通过事件打开的网页
window对象下内置的子对象：
1.history对象：该对象包含浏览器访问过的url。
该对象的属性：
history.length; //返回历史记录的数量
该对象的方法：
history.back(); //后退，加载前一个url。
history.forward(); //前进，需要后退一下之后，才有前进的方向
history.go(num); //参数为正，前进相应的数目，为负，后退相应的数目，为0，刷新
2.location对象：包含当前url的相关信息，而history对象不能具体反映url的相关信息。
该对象的属性：
location.href; //设置或返回完整的url
location.search; //返回url?后面的查询部分
location.hash; //是一个可读写的字符串，是url的锚部分（从#开始的部分）哈希
该对象的方法：
location.reload(); //刷新页面的方法，一般情况下，传递一个true，不使用缓存刷新。缓存？
location.assign(url); //加载新页面，当url为空字符时，加载当前页面
3.navigator对象：浏览器信息
navigator.appName; //返回当前浏览器名
navigator.appCodeName; //返回当前浏览器的代码名
navigator.appVersion; //返回当前浏览器的版本号和平台
navigator.platform; //返回当前计算机的操作系统
4.frames对象：包含当前页面所有的框架信息。
frames.length; //返回当前页面的框架数量
frames[0].location; //修改第一个框架的地址
5.screen对象：包含当前显示屏信息
screen.width/height //屏幕总宽高度
screen.availWidth/availHeight //屏幕的宽高（不包括任务栏）
定时器
延时器：
setTimeout(function(){
console.log(1); //1000毫秒后，打印1
},100)
语法：
setTimeout(函数或者代码串，指定的时间(毫秒));
在指定的毫秒数后只执行一次函数或代码。
清除延迟器：
clearTimeout();
定时器：
setInterval(function(){
console.log(1); //每隔1000毫秒，打印一次1
},100)
语法：
setInterval(函数或者代码串，指定的时间(毫秒));
按照指定的周期(毫秒)不断的执行函数或者是代码串。
表示每隔指定的时间，执行一次函数
清除定时器：
clearInterval();
.window.onload / onscroll／onresize 事件
onload当文档加载完成后执行一些操作
window.onload = function(){
console.log(“页面加载完成”)
}
onscroll当页面发生滚动时执行一些操作
window.onload = function(){
console.log(1) //当页面发生滚动时，打印1
}
onresize当窗口大小发生改变时执行一些操作
window.onresize = function(){
console.log(1) //当窗口大小发生改变时，打印1
}
页面滚动条距离顶部的距离
document.documentElement.scrollTop
页面滚动条距离左边的距离
document.documentElement.scrollLeft
定时器
延时器：
setTimeout(function(){
console.log(1); //1000毫秒后，打印1
},100)
语法：
setTimeout(函数或者代码串，指定的时间(毫秒));
在指定的毫秒数后只执行一次函数或代码。
清除延迟器：
clearTimeout();
定时器：
setInterval(function(){
console.log(1); //每隔1000毫秒，打印一次1
},100)
语法：
setInterval(函数或者代码串，指定的时间(毫秒));
按照指定的周期(毫秒)不断的执行函数或者是代码串。
表示每隔指定的时间，执行一次函数
清除定时器：
clearInterval();
.window.onload / onscroll／onresize 事件
onload当文档加载完成后执行一些操作
window.onload = function(){
console.log(“页面加载完成”)
}
onscroll当页面发生滚动时执行一些操作
window.onload = function(){
console.log(1) //当页面发生滚动时，打印1
}
onresize当窗口大小发生改变时执行一些操作
window.onresize = function(){
console.log(1) //当窗口大小发生改变时，打印1
}
页面滚动条距离顶部的距离
document.documentElement.scrollTop
页面滚动条距离左边的距离
document.documentElement.scrollLeft
DOM
DOM把网页和脚本以及其他的编程语言联系了起来
DOM是以家族的形式描述HTML。父子节点，兄弟节点
DOM中的选择器
1.getElementById(id) //获取指定元素的ID元素
2.getElementsByTagName() //获取相同元素的节点列表，通过标签名选择元素，返回值是一个数组
3.getElementsByName() //通过name值获取元素，返回值是数组，通常用来获取有name的input的值
4.getElementsByClassName() //通过class名获取元素，返回值是数组n
注意：1.不是所有标签都有name值；2.在低版本的浏览器中，getElementsByName和getElementsByClassName有兼容性
ES5选择器：
JS缺德定律：好用的东西都有兼容性
document.querySelectorAll(); //强大到超乎想象，支持IE8+。ECMAScript借鉴了jQuery选择器的
//返回一个数组，哪怕只有一个元素
document.querySelector();
//返回单个元素
根据父级，选择子级：
oDiv.children; //返回一个数组
根据子级，选择父级：
oSpan.parentNode; //返回一个元素
DOM属性的基本操作（增／删／改／查）
改变元素的内容(innerHTML)，属性(value)，样式(width,height,background)
内置属性可以直接通过点".“进行操作
tagName //返回值是当前元素的标签名
innerHTML／innerText //返回值是当前元素的内容
id //返回值是当前元素的ID
title //获取title的标签值，这个title是从document中获取的
className //返回值是当前元素的class
href //返回值是当前的href的值
以上这些属性既可以获取，也可以设置
非内置属性需要通过一些节点的方法进行操作
注意：节点的方法，前缀一定是节点
getAttribute() //获取 元素的属性
setAttribute() //设置／修改 元素的属性，低版本的IE不兼容;接收两个参数，属性名和属性值
removeAttribute() //删除 元素的属性，低版本的IE不兼容
节点
HTML文档中的每个成分都是一个节点。
整个文档是一个文档节点
每个HTML标签是一个元素节点
包含在HTML元素中的文本是文本节点
每一个HTML属性是一个属性节点
注释属于注释节点
如何获取DOM节点：
对象.parentNode //获得父元素节点
对象.children //获得子元素节点的集合，不包含空白节点
//但IE7包含首个注释节点(前面没有元素节点)，IE8包含所有注释节点
对象.childNodes //获得所有子节点的集合，包括空白节点
//IE7/8不包含空文本节点，但IE7包含首个注释节点(前面没有元素节点)，IE8包含所有注释节点
如何获取属性节点：
对象.attributes //获得所有属性节点，返回一个数组
childNodes／过滤空白节点
节点属性 nodeType 返回值为数值
节点类型(nodeType) 节点名字(nodeName) 节点值(nodeValue)
元素节点 1 标签名 null
文本节点 3 #text 文本
注释节点 8 #comment 注释的文字
文档节点 9 #document null
属性节点 2 属性名 属性值
高级选取firstChild／lastChild／parentNode／previousSibling／nextSibling
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟）。
对象.childNodes //获取当前元素节点的所有子节点
对象.ownerDocument //获取该节点的文档根节点，相当与 document
对象.firstChild //获得第一个子节点。（IE7/8非空白节点，可能是注释节点）
对象.firstElementChild //获得第一个非空白的子节点。（IE7/8不支持）
对象.lastChild //获得最后一个子节点（IE7最后一个元素节点，IE8最后一个非空白节点，可能是注释节点）
对象.lastElementChild //获得最后一个非空白的子节点。（IE7/8不支持）
对象.nextSibling //获得下一个兄弟节点。（包含空白节点和注释，IE7/8包括注释节点，不包括空白节点）
对象.nextElementSibling //获得下个兄弟节点。（IE7/8不支持）
对象.previousSibling //获得上一个兄弟节点。（包含空白节点和注释。IE7/8包括注释节点，不包括空白节点）
对象.prveiousElementSibling //获得上一个兄弟节点。（IE7/8不支持）
缺点：兼容性不好
DOM元素的基本操作（增／删／改／查）
查询：选择器；
创建：createElement() 配合 appendChild() 将创建好的元素，插入到某个标签内的最后
删除：removeChild() 配合 parentNode
元素.remove() 直接删除当前元素
document.body.removeChild(div)；
修改: outerHTML
oh1.outerHTML = “” + oh1.innerHTML +”"
补充：创建文本节点createTextNode(“hello”)
使用方式同createElement()
.获取非行内样式（兼容问题）
function getStyle(obj,attr){ //获取非行间样式，obj是对象，attr是值
if(obj.currentStyle){ //针对ie获取非行间样式
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr]; //针对非ie
};
};
offsetWidth／offsetHeight／offsetLeft／offsetTop
offsetParent：获取元素的最近的具有定位属性（absolute或者relative）的父级元素。如果都没有则返回body
offsetLeft：获取元素相对具有定位属性的父级元素的左侧偏移距离
offsetTop：获取元素相对就有定位属性的父级元素的顶部偏移距离
scrollLeft/scrollTop：滚动条最顶端和窗口中可见内容的最顶端之间的距离
clientWidth/clientHeight：元素视窗宽度/高度
offsetWidth/offsetHeight：元素实际宽度/高度
DOM
DOM把网页和脚本以及其他的编程语言联系了起来
DOM是以家族的形式描述HTML。父子节点，兄弟节点
DOM中的选择器
1.getElementById(id) //获取指定元素的ID元素
2.getElementsByTagName() //获取相同元素的节点列表，通过标签名选择元素，返回值是一个数组
3.getElementsByName() //通过name值获取元素，返回值是数组，通常用来获取有name的input的值
4.getElementsByClassName() //通过class名获取元素，返回值是数组n
注意：1.不是所有标签都有name值；2.在低版本的浏览器中，getElementsByName和getElementsByClassName有兼容性
ES5选择器：
JS缺德定律：好用的东西都有兼容性
document.querySelectorAll(); //强大到超乎想象，支持IE8+。ECMAScript借鉴了jQuery选择器的
//返回一个数组，哪怕只有一个元素
document.querySelector();
//返回单个元素
根据父级，选择子级：
oDiv.children; //返回一个数组
根据子级，选择父级：
oSpan.parentNode; //返回一个元素
DOM属性的基本操作（增／删／改／查）
改变元素的内容(innerHTML)，属性(value)，样式(width,height,background)
内置属性可以直接通过点".“进行操作
tagName //返回值是当前元素的标签名
innerHTML／innerText //返回值是当前元素的内容
id //返回值是当前元素的ID
title //获取title的标签值，这个title是从document中获取的
className //返回值是当前元素的class
href //返回值是当前的href的值
以上这些属性既可以获取，也可以设置
非内置属性需要通过一些节点的方法进行操作
注意：节点的方法，前缀一定是节点
getAttribute() //获取 元素的属性
setAttribute() //设置／修改 元素的属性，低版本的IE不兼容;接收两个参数，属性名和属性值
removeAttribute() //删除 元素的属性，低版本的IE不兼容
节点
HTML文档中的每个成分都是一个节点。
整个文档是一个文档节点
每个HTML标签是一个元素节点
包含在HTML元素中的文本是文本节点
每一个HTML属性是一个属性节点
注释属于注释节点
如何获取DOM节点：
对象.parentNode //获得父元素节点
对象.children //获得子元素节点的集合，不包含空白节点
//但IE7包含首个注释节点(前面没有元素节点)，IE8包含所有注释节点
对象.childNodes //获得所有子节点的集合，包括空白节点
//IE7/8不包含空文本节点，但IE7包含首个注释节点(前面没有元素节点)，IE8包含所有注释节点
如何获取属性节点：
对象.attributes //获得所有属性节点，返回一个数组
childNodes／过滤空白节点
节点属性 nodeType 返回值为数值
节点类型(nodeType) 节点名字(nodeName) 节点值(nodeValue)
元素节点 1 标签名 null
文本节点 3 #text 文本
注释节点 8 #comment 注释的文字
文档节点 9 #document null
属性节点 2 属性名 属性值
高级选取firstChild／lastChild／parentNode／previousSibling／nextSibling
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟）。
对象.childNodes //获取当前元素节点的所有子节点
对象.ownerDocument //获取该节点的文档根节点，相当与 document
对象.firstChild //获得第一个子节点。（IE7/8非空白节点，可能是注释节点）
对象.firstElementChild //获得第一个非空白的子节点。（IE7/8不支持）
对象.lastChild //获得最后一个子节点（IE7最后一个元素节点，IE8最后一个非空白节点，可能是注释节点）
对象.lastElementChild //获得最后一个非空白的子节点。（IE7/8不支持）
对象.nextSibling //获得下一个兄弟节点。（包含空白节点和注释，IE7/8包括注释节点，不包括空白节点）
对象.nextElementSibling //获得下个兄弟节点。（IE7/8不支持）
对象.previousSibling //获得上一个兄弟节点。（包含空白节点和注释。IE7/8包括注释节点，不包括空白节点）
对象.prveiousElementSibling //获得上一个兄弟节点。（IE7/8不支持）
缺点：兼容性不好
DOM元素的基本操作（增／删／改／查）
查询：选择器；
创建：createElement() 配合 appendChild() 将创建好的元素，插入到某个标签内的最后
删除：removeChild() 配合 parentNode
元素.remove() 直接删除当前元素
document.body.removeChild(div)；
修改: outerHTML
oh1.outerHTML = “

” + oh1.innerHTML +”

"
补充：创建文本节点createTextNode(“hello”)
使用方式同createElement()
.获取非行内样式（兼容问题）
function getStyle(obj,attr){ //获取非行间样式，obj是对象，attr是值
if(obj.currentStyle){ //针对ie获取非行间样式
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr]; //针对非ie
};
};
offsetWidth／offsetHeight／offsetLeft／offsetTop
offsetParent：获取元素的最近的具有定位属性（absolute或者relative）的父级元素。如果都没有则返回body
offsetLeft：获取元素相对具有定位属性的父级元素的左侧偏移距离
offsetTop：获取元素相对就有定位属性的父级元素的顶部偏移距离
scrollLeft/scrollTop：滚动条最顶端和窗口中可见内容的最顶端之间的距离
clientWidth/clientHeight：元素视窗宽度/高度
offsetWidth/offsetHeight：元素实际宽度/高度