学习笔记--JavaScript--Day05

最新推荐文章于 2024-01-18 21:55:18 发布

zhu_haibo

最新推荐文章于 2024-01-18 21:55:18 发布

阅读量150

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/zhu_haibo/article/details/113147361

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JS基础：BOM与DOM

一、BOM

1.BOM 与 DOM

BOM： Browser Object Model  浏览器对象模型
	提供操作浏览器的相关方法
	核心对象: window  浏览器窗口对象，是JS的顶层对象
DOM： Document Object Model 文档对象模型
	提供操作文档的相关方法
	核心对象： document  操作文档
注意：
	window顶层对象，包含document对象。
	document.write()
    等价于:
	window.document.write()

2.window对象

1.作用： 浏览器的窗口对象
	全局变量和全局函数，都是window对象的属性和方法。
	window在使用时可以省略。
et：
	var a = 10; 相当于 window.a = 10
2.对话框
	1. alert("");
		警告框 相当于 window.alert();
	2. prompt();
		输入框
	3. confirm("是否确定");
		确定框，返回值是布尔类型 只有当用户点击"确定"时，才返回true，
		其他都返回false

3.定时器方法

-作用：
	按照指定的周期或时间间隔，来调用函数或者计算表达式。
1.周期性定时器 / 间歇调用
	特点：
		每隔一段时间就执行一遍代码
	语法：
		setInterval(fun, duration);
		fun: 表示要执行的操作,可以是函数，也可以直接使用匿名函数;
		duration： 间隔时间，隔多少时间执行一次代码,单位毫秒
		返回值：timer 表示当前定时器的ID,就是一个整数
				可以区分不同的定时器，可以用于清除定时器时使用
	清除定时器
		clearInterval(timer);
2.一次性定时器 / 超时调用
	特点： 在指定的时间间隔之后，只执行一次操作
	语法：
		setTimeout(fun, delay);
		fun： 要执行的操作
		delay： 时间间隔，隔多久后执行操作，单位毫秒
		返回值：timer
	清除定时器
		clearTimeout(timer);

4.window中的属性

window中的属性，本身又是一个对象
1. screen对象
	访问屏幕对象： console.log(screen);
	作用：
		获取客户端显示器相关的信息
	属性：
		1. width / height 获取屏幕宽高
		2. availWidth / availHeight 获取屏幕实际可用宽高(减去任务栏
                                    之后的值)
2. history对象
	包含当前窗口访问过的所有URL
	属性:
		1. length: 获取当前口访问过的所有URL的数量
	方法：
		1. back() 后退
		2. forward() 前进
		3. go(num) 跳转几步 
			num取值为整数，可正可负
3. location对象
	保存的是浏览器地址栏的信息
	属性：
		href： 获取当前窗口正在浏览的网页url
			      如果给href赋值，相当于页面跳转
	方法：
		reload() 页面重载，相当于刷新
		reload(true); 忽略缓存，从服务器端加载
		reload(false); 从缓存中加载(默认)
4. navigator对象
	保存浏览器相关的信息（有很多属性）
	属性
		userAgent: 显示信息

二.DOM对象

1.document对象

1.document对象是DOM中的顶层对象，封装了所有的HTML元素相关的属性，
  方法以及事件

2.节点(对象)

	-网页在加载的过程中，会自动生成一颗节点数(DOM树)
	-DOM树会封装网页上所有的内容。
	-网页中的每一个元素，每一段文本，甚至注释，都会被封装成DOM树中
	单独的一个节点。
	1.节点分类(前三个重点)
		1.元素节点：网页中的一个元素(标签)
		2.属性节点：标签中的一个标签属性
		3.文本节点：表示标签中的文本内容
		4.注释节点：网页中的注释
		5.文档节点：表示整个文档
	2.节点操作
		1.获取节点
		2.读取节点
		3.修改节点
		4.删除节点
		5.创建节点

3.获取元素节点

