js的BOM
回归一下，JS最初由网景公司创造，JS基本组成包括：
- 核心（ECMAScript）：描述了JS的语法和基本对象
- 浏览器对象模型（BOM）：与浏览器交互的方法和接口
- 文档对象模型 （DOM）：处理网页内容的方法和接口
下面先来介绍BOM。
(1)window对象
弹框的方法：
提示框：alert("提示信息");
确认框：confirm("确认信息");
有返回值：如果点击确认返回true 如果点击取消 返回false
var res = confirm("您确认要删除吗？");
alert(res);
输入框：prompt("提示信息");
有返回值：如果点击确认返回输入框的文本 点击取消返回null
var res = prompt("请输入密码？");
alert(res);
open方法：
window.open("url地址");
open("../jsCore/demo10.html");
定时器：
setTimeout(函数,毫秒值);
setTimeout(
function(){
alert("xx");
},
3000
);
clearTimeout(定时器的名称);
var timer;
var fn = function(){
alert("x");
timer = setTimeout(fn,2000);
};
var closer = function(){
clearTimeout(timer);
};
fn();
setInterval(函数,毫秒值);
clearInterval(定时器的名称)
var timer = setInterval(
function(){
alert("nihao");
},
2000
);
var closer = function(){
clearInterval(timer);
};
注意：
setTimeout在执行时，是在载入后延迟指定时间后，去执行一次表达式，记住，次数是一次性的。
setInterval则不一样，它从载入后，每隔指定的时间就执行一次表达式，周而复始的。
需求：注册后5秒钟跳转首页
恭喜您注册成功，<span id="second" style="color: red;">5</span>秒后跳转到首页，如果不跳转请<a href="../jsCore/demo10.html">点击这里</a>
<script type="text/javascript">
var time = 5;
var timer;
timer = setInterval(
function(){
var second = document.getElementById("second");
if(time>=1){
second.innerHTML = time;
time--;
}else{
clearInterval(timer);
location.href="../jsCore/demo10.html";
}
},
1000
);
</script>
(2)location对象
location.href="url地址";
(3)history对象
back();
forward();
go();
<a href="demo7.html">后一页</a>
<input type="button" value="上一页" onclick="history.back()">
<input type="button" value="下一页" onclick="history.forward()">
<input type="button" value="上一页" onclick="history.go(-1)">
<input type="button" value="下一页" onclick="history.go(1)">
JS的DOM
1、理解一下文档对象模型
html文件加载到内存之后会形成一颗dom树，根据这些节点对象可以进行脚本代码的动态修改。
在dom树中，一切皆为节点对象。
2、dom方法和属性
(1)getElementById-通过id获得元素节点对象
例子：
<form name="form1" action="test.html" method="post">
<input type="text" name="username" value="哈哈" id="mid" onchange="">
<input type="button" name="ok" value="确定"/>
</form>
//输出id为mid的标签的信息
var inputNode = document.getElementById("mid");
alert("type:" + inputNode.type + "\nvalue:" + inputNode.value);
(2)getElementsByName-通过name获得节点对象集合（因为name同名可以有多个）
例子：
<form name="form1" action="test.html" method="post">
<input type="text" name="myname" value="哈哈1" id="tid_1"><br>
<input type="text" name="myname" value="哈哈2" id="tid_2"><br>
<input type="text" name="myname" value="哈哈3" id="tid_3"><br>
<input type="button" name="ok" value="确定"/>
</form>
//通过元素的name属性获取所有元素的引用
var inputNodes = document.getElementsByName("myname");
//测试该数据的长度
alert(inputNodes.length);
//遍历元素,输出所有value属性的值
for (var i = 0; i < inputNodes.length; i++) {
var inputNode = inputNodes[i];
alert(inputNode.value);
}
//为每个文本框(<input type="text">)增加chanage事件,当值改变时,输出改变的值
for (var i = 0; i < inputNodes.length; i++) {
var inputNode = inputNodes[i];
inputNode.onchange = function () {
alert(this.value);
};
}
(3)getElementsByTagName-通过标签名称获得元素节点的集合
(4)hasChildNodes-查看元素节点是否含有子节点
(5)nodeName、nodeType、nodeValue属性
每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
nodeName（节点名称）
nodeValue（节点值）
nodeType（节点类型）
1.nodeName
nodeName 属性含有某个节点的名称。
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
注释：nodeName 所包含的 XML 元素的标签名称永远是大写的
2.nodeValue
对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
3.nodeType
nodeType 属性可返回节点的类型。
最重要的节点类型是：
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
(6)childNodes属性-子节点集合；parentNode(this.parentNode)-父节点
(7)replaceChild-父节点替换子节点
例子：
<ul>
<li id="bj" value="beijing">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing"> 重庆</li>
</ul>
<ul>
<li id="fk" value="fangkong">反恐</li>
<li id="ms" value="moshou">魔兽</li>
<li id="cq1" value="chuanqi">传奇</li>
</ul>
//点击北京节点，将被反恐节点替换
var bj = document.getElementById("bj");
var fk = document.getElementById("fk");
bj.onclick = function(){
//
var parentNode = this.parentNode;
parentNode.replaceChild(fk,this);
};
(8)查找、设置属性节点
例子：
<ul>
<li id="bj" value="beijing">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing">重庆</li>
</ul>
var bj = document.getElementById("bj");
alert(bj.getAttribute("value"));
bj.setAttribute("value", "哈哈");
alert(bj.getAttribute("value"));
(9)节点的创建与添加、删除
例子：
<ul id="city">
<li id="bj" value="beijing">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing">重庆</li>
</ul>
//增加城市节点 <li id="tj" v="tianjin">天津</li>放置到city下
var li = document.createElement("li");
li.setAttribute("id", "tj");
li.setAttribute("value", "tianjin");
var txt = document.createTextNode("天津");
li.appendChild(txt);
var city = document.getElementById("city");
city.appendChild(li);
//city.insertBefore(tj, cq);
//city.removeChild(tj);
(10)innerHTML属性(比较重要)
例子：
<div id="subject">jquery</div>
//将<h1>今天</h1>写到div的层中
var div = document.getElementById("subject");
div.innerHTML = "<h1>今天</h1>";
//使用innerHTML读出id=subject中的文本内容
var div = document.getElementById("subject");
alert(div.innerHTML);
