BOM&DOM_常用方法和属性

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构造的树中，节点主要有三种类型

1. 元素节点：一般是一对标签的元素整体
2. 文本节点：标签内的文本部分
3. 属性节点：标签的属性值

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>