JavaScript操作BOM和DOM

JS的组成：

ECMAScript:核心标准，语法

BOM Browser Objection Model 浏览器对象模型

DOM Document Object Model 文档对象模型

1.了解BOM对象的组成和其子对象的使用

浏览器对象模型：它是能够提供一套独立的能够对浏览器进行操作的对象模型。

以面向对象的思想进行的构成，window(窗口)对象是BOM的核心对象，也是顶级对象。

Window:代表浏览器的窗口 对浏览器窗口的一系列操作都封装于内

History:代表浏览器的历史记录 提供了对历史记录的相关操作

Location:代表浏览器的URL地址 提供对URL地址的相关操作。

Document:代表浏览器的文档内容（页面主体，类似于当初的DOM解析XML得到的ducument(代表所有的文档节点的集合）)

//以java来表示它的对象结构（方便你理解）
public class window{
	private History history;
	private Document document;
	private Location location;
}
public class History{
	public void go(int floag){
			///...
	
	}
}
public class Location{
	private String href; //浏览器URL地址
}
public class Document{
	private String referrer;
}

1.1 window对象的常用方法和属性

常用属性，一般我们不会通过window对象直接操作它的对象属性，而是使用对象属性的那些相关方法和属性去操作。

方法名称	说明
prompt()	显示可提示用户输入的对话框
alert()	显示带有一个提示信息和确定按钮的警示框
confirm()	显示一个带有提示信息，确定和取消按钮的的对话框
close()	关闭浏览器窗口
open()	打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout()	在指定的毫秒数后调用函数和计算表达式
setInterval()	按照指定的周期（以毫秒计）来调用函数或表达式

属性名称	说明
height,width	窗口文档显示区的高度，宽度，以像素计
left,top	窗口的X坐标，Y坐标，以像素计
toolbra=yes|no|1|0	是否显示浏览器的工具栏，默认是yes
scrollbars=yes|no|1|0	是否显示滚动条，默认是yes.
location=yes|no|1|0	是否显示地址地段。默认是yes.
status=yes|no|1|0	是否添加状态栏。默认是yes
menubar=yes|no|1|0	是否显示菜单栏。默认是yes
resizable=yes|no|1|0	窗口是否可调节尺寸，默认是yes
titlebar=yes|no|1|0	是否显示标题栏，默认是yes
fullscreen=yes|no|1|0	是否使用全屏模式显示浏览器，默认是no,处于全屏模式的窗口必须同时处于剧院模式

例如：window.location = "http://www.baidu.com;(x)
	//window对象是顶级对象 所以它可以省略
	[window.]location.href = "htttp;//www.baidu.com";（推荐）

function cleaCache(){
	//window.alert("清除成功！");
	//window.confirm()
	//如果确定为true 取消为false
	var flag = confirm("确认清除系统缓冲？之前下载的内容都会同时清理！")；
	// alert(flag);
	if(flag){
		alert("清除成功！")；
	}
}

function openNewWindow(){
	//open("success.html");
	open("success.html","");
open("success.html","","height=200px,width=200px");
}

//在火狐浏览器内 兼容不太好 主窗口无法直接关闭 选项卡关闭还提示不太友好
function closeWindow(){
	close();
}

1.2 history对象

<a href = "index1.html">点我跳转到index1</a>
<!--<a href ="javascript:history.forward();">点我前进到
index1历史记录</a>-->
<a href="javascript:history.go(1);">点我前进到index1历史记录<a/>

<!--调用JS-->
<a href="javascript:goBack();">点我返回上个页面</a>
<script type ="text/javascript">
	function goBack(){
	//回退一个历史记录
	//history.go(-1);
	}
	</script>

1.3 location对象

1.3 document对象

<script type="text/javascript"
	/*获取上一页页面（来源）防盗操作*/
	alert(document.referrer);
	</script。

2 了解DOM的分类和节点间的关系

类似于XML解析：DOM和DOM4J

DOM文档对象模型，它的核心是document对象。

document.write();

DOM的分类：

最核心的DOM它适合于所有的标记语言，但是因为太通用了，所以在做某种具体的标记语言操作时，可能不太方便，所以就产生了各种基于核心的扩展DOM.

DOM-core 核心 (XML解析用的主要就是这个核心代码)

document.getElementByID();
document.getElementsByTagName();

HTML-DOM(为了解析HTML专门提供的一种封装了的DOM)

document.forms();//获取某个页面的所有的form表单

CSS-DOM(为DOM提供了对样式设置的内容)

xxxx.style.display = "none";

DOM模型中有一个很重要的概念就是DOM树，它是按照文档内的结构进行一个绘制的，将所有的内容以节点的形式表现出来,类似于一个家族树。

3.熟练使用DOM树操作DOM节点

使用DOM-Core获取元素节点

getElementById(“id属性值”)；

getElementsByName(“name属性值”)；

getElementsByTagName(“标签/元素名”)；

getElementsByClaaName(“class属性值”)；

使用DOM-Core的节点层次关系来获取节点

parentNode 获取某个节点的父节点

childNodes 获取某个节点的所有字节点

firstChild获取某个节点的第一个子节点

lastChild获取某个节点的最后一个子节点

nextSibling 获取某个节点的下一个兄弟节点

previousSibling 获取某个节点的上一个兄弟节点

但是上方的层次访问方式，都需要考虑文本节点等情况，而一般我们操作DOM都是以元素节点（标签）为基础的，所以下方的属性可以直接排除掉元素节点外的内容。

firstElementChild 第一个元素子节点

lastElementChild 最后一个元素子节点

nextElementSibling 下一个兄弟元素节点

previousElementSibling 上一个兄弟元素节点

在DOM中的节点的相关属性信息：

nodeName

元素节点：元素名

​ 属性，文本，注释节点：#xxx 例如：文本 #text

nodeType

元素节点：1

属性节点：2

文本节点：3

注释节点：8；

document节点：9；

nodeValue

​ 元素节点：null

​ 属性，文本，注释节点：它们的值

掌握节点的常用操作

操作节点的属性

​ getAttribute(String attrName);根据属性名获取属性值

​ setAttribute(String attrName，String value);给某个属性设置属性值

创建和插入节点

createElement(String tagName):创建元素节点（document)

A.appendChild(B):给A节点添加一个子节点：B/给A节点追加子节点

insertBefore(A，B);将A节点添加到B节点之前（兄弟关系）

cloneNode(boolean deep);节点 克隆 boolean表示是否克隆其子节点

删除和替换节点

removeChild(Node node);删除某个子节点

replaceChild(newChildNode,oldChildNode);用新子节点 替换 老的子节点

操作节点的形式

style：行内样式表设置

元素节点对象。style.样式属性=“值”；

clssName :使用内部或 或外部样式表设置（类 选择器设置的内容）

获取节点的样式

4. 掌握定时函数和Date的使用

熟练使用DOM树操作DOM节点