01.总结的javascript-DOM/BOM集合

javascript总结：

javascript 主要包括三个部分：1.DOM; 2.BOM; 3.ECMAscript

一.DOM（对象文档模型）
1.几个重要概念：
1）dom节点：元素，属性，文本，注释
2）dom节点树；document ---> html(root) ---> head ---> title...

2.获取dom节点方法
1） 获取dom元素节点方法
a. document.getElementById('id名称');
b. document.getElementsByTagName('元素名称'); //返回对象集合
c. document.getElementsByClassName('class名称'); //返回对象集合
d. document.getElementsByName('name名称'); //返回对象集合
e. document.querySelector('#id 或 .类名 或 元素名') //返回文档中匹配指定的CSS选择器的第一元素 ie8+支持
f. document.querySelectorAll() //返回匹配指定 CSS 选择器元素的所有子元素节点列表
2） 获取dom属性节点方法
a. element.getAttributeNode('属性名') //返回指定属性 节点
b. element.getAttribute('属性名') //返回指定属性 值
c. element.setAttribute('属性名','值') //设置或者改变指定属性并指定值
d. element.setAttributeNode('属性节点') //设置或者改变指定属性节点
e. element.attributes //返回一个元素的属性数组

3） 获取dom文本节点
a. element.textContent //设置或返回一个节点和它的文本内容
b. element.innerHTML = '设置的内容' //设置或者返回元素的内容

3.dom的遍历
1） dom的元素遍历
a. element.childNodes //返回某个元素的一个子节点的数组
b. element.parentNode //返回某个元素的父节点
c. element.firstChild //返回某个元素的第一个子节点
d. element.lastChild //返回某个元素的最后一个子节点
e. element.previousSibling //返回某个元素的上一个元素节点
f. element.nextSibling //返回某个元素的下一个元素节点
g. element.ownerDocument //返回元素的根元素（文档对象）

4.dom的 增 删 改 查 复制 替换
1） dom元素的操作
a. document.createElement('div(元素名)') //创建一个元素节点
b. element.appendChild('div(元素节点)') //为元素添加一个新的子元素
c. element.insertBefore('新节点','子节点') //现有的子元素之前插入一个新的子元素
d. element.removeChild('元素节点') //删除一个子元素 element删除节点的父节点 元素节点.parendNode;
e. element.replaceChild('新节点','替换的节点') //替换一个子元素 element替换节点的父节点 新节点.parendNode;
f. element.cloneNode(true) //克隆某个元素 element 是克隆的元素 true递归克隆

2） dom属性的操作
a. document.createAttribute('属性名') //创建一个属性节点
b. element.removeAttributeNode('属性节点') //删除指定属性节点并 返回移除后的节点
c. element.removeAttribute('属性名') //从元素中删除指定的属性
d. element.getAttributeNode('属性名') //返回指定属性 节点
e. element.getAttribute('属性名') //返回指定元素的属性 值
f. element.setAttributeNode('属性节点') //设置或者改变指定属性节点。
g. element.setAttribute('属性名','值') //设置或者改变指定属性并指定值
h. element.attributes //返回一个元素的属性数组
3） dom文本的操作
a. document.createTextNode() //创建一个文本节点
b. element.innerHTML='文本内容' //设置或者返回元素的内容

5.dom 样式操作
1) element.style.height(backgroundColor...) = 'css值' //设置或返回某个元素的css属性
2) element.style.cssText = ''
3) element.style.setProperty("width","200px","") //设置属性，第三个值为important优先值，可不写
4) element.style.removeProperty("width") //删除并返回css样式
5) element.style.length //返回css长度

6) element.classList.add('class1 class2 class3') //添加样式
7) element.classList.remove('class1 class2 ...') //删除样式

6.其它dom操作
1) domd的些判断
element.addEventListener('click',function(){},true) //向指定元素添加事件句柄
true表示指定事件是否在捕获或冒泡阶段执行。
removeEventListener()
element.hasAttribute('属性名') //如果元素中存在指定的属性返回 true，否则返回false
element.hasAttributes() //如果元素有任何属性返回true，否则返回false。
element.hasChildNodes() //返回一个元素是否具有任何子元素
element.hasfocus() //返回布尔值，检测文档或元素是否获取焦点
element.id='值' //设置或者返回元素的 id
element1.isEqualNode(element2) //检查两个元素是否相等 e1 ?= e2;
element.isSupported() //如果在元素中支持指定特征返回 true
element.toString() //一个元素转换成字符串

