js之 DOM与BOM
JavaScript HTML DOM (文档对象模型)(Document Object Model)
什么是DOM?
DOM是W3C标准。
DOM定义了访问文档的标准:
“W3C文档对象模型(DOM)是一个平台和语言中立的接口,允许程序和脚本动态访问和更新文档的内容,结构和样式。”
W3C DOM标准分为3个不同的部分:
- 核心DOM - 所有文档类型的标准模型
- XML DOM - XML文档的标准模型
- HTML DOM - HTML文档的标准模型
什么是HTML DOM?
HTML DOM是HTML的标准对象模型和 编程接口。它定义了:
- HTML元素作为对象
- 所有HTML元素 的属性
- 访问所有HTML元素的方法
- 所有HTML元素的事件
换句话说:HTML DOM是如何获取,更改,添加或删除HTML元素的标准。
使用对象模型,JavaScript可以获得创建动态HTML所需的全部功能:
- JavaScript可以更改页面中的所有HTML元素
- JavaScript可以更改页面中的所有HTML属性
- JavaScript可以更改页面中的所有CSS样式
- JavaScript可以删除现有的HTML元素和属性
- JavaScript可以添加新的HTML元素和属性
- JavaScript可以对页面中的所有现有HTML事件做出反应
- JavaScript可以在页面中创建新的HTML事件
JavaScript HTML DOM 方法
1、改变页面的元素和属性
a、获取元素的方法:
document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()
b、js输出HTML内容
document.write();
c、获取和修改元素的内容:
document.getElementById(id).innerHTML
document.getElementById(id).innerHTML=new HTML;
d、获取和修改元素的属性值:
document.getElementById(id).attribute
document.getElementById(id).attribute=new value;
e、添加html标签:document.createElement
f、添加html文本内容:document.createTextNode
g、追加元素:document.appendChild();
h、从父元素中删除子元素:parent.removeChild(child)
2、改变页面元素的样式
a、修改css样式:
document.getElementById(id).style.property
document.getElementById(id).style.property=new style;
3、对页面元素事件的监听和处理
常用的事件:
onload:当文档加载时运行脚本
onblur:当窗口失去焦点时运行脚本
onfocus:当窗口获得焦点时运行脚本
onchange:当元素改变时运行脚本
onsubmit:当提交表单时运行脚本
onkeydown:当按下按键时运行脚本
onkeypress:当按下并松开按键时运行脚本
onkeyup:当松开按键时运行脚本
onclick:当单击鼠标时运行脚本
ondblclick:当双击鼠标时运行脚本
onmousedown:当按下鼠标按钮时运行脚本
onmousemove:当鼠标指针移动时运行脚本
onmouseout:当鼠标指针移出元素时运行脚本
onmouseover:当鼠标指针移至元素之上时运行脚本
onmouseup:当松开鼠标按钮时运行脚本
onabort:当发生中止事件时运行脚本
事件监听:
addEventListener()
removeEventListener()
JavaScript BOM(浏览器对象模型)(Browser Object Model)
浏览器对象模型(BOM)以 window 对象为依托,表示浏览器窗口以及页面可见区域。同时, window
对象还是 ECMAScript 中的 Global 对象,因而所有全局变量和函数都是它的属性,且所有原生的构造
函数及其他函数也都存在于它的命名空间下
window对象
html DOM 也是window的属性
- window.innerHeight - 浏览器窗口的内部高度(以像素为单位)
- window.innerWidth - 浏览器窗口的内部宽度(以像素为单位)
- window.open() - 打开一个新窗口
- window.close() - 关闭当前窗口
- window.moveTo() - 移动当前窗口
- window.resizeTo() - 表示当前窗口
Screen:
- screen.width 返回访问者屏幕的宽度
- screen.height 属性返回访问者屏幕的高度
- screen.availWidth 返回访问者屏幕的宽度,减去Windows任务栏等界面功能
- screen.availHeight返回访问者屏幕的高度,减去Windows任务栏等界面功能
- screen.colorDepth返回用于显示一种颜色的位数
- screen.pixelDepth属性返回屏幕的像素深度
location:
- window.location.href返回当前页面的href(URL)
- window.location.hostname返回Web主机的域名
- window.location.pathname返回当前页面的路径和文件名
- window.location.protocol返回使用的Web协议(http://或https://)
- window.location.assign加载一个新文档
history:
- history.back() - 与在浏览器中单击返回相同
- history.forward() - 与在浏览器中单击向前相同
navigator:
- navigator.appName返回浏览器的名称
- navigator.appCodeName返回浏览器的名称
- navigator.platform返回浏览器平台(操作系统)
- navigator.cookieEnabled 导航器cookie是否已启用
- navigator.product返回浏览器的引擎名称
- navigator.appVersion返回有关浏览器的版本信息
- navigator.userAgent返回有关浏览器的版本信息
- navigator.language返回浏览器的语言
- navigator.javaEnabled()java是否启用了
popup alert:
- window.confirm()确认框
- window.prompt()提示框
- window.alert()警告框
Timing:
setTimeout(函数,时间) 只执行一次
setInterval(函数,时间) 无限执行
clearTimeout(定时器名称) 清除定时器