1.BOM
BOM:(Browser Object Model)是浏览器对象模型,浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构,BOM由多个对象构成,其中代表浏览器窗口的window对象是BOM的顶层对象,其他对象都是该对象的子对象。
1、windows对象
浏览器窗口信息,除了BOM外,window对象是所有浏览器的父对象
常用方法和属性:
window.innerHeight:浏览器窗口内部高度
window.open():打开新窗口
window.resizeTo():调整窗口大小
window.comfirm(text):弹出一个确认对话框。如果单击“确定按钮”返回true,如果单击“取* * 消”返回false。 text:要显示的纯文本
prompt([text],[defaulttext]):弹出一个输入对话框。
alert():弹出一个警告对话框。
延时器:window.setTimeout(“code”,1000);// code一般是一个函数,但是放在双引号下,1000ms
返回值是延时器的id,给clearTimeout使用
2、navigator对象
浏览器相关信息
常用属性:
navigator.appName:浏览器名称
navigator:appVersion:浏览器版本
navigator.language:浏览器语言
navigator.platform:操作系统类型
navigator.userAgent:浏览器UA头
3、screen对象
显示浏览器的显示器相关信息
常用属性:
screen.width:屏幕宽度,单位px
screen.height:屏幕高度,单位px
screen.colorDepth:颜色位深度
availWidth:屏幕的有效宽度,不含任务栏。只读属性。
availHeight:屏幕的有效高度,不含任务栏。只读属性。
4、location对象
浏览器当前网页的URL信息
常用方法和属性:
location.hash:URL包含的哈希值
location.host:主机名
location.port:端口号
location.pathname:页面路径
location.search:GET请求参数
location.protocol:协议类型
location.assign():加载新页面
location.reload():重新加载当前页面
location.replace():加载新页面替换当前
5、document对象
浏览器当前网页内容信息
常用方法和属性:
document.cookie:返回当前文档的cookie
document.URL:返回文档的URL
document.title:返回文档的标题
document.getElementById():返回匹配到的id的第一个元素
document.getElementByName():返回匹配到的名字的元素集合
document.open():打开流,接受write()输出
document.write():向文档写入
6、history对象
浏览器的历史浏览记录信息
常用方法和属性
history.length:返回浏览器历史记录数
history.back():加载前一个URL
history.forwrd():加载下一个URL
history.go():加载指定URL
2.DOM
DOM(Document Object Model):文档对象模型,本质上就是一套API,把HTML内容变成一棵树,方便操纵.
在DOM构造的树中,节点主要有三种类型
- 元素节点:一般是一对标签的元素整体
- 文本节点:标签内的文本部分
- 属性节点:标签的属性值
DOM的使用:
找到节点,进行操作:节点名.方法名/属性名()
1.选择节点
document对象控制整个文档,通常情况下直接通过它进行DOM操作
//单个元素
obj = document.getElementById('test');
//元素集合
objs = document.getElementsById('test');
2.获取及修改节点内容
obj = document.getElementById('test');
//获取整个节点内的内容,包括标签
a = obj.innerHTML;
//只返回当前节点及其子节点去除标签的内容部分
b = obj.innerText;
//修改节点内容
obj.innerHTML = "<p>hello</p>";
3.修改节点样式及属性
节点样式类似于CSS的定义,element.style.属性名 = '属性值'
。若属性名超过两个单词,使用驼峰命名法设置,如fontSize
obj = document.getElementById('test');
//修改样式属性
obj.style.color = "rgb(0,0,0)";
obj.style.fontSize = "3em";
修改属性与节点样式类似,element.属性名 = '属性值'
<img id="image" onclick="changeImage()" src="pic.gif" width="100" height="100">
<script>
obj = document.getElementById("image");
//修改属性
if(obj.src.match("pic")){
obj.src = "Picture.gif";
}
</script>
4.删除、增加子节点
对子节点的删除需要选择父节点和子节点,最后使用removeChild()方法移除
对于添加子节点首先定义新节点,再使用appendChild()方法增加
对于父节点存在属性children和chind.length以获取子节点及子结节点个数,其中前者是数组对象
注意:移除以后子节点仍旧存在于内存中,对其进行操作仍能实现
<div id="parent">
<p id="child">hello</p>
</div>
<script>
var parent = document.getElementById("parent");
var child = document.getElementById("child");
//删除节点
parent.removeChild(child)
//增加节点
var newChild = document.createElement("p");
newChild.innerText = "123";
parent.appendChild(newChild);
</script>