BOM对象
browser object model: 浏览器对象模型
有哪些对象?
navigator: 获取客户机(浏览器)的信息
screen: 获取屏幕的信息
location: 请求url地址
history: 请求的url历史记录,类似a.html跳转b.html,b.html跳转c.html. history.back()到访问的上一个页面 history.forward()到访问的下一个页面. history.go(-1)到上一个页面. history.go(1)到下一个页面
window(重点掌握)表示一个窗口对象,所有的bom对象都是在window对象里面操作的
alert弹出一个窗口
confirm确认窗口
prompt输入窗口,第一个参数显示的内容,第二个参数输入框的值
open打开一个新的窗口
close关闭窗口
做定时器
setInterval();按照指定的毫秒数执行任务 参数一js代码 参数二毫秒数
setTimeout();在指定的毫秒数之后执行 参数一js代码 参数二毫秒数
clearInterval();清除掉setInterval()设置的定时器
clearTimeout();清除掉setTimeout()设置的定时器
<script>
var flag = window.confirm("是否删除?");
if(flag == true) {
alert("删除成功");
} else {
alert("删除失败");
}
</script>
<script>
window.prompt("please input:","1");
</script>
<input type="button" value="打开新窗口" onclick="open1();"/>
<script>
function open1() {
window.open("https://www.baidu.com","","width=200,height=100");
}
</script>
<script>
setInterval("alert('1')",3000); //每3秒弹出一次alert窗口
</script>
<script>
setTimeout("alert('abc')",3000); //3秒之后执行js代码,只执行一次
</script>
DOM对象
document object model: 文档对象模型
超文本,html, xml都属于文档对象
dom解析html的过程入下图:
DOM解析html和xml的过程
document对象表示整个文档,每个载入浏览器的html都会成为document对象
document对象常用方法:
write()向页面输出文字和html代码
<script>
var str = "abc";
document.write(str);
document.write("<hr/>");
</script>
getElementById()根据标签id得到标签
<input type="text" id="btn" value="aaa"/>
<br/>
<script>
var input1 = document.getElementById("btn");
input1.value = "bbb";
</script>
getElementsByName()通过标签的name属性值来得到标签,返回的是一个集合(或者理解成数组)
<input type="text" value="111" name="aaa"/><br/>
<input type="text" value="222" name="aaa"/><br/>
<input type="text" value="333" name="aaa"/><br/>
<input type="text" value="444" name="aaa"/><br/>
<script>
var inputs = document.getElementsByName("aaa");
for(var i=0;i<inputs.length;i++) {
var input1 = inputs[i];
alert(input1.value);
}
</script>
getElementsByTagName()通过标签名称得到标签,返回一个集合(或者理解成数组),传递的参数是标签的名称
<input type="text" value="111" name="aaa"/><br/>
<input type="text" value="222" name="aaa"/><br/>
<input type="text" value="333" name="aaa"/><br/>
<input type="text" value="444" name="aaa"/><br/>
<script>
var inputs = document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++) {
var input1 = inputs[i];
alert(input1.value);
}
</script>
对于getElementsByName()只能得到一个标签,可以这么写
<input type="text" value="111" name="aaa"/>
<script>
var input2 = document.getElementsByName("aaa")[0];
alert(input2.value);
</script>
Window弹窗案例
编号: <input type="text" id="numid"/><br/>
姓名: <input type="text" id="nameid"/><br/>
<input type="button" value="选择" onclick="open1()"/>
<script>
function open1() {
window.open("a.html","","width=200,height=100");
}
</script>
a.html的h5代码如下
<table border="1" bordercolor="blue">
<tr>
<td>操作</td>
<td>编号</td>
<td>姓名</td>
</tr>
<tr>
<td><input type="button" value="选择" onclick="s1('100','东方不败')"/></td>
<td>100</td>
<td>东方不败</td>
</tr>
<tr>
<td><input type="button" value="选择" onclick="s2('101','东方不败')"/></td>
<td>101</td>
<td>岳不群</td>
</tr>
<tr>
<td><input type="button" value="选择" onclick="s3('102','东方不败')"/></td>
<td>102</td>
<td>林平之</td>
</tr>
</table>
<script>
function s1(num1,name1) {
//需要把num1和name1赋值到window页面
//夸页面的操作 opener:得到创建这个窗口的窗口 得到window页面
var pwin = window.opener;
pwin.document.getElementById("numid").value = num1;
pwin.document.getElementById("nameid").value = name1;
window.close();
}
function s2(num2,name2) {
//需要把num1和name1赋值到window页面
//夸页面的操作 opener:得到创建这个窗口的窗口 得到window页面
var pwin = window.opener;
pwin.document.getElementById("numid").value = num2;
pwin.document.getElementById("nameid").value = name2;
window.close();
}
function s3(num3,name3) {
//需要把num1和name1赋值到window页面
//夸页面的操作 opener:得到创建这个窗口的窗口 得到window页面
var pwin = window.opener;
pwin.document.getElementById("numid").value = num3;
pwin.document.getElementById("nameid").value = name3;
window.close();
}
</script>
这样就实现了两个页面之间的传值
做这个案例时候有一个问题
由于我们现在访问的是本地文件, js安全, 谷歌浏览器安全性较高, 不允许访问本地文件
但是在实际开发中, 没有这样的问题, 实际中不可能访问本地的文件
网友评论