简介：
BOM:Browser Object Model:浏览器对象模型,BOM中的顶级对象就是window
DOM:Document Object Model 文档对象模型。页面中有一个顶级对象:Document
window----皇上
document–总管太监,window对象下的属性,有的时候也是一个对象, 对象可以调用属性或者方法 window.document.getElementsByName();
页面中所有的内容都是window的,变量是属于window的,函数也是属于window,对象都是window的， 为了开发方便和维护,window是可以省略
var num=10;console.log(window.num);function f1() {//this就是:谁调用了这个函数.,this就是谁console.log("调用了"+this);}window.f1();
BOM:
页面的加载事件,页面中所有的内容加载完毕后(页面中的标签、图片、外部引入…全部加载)才执行
window.onload=function () {//通过id获取元素var btnObj=document.getElementById("btn");console.log(btnObj.value);
};
页面关闭之后才执行,谷歌不支持,IE8支持
window.onunload=function () {alert("我执行了");
};
location是window对象下的一个属性,实际上也是一个对象,主要是对浏览器的地址栏做操作
凡是使用window的地方都可以省略window
console.log(location.href); //获取地址的 location.href="http://www.baidu.com"; //设置地址,地址改变,就会跳转 location.assign("http://www.baidu.com");//和location.href属性是一样的操作, location.replace("http://www.baidu.com");;//把当前页面的地址,替换成一个新的地址,不会保存到历史记录 location.reload();//重载,刷新 console.log(window.location.hash);//地址栏上#及后面的内容 console.log(window.location.host);//主机名字和端口号 console.log(window.location.hostname);//主机名字 console.log(window.location.pathname);//文件的相对路径 console.log(window.location.port);//端口 console.log(window.location.protocol);//协议 console.log(window.location.search);//搜索的内容:获取的是?及后面的内容
navigator对象是window下的一个属性,主要是获取本地的相关系统的信息
console.log(navigator.userAgent);//获取浏览器的信息console.log(navigator.platform);//系统的信息
history对象是window下的一个属性,主要是对历史记录的操作,前进或者是后退
想要前进和后退,必须要有历史记录
history.forward();//前进history.back();//后退history.go();//如果是正数就是前进,负数就是后退
定时器：
// 循环执行的定时器var timeId=setInterval(function () {alert("你瞅啥?瞅你咋地?");},1000);//返回的就是定时器id.对应clearInterval(定时器的id)清理定时器//清理定时器的方法clearInterval(timeId);// 延时执行定时器var timeId=setTimeout(function () {alert("哈哈");},1000);//返回的就是定时器id.对应clearTimeout(定时器的id)清理定时器//清理定时器clearTimeout(timeId);
DOM:
DOM的作用:操作页面的元素
- element:元素----页面中的标签都是元素,标签
* node:节点----页面中所有的内容都是节点:标签,文本(空白项),属性
* parent:父亲
* children:孩子
获取DOM：
- doucment.getELementById(‘idname’);
- document.getElementsByTagName(“img”)----返回的是一个伪数组
DOM事件绑定：
```<body><!--点击按钮弹出对话框--><!--第一种写法--><!--<input type="button" value="按钮" onclick="js的代码"/>--><input type="button" value="按钮" onclick="alert('被点了')"/><!--第二种写法--><script>function f1() {alert("哈哈");}</script><input type="button" value="按钮" onclick="f1();"/><!--第三种写法--><input type="button" value="按钮" id="btn1" /><script>function f2() {alert("哦被点了");}var btnObj=document.getElementById("btn1");//返回这个获取的对象(就是这个标签)btnObj.onclick=f2; //f2()调用</script><!--第四种写法--><input type="button" value="按钮" id="btn"/><script>//获取按钮// var btnObj=document.getElementById("btn");// btnObj.onclick=function () {// alert("哈哈");// };document.getElementById("btn").onclick=function () {alert("哈哈");};<!--第五种写法-->document.getElementById("btn").addEventListener(function(){alert('哈哈')},false)</script></body>```
修改DOM中的文本内容：
<body>
<input type="button" value="显示效果" id="btn"/>
<input type="text" value="文本1"/><br/>
<input type="text" value="文本1"/><br/>
<div id="dv"></div>
<a href="http://www.baidu.com" id="ak">百度</a>
<script>//根据id获取按钮,为按钮注册点击事件,添加事件处理函数(后面的匿名函数)document.getElementById("btn").onclick = function () {//修改divvar dvObj=document.getElementById("dv");dvObj.innerText="我是一个div";//修改超链接的热点文字及地址var aObj=document.getElementById("ak");aObj.href="http://www.itcast.cn";aObj.innerText="Hello";// 修改input的内容var inputs=dvObj2.getElementsByTagName("input");for(var i=0;i<inputs.length;i++){//判断input标签的type属性是不是textif(inputs[i].type=="text"){inputs[i].value="都改变吧";}}};
</script>
</body>
修改img的宽高,src：
<body>
<!--图片标签本身有width和height的属性,是不需要加px-->
<img src="images/liu.jpg" alt="美景" width="300" height="400" id="img1"/>
<script>
//点击图片,设置宽和高
var imgObj = document.getElementById("img1");
imgObj.onclick = function () {this.width = "500";this.height = "200";//鼠标在图片上的时候显示的信息this.title = "好大的图片啊";this.src='images/boduo.jpg'
};
/*
* 普通的标签的属性:src/href/title/width/height/...
* 表单标签的属性:name/value/type/checked/disabled/selected...
*/
</script>
</body>
如果html标签中的这个属性和值,都是自己,并且只有一个,此时在js代码的DOM操作中值就是布尔类型, checked,selected,disabled…
<body>
<div id="dv1">
<input type="button" value="选择性别" id="btn1" />
<input type="radio" value="2" name="sex" id="ck"/>女
</div><div id="dv2">
<input type="button" value="选择兴趣" id="btn2" />
<input type="checkbox" value="1" name="xingque"/>吃饭
<input type="checkbox" value="2" name="xingque"/>睡觉
<input type="checkbox" value="3" name="xingque" id="ddd"/>打豆豆
</div>
<div id="dv3">
<input type="button" value="选择城市" id="btn3"/>
<select id="s1"><option value="1">北京</option><option value="2">上海</option><option value="3">重庆</option><option value="4" id="op1">天津</option>
</select>
</div><script>
//点击按钮选择性别
//根据id获取按钮,添加点击事件,添加事件处理函数
document.getElementById("btn1").onclick=function () {//根据id获取性别为女的这个input标签document.getElementById("ck").checked=true;
};//选择性别
document.getElementById("btn2").onclick=function () {document.getElementById("ddd").checked=true;
};//选择城市
document.getElementById("btn3").onclick=function () {document.getElementById("op1").selected=true;
};
</script></body>