2）获取节点类型
element.nodeName //返回元素的标记名（大写）
element.nodeType //返回节点类型 1：元素，2：属性，3：文本,8：注释，9：整个文档
element.nodeValue //返回元素的节点值

document.forms //返回对文档中所有 Form 对象引用
document.body //返回文档的body元素
document.documentElement //返回文档的根节点
document.images //返回对文档中所有 Image 对象引用
document.open()
document.close()
document.cookie() //设置或返回与当前文档有关的所有 cookie

4） 获取dom中的高和宽
element.clientHeight //返回内容的可视高度（不包括边框，边距或滚动条）
element.clientWidth //返回内容的可视宽度（不包括边框，边距或滚动条）

element.offsetHeight //返回，任何一个元素的高度包括边框和填充，但不是边距
element.offsetWidth //返回元素的宽度，包括边框和填充，但不是边距
element.offsetLeft //返回当前元素的相对水平偏移位置的偏移容器
element.offsetTop //返回当前元素的相对垂直偏移位置的偏移容器
element.offsetParent //返回元素的偏移容器

element.scrollHeight //返回整个元素的高度（包括带滚动条的隐蔽的地方）
element.scrollLeft //返回当前视图中的实际元素的左边缘和左边缘之间的距离
element.scrollTop //返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离
element.scrollWidth //返回元素的整个宽度（包括带滚动条的隐蔽的地方）

nodelist.item(0) == nodelist[0] //返回某个元素基于文档树的索引
nodelist.length //返回节点列表的节点数目

7.常用dom事件：
1) 鼠标事件
onlick,ondbclick,
onmousedown,onmouseup
onmouseenter,onmouseleave
onmousemove
onmouseover,onmouseout
2) 常用 键盘事件
onkeydown,onkeyup,onkeypress
3) 框架/对象事件
onload,onresize,onscroll,
4) 表单事件
onchange,onfocus,onblur
oninput,onreset,onselect
onsubmit
5) 剪贴板事件
oncopy,oncut,onpaste
6) 拖动事件
ondrag //该事件在元素正在拖动时触发
ondragend //该事件在用户完成元素的拖动时触发
ondragenter //该事件在拖动的元素进入放置目标时触发
ondragleave //该事件在拖动元素离开放置目标时触发
ondragover //该事件在拖动元素在放置目标上时触发
ondragstart //该事件在用户开始拖动元素时触发
ondrop //该事件在拖动元素放置在目标区域时触发

7) 鼠标/键盘事件对象
clientX //返回当事件被触发时，鼠标指针的水平坐标。
clientY //返回当事件被触发时，鼠标指针的垂直坐标。
keyCode //返回onkeypress事件触发的键的值的字符代码

二.BOM（浏览器对象模型）
1.window 对象
1) window 对象属性

2) window 对象方法
alert() //显示带有一段消息和一个确认按钮的警告框
prompt() //显示可提示用户输入的对话框
setInterval() //按照指定的周期（以毫秒计）来调用函数或计算表达式
setTimeout() //在指定的毫秒数后调用函数或计算表达式
clearInterval() //取消由 setInterval() 设置的 timeout
clearTimeout() //取消由 setTimeout() 方法设置的 timeout
moveBy() //可相对窗口的当前坐标把它移动指定的像素
moveTo() //把窗口的左上角移动到一个指定的坐标
resizeBy() //按照指定的像素调整窗口的大小
resizeTo() //把窗口的大小调整到指定的宽度和高度
scrollBy() //按照指定的像素值来滚动内容
scrollTo() //把内容滚动到指定的坐标
close() //关闭浏览器窗口
open() //打开一个新的浏览器窗口或查找一个已命名的窗口
print() //打印当前窗口的内容
2.Navigator 对象 有关浏览器的信息。
3.Screen 对象 有关客户端显示屏幕的信息
screen.width //返回屏幕的总宽度
screen.height //返回屏幕的总高度
screen.availHeight //返回屏幕的高度（不包括Windows任务栏）
screen.availWidth //返回屏幕的宽度（不包括Windows任务栏）
screen.pixelDepth //返回屏幕的颜色分辨率（每象素的位数）
screen.colorDepth //返回目标设备或缓冲器上的调色板的比特深度
4.History 对象
history.length //返回在历史列表中的网址数量
window.history.back() //加载 history 列表中的前一个 URL
window.history.forward()//加载 history 列表中的下一个 URL
window.history.go(-2) //加载 history 列表中的某个具体页面
5.Location 对象
location.href='http://www.baidu.com' //返回完整的URL或设置url

浏览器对象模型BOM小结

 

概念

