BOM
BOM定义：浏览器对象模型
(BOM提供了很多对象，用于访问浏览器的功能，与浏览器承载展现的页面无关，只是单纯看浏览器自己的性能参数)
一. window对象——BOM核心
( 两重含义，首先是单纯代表浏览器的一个窗口，还有一层含义就是他还代表js中的全局Global对象。)
通过JS访问浏览器窗口的一个接口
- 系统对话框
-
alert：单纯的提示内容，下面只有一个OK，点击就会关闭，与用户没啥交互
-
confirm：用法与alert一样，参数直接是要显示的内容，但是会有两个按键，一个OK，一个取消。所有confirm函数有返回值，当用户点击OK，返回true，当用户点击取消、或者直接将窗口关闭，则返回false。
-
prompt：比confirm再多加一个input，供用户输入内容。接受两个参数，第一个参数时提示的内容，第二个参数时默认在input中显示的文字。点击OK，则返回input中的内容，点击取消、或者关闭对话框，返回null。
- 计时函数
- setTimeout（)：
接受两个参数，第一个是要执行的函数/语句。 可以直接在双引号中写语句，也可以直接function(){…}，第二个参数是延时的毫秒数。
- setInterval（）：
接受的参数与setTimeout相同，但是第二个参数代表每隔多少秒执行一次。这个函数是一个重复执行的函数。想要停下来，那么就要调用clearInterval（ID）；
ECMAScript规定的Global对象
- 所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法
- 定义全局变量与再window对象上直接定义属性的差别
- 全局变量不能通过delete操作符删除( [] )，而直接在window对象上定义的属性可以删除
- 尝试访问未声明的变量会抛出错误，但是通过查询window对象，可以知道某个可能未声明的变量是否存在
var newValue = oldValue; // error
var newValue = window.oldValue; // 不会报错，认为是一次属性查询，结果是undefined
二. location对象——页面信息
提供了与当前窗口加载的内容相关的信息——说是内容，其实最多就是URL之类的，再具体的就访问不到了
- window.location 和 document.location 引用的是同一个对象
- 属性
hash, host, hostname, href(location.toString()), pathname, port, protocol, search
三. navigator对象——浏览器
提供了客户端浏览器的信息，比如浏览器的名称，版本，是否安装了插件等等
四. screen对象+history对象
screen：只是用来代表客户端的能力，可以访问浏览器的宽高，像素之类的
history：保存着用户上网的历史记录，拥有go方法，支持前后跳转
- history对象保存着从窗口被打开的那一刻起用户上网的历史记录
- 方法
- history.go(-1)
- history.go(1)
- history.back()
- history.forward()
DOM
1、DOM——文档对象模型。将HTML文件描绘成一个层次化的节点树，允许开发人员添加、修改页面。
2、文档节点是每个文档的根节点，是最外层的元素，每个文档只能有一个文档元素，对于HTML文件来说，文档元素始终是元素。
3、每个节点都有个nodeType属性，不同类型的节点有相应不同的值。比如element为1，document为9，text为3.
所以可以根据nodeType的值来判断这个节点的类型。比如在用nodelist时，对于列表元素来说会返回很多个带空的列表，那么可以通过if(nodelist[i].nodeType==1){ … }来筛选出是li元素（element性质）
4、操作节点：
① 添加：
1、fathernode.appendChild（childnode） //默认在最后添加，为lastChild
如果childnode为已经存在的子节点，那么就会将其从原始位置移到lastChild位置
2、fathrernode.insertBefore(newnode , somenode) //将newnode添加到somenode之前，并且成为somenode的同级别节点，并不是父级节点
②替换：
fathernode.replaceChild(newnode , somechildnode) // 将newnode替换到fathernode下的somechildnode节点，原来的somechildnode将被完全删除
③删除：
fathernode.removeChild(somechildnode) //直接将fathernode中的somechildnode删除
④复制：
cloneNode( flag ) //flag可以选true——深复制，即复制该节点及其下面所有的子节点
false——浅复制，只复制该节点本身
注意复制完的节点为孤儿节点，需要为其指定一下父节点，例如append，inset而且不会复制绑定到节点上电js函数，需要自己重新写
5、节点类型
①Documnet
documnet.body ==<body>
document.title == <title>
document.URL ==完整URL
document.domain ==url中的域名，
可以进行设置解决跨域问题。例如两个页面直接不同URL但是要互相访问，那么就将二者的domain名设置一样的，就可以通过js通信了
document.getElementById
documnet,getElementByTagName ==返回一个nodeList，需要用类似数组的方式进行调用里面的内容，想获得文档所有内容，直接TagName(" * ") 代表全部
documnet.getElementByName ==最常用语单选按钮，一组单选radio设置相同name，这样才能做到每次直选1个，方法会返回此时选中的那一个
documnet,write == 可以直接在括号内写标签内容，会自动生成dom元素。也可以引入外部js文件，注意写起冲突
document.writeln == 作用与write相同，就是自带一个换行符
②Element
即HTML的元素
有id，class（注意对象用的时候为className），title（为提示性内容）之类的常见属性。
可以创建createElement(" …")，直接写标签名当参数
访问元素的子节点：childNodes，注意
- 元素中的问题
③Text
就是纯纯的文本，默认可以包含内容的节点最多只能有一个文本节点，无论多长都算一个
有一个合并文本节点的方法：normalize()，会自动合并父级下的所有text子节点，为拼接起来的值
④Comment
是注释的内容，值可以通过nodeValue()获取
2、动态插入DOM
① 动态插入script
两种方法：
1、直接插入外部文件
var script = document.creatElemrnt("script");
script.type = "text/javascript";
script.src = "new.js";
documnet.body.appendChild(script);
效果等同于HTML中直接写：
<script type="text/javascript" src="new.js"></script>
2、直接插入代码
var script = document.creatElemrnt("script");
script.type = "text/javascript";
script.appendChild(document.creatwTextNode("function say(){alert("hi!")}"));
documnet.body.appendChild(script);
② 动态插入css
两种方法：
1、用包含外部文件
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "style.css";
var head = document.getElementByTagName("head")[0]; //注意link要添加在<head>中
head.appendChild(link);
等同于在HTML中直接写：
<link rel="stylesheet" type="text/css" href="style.css">
2、用
类比，创建style元素，然后通过创建text类型节点直接写内部的代码
③ 动态插入table
在js中，特意为table准备了一些属性和方法可以直接调用。比如插入一行insertRow()
也有为tr准备的一些方法
148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
