自学WEB前端-3(JavaScript-2)

一、动态控制之JavaScript（BOM和DOM部分）

1.1 BOM

• Window 对象
• Navigator 对象
• Screen 对象
• History 对象
• Location 对象

1.1.1 Window 对象（窗口对象）

• 所有浏览器都支持 window 对象。它表示浏览器窗口。
• 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
• 全局变量是 window 对象的属性。
• 全局函数是 window 对象的方法。

1.1.2 Window 子对象

Window的子对象主要有如下几个：

• JavaScript document 对象 ----文件
• JavaScript frames 对象 ---- 框架
• JavaScript history 对象 ----历史记录
• JavaScript location 对象 ----地址栏
• JavaScript navigator 对象 ----使用者浏览器信息
• JavaScript screen 对象 ----显示器

方法：

• window对象不需要创建可以直接使用 window.方法名();
• window引用可以省略 直接 方法名();

1.与弹出框有关的方法

alert() 显示带有一段消息和一个确认按钮的警告框。

confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。

prompt() 显示可提示用户输入的对话框。

2.打开关闭窗口

open() 打开一个新的浏览器窗口或查找一个已命名的窗口。

close() 关闭浏览器窗口。

3.计时器

一次性定时器
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
语法：
setTimeout("对象();",毫秒数)
推荐使用 setTimeout(对象,毫秒数)

取消一次性定时器
clearTimeout()
循环定时器
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
语法：
setInterval("对象();",毫秒数)
推荐使用 setInterval(对象,毫秒数)
取消循环定时器
clearInterval()

属性：

• 获取其他BOM对象
• 获取DOM对象

1.1.3 location对象:地址栏对象

属性：

hash		返回一个URL的锚部分
host		返回一个URL的主机名和端口
hostname	返回URL的主机名
href		返回完整的URL
pathname	返回的URL路径名。
port		返回一个URL服务器使用的端口号
protocol	返回一个URL协议
search		返回一个URL的查询部分

方法：

assign()	载入一个新的文档
reload()	重新载入当前文档
replace()	用新的文档替换当前文档

1.1.4 History:历史记录对象

1.创建(获取):

window.history

history

2. 方法:

back()
加载 history列表中的前一个URL。

forward()
加载 history列表中的下一个URL。

go()
加载history列表中的某个具体页面。

3. 属性:
   length返回当前窗口历史列表中的URL数量。

1.2 DOM (HTML DOM)

通过 DOM，你可以访问所有的 HTML 元素，连同它们所包含的文本和属性。

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应

1.2.1 查找 HTML 元素

通常，通过 JavaScript，需要操作 HTML 元素。
有三种方法来查找HTML 元素：

• 通过 id 找到 HTML 元素

document.getElementById("元素id值");

• 通过标签名找到 HTML 元素

var x=document.getElementById("test");


查找 id="test" 元素中的所有 <p> 元素：
var y=x.getElementsByTagName("p");

• 通过类名找到 HTML 元素

document.getElementsByClassName("类名");

1.2.2 修改标签体内容

步骤：

1. 获取元素对象
2. 使用innerHTML 属性修改标签体内容
   document.getElementById(id).innerHTML=new HTML

1.2.3 DOM 修改HTML样式

语法：
document.getElementById(id).style.property=new style

document.getElementById('p1').style.visibility='hidden'			隐藏id=p1的元素
document.getElementById('p1').style.visibility='visible'		显示id=p1的元素

1.2.4 DOM 事件 某个组件被执行后触发的操作

HTML事件的例子：

• 当用户点击鼠标时
• 当网页已加载时
• 当图像已加载时
• 当鼠标移动到元素上时
• 当输入字段被改变时
• 当提交 HTML 表单时
• 当用户触发按键时

1.3 DOM（Document object Model）文档对象模型

将标记语文档的各个组成部分,封装为对象。
使用这些对象对标记语文档进行CRUD的动态操作。

W3C DOM标准被分为3个不同的部分：

1. 核心 DOM----针对任何结构化文档的标准模型

   • Document:文档对象

   • Element:元秦对象

   • Attribute:属性对象

   • Text:文本对象

   • Comment:注释对象

   • Node:节点对象,其他5个的父对象

2. XML DOM----针对XML文档的标准模型

3. HTML DOM----针对HTML文档的标准模型

1.3.1 核心DOM模型

Document:文档对象

1.创建(获取):在 html dom模型中可以使用 window对象来获取
	1. window. document
	2. document
2.方法
	1.获取 Element对象
		getElementById():				根据id属性值获取元秦对象。id属性值一般唯
		getElementsByTagName():			根据元秦名称获取元秦对象们。返回值是一个数组
		getElementsByclassName():		根据C1as性值获取元素对象们。返回值是一个数组			
		getElementsByName():			根据name属性值获取元素对象们。
	2.创建其他DM对象
		creatAttribute(name)
		createComment()
		createElement()
		createTextNode()
3.属性
	 	Element:元秦对象
	    Node:节点对象,其他5个的父对象
 特点:所有dom对象都可以被认为是一个节点
 方法：
		crud dom树
		appendChild():					向节点的子节点列表的结尾添加新的子节点。
		removeChild():					删除(并运回)当前节点的指定子节点。
		replaceChild():					用新节点替换一个子节点。
 超链接功能:
		1.可以被点击:样式
		2.点击后跳转到href指定的ur1
			需求:
				保留1功能,去掉2功能
			实现:
				href=" javascript:void(0);"

1.3.2 事件监听机制

 概念:	某些组件被执行了某些操作后,触发某些代码的执行。
 事件:	某些操作。如:单击,双击,键盘按下了,鼠标移动了
 事件源: 组件。如:按钮文本输入框
 监听器:代码。
 注册监听:将事件,事件源,监听器结合在一起。当事件源上发生了某个事件,则触发执行某个监听器代码。

1.3.3 常见的事件

1.点击事件
	onclick:		单击事件
	ondblclick:		双击事件
2.焦点事件
	onblur:			失去焦点
	onfocus:		元秦获得焦点。
3.加载事件
	onload:			一张页面或一幅图像完成加载。
4.鼠标事件
	onmousedown		鼠标按钮被按下
	onmouseup		鼠标按键被松开。
	onmousemove		鼠标被移动。
	onmouseover		鼠标移到某元素之上。
	onmouseout		鼠标从某元素移开
5.键盘事件:
	onkeydown  		某个键盘按键被按下。
	onkeyeyup  		某个键盘按键被松开
	onkeypress		某个键盘按键被按下并松开
6.选择和改变
	onchange		域的内容被改变。
	onselect		文本被选中。
7.表单事件
	onsubmit		确认按钮被点击。
				作用：可以阻止表单的提交。
				方法：返回 false则表单被阻止提交。
	onreset			重置按钮被点击。

• 加载完成事件 onload

window. onload function{
		}

• 失去焦点事件

document. getElementById("username").οnblur= function(){
		alert("失去焦点了.");}

• 绑定鼠标移动到元素之上事件

document. getElementById("username").οnmοuseοver= function (){
		alert("鼠标来了.");}

• 绑定鼠标点击事件

1.获取超链接

var element_href = document.getElementById ("new_address");

2.绑定单击事件

element.onclick = function (){
		var div1 = document.getElementById("div1");
		var div2 = document.getElementById(div2")
		div1.removeChild(div2);
		}