【JS DOM(文档对象模型)与BOM(浏览器对象模型)】在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容。DOM主要包括HTML文档的属性和方法,像对HTML节点的操作,CSS的操作和HTML事件的监听和处理。BOM不要包括浏览器相关的一些属性和方法。
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).getAttribute(attribute)
document.getElementById(id).setAttribute(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;
document.getElementById(id).getComputedStyle;
//获取当前样式,IE9以下不支持,返回null,IE9以下需要使用currentStyle方法。
3、对页面元素事件的监听和处理
常用的事件:
onload:当文档加载时运行脚本
onblur:当窗口失去焦点时运行脚本
onfocus:当窗口获得焦点时运行脚本
onchange:当元素改变时运行脚本
onsubmit:当提交表单时运行脚本
onkeydown:当按下按键时运行脚本
onkeypress:当按下并松开按键时运行脚本
onkeyup:当松开按键时运行脚本
onclick:当单击鼠标时运行脚本
ondblclick:当双击鼠标时运行脚本
onmousedown:当按下鼠标按钮时运行脚本
onmousemove:当鼠标指针移动时运行脚本
onmouseout:当鼠标指针移出元素时运行脚本
onmouseover:当鼠标指针移至元素之上时运行脚本
onmouseup:当松开鼠标按钮时运行脚本
onabort:当发生中止事件时运行脚本
BOM知识点
a、窗口
window.open():打开新窗口
window.close():关闭当前窗口
window.moveTo():移动当前窗口
window.resizeTo():调整当前窗口的尺寸
b、窗口的内部高度和宽度
标准浏览器:
window.innerHeight
window.innerWidth
对于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight 或者 document.body.clientHeight
document.documentElement.clientWidth 或者 document.body.clientWidth
c、屏幕对象
screen.availWidth:可用的屏幕宽度
screen.availHeight:可用的屏幕高度
d、地址栏对象
location.hostname:web 主机的域名
location.pathname:当前页面的路径和文件名
location.port:主机的端口 (80 或 443)
location.protocol:所使用的 web 协议(http:// 或 https://)
history.back():与在浏览器点击后退按钮相同
history.forward():与在浏览器中点击按钮向前相同
e、浏览器自带的信息
navigator.appVersion:浏览器版本
navigator.platform:浏览器平台
navigator.userAgent:浏览器User-agent headerf、计时器相关的
setInterval()和clearInterval 间隔几秒循环执行/清除定时器
setTimeout 和 clearTimeout() 间隔几秒执行(单次)/清除定时器
推荐阅读
- 操作系统|[译]从内部了解现代浏览器(1)
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- javascript|vue使用js-xlsx导出excel,可修改格子样式,例如背景颜色、字体大小、列宽等
- javascript|javascript中的数据类型转换