Bom，Dom

1.BOM:Browser Object Model 浏览器对象模型

可以将浏览器软件看成一个对象，可以获取这个对象中的所有子对象。
例如，可以获取该对象的地址栏，html的文件信息document对象等

1.1Window对象
是JS中的顶层对象，使用时可直接用属性名或者方法名。

常用方法：
alert()
prompt()
close()
open()

clearInterval() 清除浏览器重复动作
setInterval()让浏览器在指定的时间重复执行某个动作（函数）
setInterval(“showTime()”, 1000);1s显示一次时间
clearTimeout 清除执行的动作
setTimeout 让浏览器在指定的时间后执行一次某个动作

window.status = “browser 底端显示的内容”;

1.2history对象
是Javascript对象，有一系列的URL组成
History对象设计最初表示窗口浏览历史，后来为保护隐私，不再允许脚本访问已经访问过的实际URL，只有go(去history列表中某个具体的页面), forward(去history列表中前一个页面), back(history列表中后一个页面)。

History对象时window对象的一部分，可通过window。history属性进行访问

history.go(-1);回到上一个访问界面

1.2Location对象
也是JavaScript对象， 不是Dom对象， 包含有关当前URL的信息

location对象表示的是browser的地址栏，可以通过location对象动态修改browser的地址栏
location.href = “http://www.baidu.com“;

1.3Navigator对象
也是Javascript对象， 不是dom对象，包含有关客户机浏览器的信息

var pluginsArr = navigator.plugins;
获取浏览器中的所有插件，保存在数组中

++++++++++++++++++++++++++++++++++++++

2.Dom对象
Document Object Model 文档对象模型：用于解析标记型文档（html,xml文件）成对应的对象。

一个标记型文档被浏览器加载到内存中后，形成一个Document对象，可以获取这个文档中所有标签，属性，文本以及子标签的属性文本等。
dom技术中，标签 —— Element, 属性 ——– Attribute, 文本 ——– Text, 节点 ——- Node

2.1Dom对象中常用的三个方法
getElementById() 返回拥有指定id的第一个对象的引用，该id值必须唯一
getElementsByName() 返回带有指定名称的对象的集合
getElementsByTagNmae() 返回带有指定标签名的对象的集合

注意；获取页面的任何标签，都必须在页面加载完成之后才能获取

3.dom中的方法

3.1create和add
var domEle = document.createElement(“aElement”);
domEle.setAttribute(“href”, “http://www.baidu.com“);

document.body.appendChild(domEle);

3.2delete
删除页面上的标签，必须通过父标签删除
var childEle = document.getElementById(“chileEle”);
var parentEle = childEle.parentNode;
//删除兄弟节点
parentEle.removeChild(childEle.previousSibling);
//删除childELE
parentEle.removeChild(childEle);

3.3 replace替换

用childEle替换copyEle
var copyEle = document.getElementById(“copyEle “);
childEle.parentNode.replaceChild(childEle, copyEle);

3.4clone
var newEle = childEle.cloneNode(true);

4.1全选，全不选，反选
window.onload = function(){

//获取到页面上的全选按钮
var checkall = document.getElementById(“checkall”);
//给按钮绑定点击事件
checkall.onclick = function(){
//获取页面上的checkbox复选框
var items = document.getElementsByName(“items”);
for( var i = 0 ; i < items.length ; i++ ){
items[i].checked = true;
}
}

//获取到页面上的全不选按钮
var check_revsern = document.getElementById("check_revsern");
//给按钮绑定点击事件
check_revsern.onclick = function(){
var items = document.getElementsByName("items");
for( var i = 0 ; i < items.length ; i++ ){              
items[i].checked = !items[i].checked ;
    }                               
}                       

4.2表格隔行变色

window.onload = function(){
            //获取页面上的所有tr
            var trs = document.getElementsByTagName("tr");
            //遍历
            for(var i = 1 ; i < trs.length ; i++){
                //判断奇偶数
                if( i % 2 ){
                    trs[i].className = "one";
                }else{
                    trs[i].className = "two";
                }
                //定义临时变量记录鼠标的悬停之前的class属性的值
                var oldClassName = "";
                //给每一行上绑定鼠标悬停和移出的事件
                trs[i].onmouseover = function(){
                    oldClassName = this.className;
                    this.className = "over";
                }

                trs[i].onmouseout = function(){
                    this.className = oldClassName;
                }
            }

<script type="text/css">
.over{
background-color: green;
}

.one{
background-color: yellow;
}

.two{
background-color: blue;
}
</script>

4.3json实现二级联动

json主要用来在服务器和客户端浏览器之间进行数据的传递。
json格式的数据的2中表达方式：
{
key : value,
key: value
…
}

第二种：
[
{}, {} …
]

json中所有的key值都必须是字符串， value可以使任何数据

省市二级联动

<script>
var json = {
                        "江苏省":["南京市","苏州市","无锡市"],
                        "安徽省":["合肥市","芜湖市","安庆市","黄山市"],
                        "浙江省":["杭州市","衢州市"],
                    };  
window.onload = function(){

            var province = document.getElementById("province");

            //获取json中的所有key，即就是省的名称
            for( pname in json ){
                //把省的名字全部添加到省的select下面
                var p_option = document.createElement("option");
                p_option.innerHTML = pname;
                p_option.setAttribute("value",pname);
                //把省的option添加到省的select下
                province.appendChild(p_option);
            }


            //给省的select上添加改变事件
            province.onchange = function(){
                //获取省的select下的所有的option
                var p_options = this.options;
                //选中的省的名字
                //在select标签对象中的selectedIndex 可以获取到当前选中的那个option的下标
                var pname = p_options[this.selectedIndex].value;
                //获取到市的select
                var city = document.getElementById("city");

                //在省改变的时候，需要清空原来市里面的option
                city.length = 1;

                //获取省对应的市
                var cities =  json[pname];
                for( var i = 0 ; i<cities.length ; i++ ){
                    //创建市的option
                    var c_option = document.createElement("option");
                    c_option.innerHTML = cities[i];
                    c_option.setAttribute("value",cities[i]);
                    //把省的option添加到省的select下
                    city.appendChild(c_option);
                }
            }
        }

</script>