BOM (Browser Object Model) 浏览器对象模型

BOM提供了独立于内容而与浏览器窗口进行交互的对象

BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window

BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C,

BOM最初是Netscape浏览器标准的一部分；

window对象 是浏览器中的Global对象

窗口设置 (打开、大小、位置)

间歇调用与超时调用

对话框 (提示框、确认框、输入框)

location对象 (位置对象包含各种属性和方法)

navigator对象 用于提供用户浏览器的相关信息

screen对象 包含有关用户屏幕的信息

history对象 包含有关用户的访问历史记录

打开新窗口

window.open(URL,name,specs);

URL：打开页面的URL，没有指定URL将打开新的空白窗口

name：

_blank 新窗口打开，默认

_self 当前页面打开

name 窗口名称 ......

specs：一个逗号分隔的项目列表。支持以下值：

height=pixels 窗口的高度，最小值为100

width=pixels 窗口的宽度，最小值为100

left=pixels top=pixels ......

示例 window.open('','','width=200,height=200');

关闭窗口

window.close() 方法用于关闭浏览器窗口

(DOM window对象的方法)

close() 方法将关闭有 window 指定的顶层浏览器窗口。

某个窗口可以通过调用 self.close() 或只调用 close() 来关闭其自身。

只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭。

这阻止了恶意的脚本终止用户的浏览器。

窗口大小

调整窗口大小 window.resizeTo(width,height);

调整窗口大小 window.resizeBy(width,height);

窗口位置

window.screenLeft属性返回窗口相对于屏幕的X坐标

window.screenTop属性返回窗口相对于屏幕的Y坐标

window.screenX属性返回窗口相对于屏幕的X坐标

window.screenY属性返回窗口相对于屏幕的Y坐标

窗口可视区尺寸

document.documentElement.clientWidth //offset 获取的是整个文档的高度

document.body.clientWidth

document.documentElement.clientHeight

document.body.clientHeight

窗口垂直滚动条

document.body.scrollTop

document.documentElement.scrollTop

间歇调用

setInterval ( 函数/名称 , 毫秒数 )

表示每经过一定的毫秒后，执行一次相应的函数(重复)

超时调用

setTimeout ( 函数/名称 , 毫秒数 )

表示经过一定的毫秒后，只执行一次相应的函数(不重复)

清除计时器：clearInterval( ); clearTimeout( );

提示框 alert (“ ”);

用户必须先关闭该消息框然后才能继续进行操作

确认框 confirm(“ ”);

confirm(“需要确认的内容”);

选择“确定”返回true 选择“取消”返回false

输入框 prompt(“ ”,“ ”);

prompt(“对话框中显示的文本”,"默认的输入文本");

单击取消按钮，则返回 null 单击确认按钮，则返回输入的文本

location对象 包含有关当前页面的URL信息

属性：

host 设置或返回主机名和当前 URL 的端口号。

port 设置或返回当前 URL 的端口号。

href 设置或返回完整的 URL。 ……

方法：

assign() 加载新的文档。

reload() 重新加载当前文档。

replace() 用新的文档替换当前文档。

navigator对象部分属性

appCodeName 返回浏览器的代码名。

appName 返回浏览器的名称。

cookieEnabled 返回指明浏览器中是否启用cookie的布尔值。

platform 返回运行浏览器的操作系统平台。

appVersion 返回浏览器的平台和版本信息。

userAgent 返回由客户机发送服务器的user-agent头部的值。

用户浏览器识别码

var str=window.navigator.userAgent;

var str=window.navigator.appVersion;

大小写转换

str.toLowerLocalCase( ); 转换成小写

str.toUpperLocalCase( ); 转换成大写

indexOf( )方法

可返回某个指定的字符串值在字符串中首次出现的位置

语法：string.indexOf(str,index);

参数：str-------规定需检索的字符串值

index----规定在字符串中开始检索的位置

注意：indexOf( ) 方法对大小写敏感 如果要检索的字符串值没有出现，则该方法返回 -1

screen 对象包含有关客户端显示屏幕的信息

width 返回显示器屏幕的宽度。

height 返回显示器屏幕的高度。

availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。

availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。

history 对象包含用户在浏览器中访问过的URL

length 返回浏览器历史列表中的 URL 数量。

back() 加载 history 列表中的前一个 URL。

forward() 加载 history 列表中的下一个 URL。

go() 加载 history 列表中的某个具体页面。

history.go(-1) 后退一页

history.go(1) 前进一页

http://www.cnblogs.com/paulirish/ 大家可以去这个博客看一下，里面有操作代码