JavaScript_基础——BOM&DOM_常用方法和属性

JavaScript的组成

一个完整的JavaScript由三部分组成：

1. ECMAScript：规定了语法、类型、语句等
2. BOM：浏览器对象模型
3. DOM：文档对象模型

一、BOM

Ⅰ、BOM介绍

BOM(Browser Object Model)：浏览器对象模型，与浏览器交互的方法和接口，BOM介于各个浏览器厂商对浏览器的不同规定，兼容性很差

Ⅱ、浏览器对象

1、windows对象

浏览器窗口信息，除了BOM外，window对象是所有浏览器的父对象

常用方法和属性：

1. window.innerHeight：浏览器窗口内部高度
2. window.open()：打开新窗口
3. window.resizeTo()：调整窗口大小
4. window.comfirm()：确认窗口，返回bool
5. window.prompt()：提示窗口，接受输入并返回，否则返回默认值

2、navigator对象

浏览器相关信息

常用属性：

1. navigator.appName：浏览器名称
2. navigator:appVersion：浏览器版本
3. navigator.language：浏览器语言
4. navigator.platform：操作系统类型
5. navigator.userAgent：浏览器UA头

3、screen对象

显示浏览器的显示器相关信息

常用属性：

1. screen.width：屏幕宽度，单位px
2. screen.height：屏幕高度，单位px
3. screen.colorDepth：颜色位深度

4、location对象

浏览器当前网页的URL信息

常用方法和属性：

1. location.hash：URL包含的哈希值
2. location.host：主机名
3. location.port：端口号
4. location.pathname：页面路径
5. location.search：GET请求参数
6. location.protocol：协议类型
7. location.assign()：加载新页面
8. location.reload()：重新加载当前页面
9. location.replace()：加载新页面替换当前

5、document对象

浏览器当前网页内容信息

常用方法和属性：

1. document.cookie：返回当前文档的cookie
2. document.URL：返回文档的URL
3. document.title：返回文档的标题
4. document.getElementById()：返回匹配到的id的第一个元素
5. document.getElementByName()：返回匹配到的名字的元素集合
6. document.open()：打开流，接受write()输出
7. document.write()：向文档写入

6、history对象

浏览器的历史浏览记录信息

常用方法和属性

1. history.length：返回浏览器历史记录数
2. history.back()：加载前一个URL
3. history.forwrd()：加载下一个URL
4. history.go()：加载指定URL

二、DOM

Ⅰ、DOM介绍

DOM(Document Object Model)：文档对象模型，本质上就是一套API，把HTML内容变成一棵树，方便操纵

在DOM构造的树中，节点主要有三种类型

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

DOM的使用：
找到节点，进行操作：节点名.方法名/属性名()

Ⅱ、选择节点

document对象控制整个文档，通常情况下直接通过它进行DOM操作

//单个元素
obj = document.getElementById('test');

//元素集合
objs = document.getElementsById('test');

Ⅲ、获取及修改节点内容

obj = document.getElementById('test');

//获取整个节点内的内容，包括标签
a = obj.innerHTML;
//只返回当前节点及其子节点去除标签的内容部分
b = obj.innerText;

//修改节点内容
obj.innerHTML = "<p>hello</p>";

Ⅳ、修改节点样式及属性

节点样式类似于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>

Ⅴ、删除、增加子节点

对子节点的删除需要选择父节点和子节点，最后使用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>

完

欢迎在评论区留言
感谢浏览