1. 通过指定的标签名获取元素节点，返回节点列表(数组)
	document.getElementsByTagName("标签名");               
2.根据元素class属性值查找，返回节点列表
	document.getElementsByClassName("class属性值"); 
3. 根据元素name属性值查找，返回节点列表，一般用于查找表单元素	
	document.getElementsByName("name属性值"); 
4. 根据元素id属性值查找，返回具体的元素节点对象 (注意 element 是单数)
	document.getElementById("id属性值"); //
	注意：
		script脚本标签的书写位置，要放在body之后
5.DOM属性：
	1. innerHTML：修改/获取元素节点中的HTML文本，该属性可识别标签
	2. innerText：修改/获取元素节点中的普通文本，该属性不能识别标签
	3. value：该属性只针对表单控件，允许获取或修改表单控件的值

4.获取或设置属性节点的值

操作标签属性
	1. getAttribute(attrName); #获取指定属性的值
	2. setAttribute(attrName, value); 设置属性和对应的值
	3. removeAttribute(attrName); 移除指定的属性
	4. 可以使用点语法访问元素节点的属性
		元素节点.属性名
操作元素样式
	1. setAttribute()
		可以设置元素class / id 的属性值，对应选择器
	2. 针对类选择器的样式，可以为元素属性className赋值
		元素.className = "";
	3. 使用内联方式添加样式
		<h1 style="color:red;"></h1>
		元素.style.css属性名
		元素.style.css属性名 = "";
		注意：
			如果CSS属性名中有连接符-，在JS中访问时，一律改成驼峰标识。
			et：
				font-size 在JS中使用 fontSize
				background-color  --> backgroundColor

5.读取节点信息

1.节点类型
	属性： nodeType
	值：  
		1   表示元素节点
		2   表示属性节点
		3   文本节点
		8   注释节点
		9   文档节点
2.获取节点名称
	属性： nodeName
	取值情况：
		元素节点 	返回元素名
		属性节点 	返回属性名
		文本节点   	返回 #text
		注释节点 	返回 #comment
		文档节点 	返回 #document

6.节点对象的层次属性

1. parentNode  获取当前节点的父节点
2. childNode   获取当前节点下的所有子节点，返回子节点数组
	注意：
		文本节点和属性节点都会作为当前元素节点的子节点，
		换行和空格都会作为空的文本节点计算在内
3. children  返回当前节点的所有子节点数组
	注意:
		只返回子元素节点，不包含文本节点和属性节点。
4. nextSibling  表示下一个兄弟节点
	nextElementSibling  表示下一个元素兄弟节点
5. previousSibling  表示上一个兄弟节点
	previousElementSibling   表示上一个元素兄弟节点
6. attributes 获取当前元素节点对象的所有属性节点集合

7.DOM节点操作

1. 创建节点
	1. 创建元素节点和创建文本节点
		元素节点
			var div = document.createElement('div');
		文本节点
			var text = document.createTextNode('');
	注意：
		属性节点可以通过元素节点点语法直接访问和设置
2. 添加节点
	DOM中对节点的插入、删除、追加操作，都由父元素执行
	1.在父元素中动态追加子节点
		语法：
			父节点.appendChild(子节点);
		et：
			var div = document.createElement('div');
			document.body.appendChild(div);
			div.parentNode.append(div);
	注意：
		文本节点也是元素的子节点
	et：
		var text = document.createTextNode('文本内容');
		div.appendChild(text);
3. 在文档的指定位置插入节点
	语法：
		parentNode.insertBefore(newElem, oldElem);
		将newElem节点插入到oldElem节点之前
	et：
		var h1 = document.createElement('h1');
		document.body.insertBefore(h1,div); //将h1插入到div之前
4. 删除节点
	1.如果是删除body的子元素
		document.body.removeChild(elem);
	2.如果元素的层级结构较多，需要通过父节点parentNode来删除
		节点.parentNode.removeChild(elem);