Bom，Dom

来源：互联网发布：飞控pid算法编辑：程序博客网时间：2024/06/10 16:15

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>

0 0