导航
document:是根节点
parentNode:获取父节点
childNode:获取所有子节点
firstChild:第一个子节点
lastChild:获取最后一个子节点
<body>
<div name="第一章">
<p id="p1">第一段<span>第一句</span><span>第二句</span></p>
</div>
<input type="button" value="获取p1父节点的name属性" onclick="fun1()"/>
<input type="button" value="显示p1子节点的个数" onclick="fun2()"/>
<input type="button" value="获取p1第一个子节点的节点类型" onclick="fun3()"/>
<input type="button" value="获取p1最后一个子节点的节点类型" onclick="fun4()"/>
</body>
<script type="text/javascript">
var p1 = document.getElementById("p1")
function fun1(){
var value = p1.parentNode.getAttribute("name")
alert(value)
}
function fun2(){
var child = p1.childNodes
alert(child.length)
}
function fun3(){
alert(p1.firstChild.nodeType)
}
function fun4(){
alert(p1.lastChild.nodeType)
}
</script>
BOM
概念browser object model
常用对象
window:窗口,浏览器的窗口
我们定义的全局变量和全局函数都是window对象的属性和方法
<script type="text/javascript">
var a=1;
function test(){
var a=2;
alert(a);//2
alert(window.a);//1
}
test()
</script>
全局变量是window的属性。
全局函数是window的方法:
window.innerWidth:窗口 body的宽度
window.innerHeight:窗口 body的高度
常用的方法
Open:打开一个新的窗口。要传三个参数;第一个将要打开窗口的路径地址;第二个为打开的方式;第三个为对于新打开的浏览器的描述(宽,高等等)
var myWindow = window.open("https://www.baidu.com", "_blank", "width=200,height=300");
Close:关闭一个窗口
myWindow.close();
moveTo:移动一个窗口,以窗口的左上角为坐标起点
myWindow.moveTo(200,200);
focus:使窗口获得焦点
myWindow.focus();
resizeTo:改变窗口的大小
myWindow.resizeTo(1000,1500);
screen:屏幕 也是window下面的一个对象 在使用的时候也可以用window.screen
也可以省略window
屏幕的常用属性:宽、高;可用宽与可用高(可用高不包括任务栏)
<script type="text/javascript">
var scrWidth = window.screen.width;
var scrHeight = screen.width;
document.write("屏幕的宽:"+scrWidth+"\n"+"屏幕的高":+scrHeight);
var scrAvaWidth = screen.availWidth;
var scrAvaHeight = screen.availHeight;
document.write("屏幕的宽:"+scrAvaWidth+"\n"+"屏幕的高:"+scrAvaHeight);
</script>
location:地址
常用属性:href 完整路径 port端口号 pathname 路径名 protocol 协议
常用方法
打开一个新的路径(窗口)
location.assign("http://www.baidu.com");
刷新:普通刷新和强制刷新
<script type="text/javascript">
function fun1(){
location.reload();
}
</script>
如果传值为TRUE,那么就是强制刷新
history:历史记录
记录当前窗口的历史,也可以进行页面的转换
方法:
back—回到上一页
forward—进入下一页
go—进入确定的那一页(-1回到上一页)
history.back()
history.forward()
history.go(-1)
弹窗
Alert();警告提示框,也是window下的方法(window.alert()),window可以省略不写
prompt(“请输入内容”,“默认值”)信息提示输入框,也是window下的方法,window也可以不写,当我们点击确定时,才会把指返回,否则为空
var str = prompt("请输入内容","Hello world")//请输入内容就是提示的信息
//后面的hello world 是默认值
confirm(“提示的信息”) 确认框,也是window下的方法,window也可以省略不写
当点击确定的时候,返回true,如果点取消,返回false
var isRight = confirm("是否确定删除")
document.write(typeof(isRight)+isRight)
cookie
cookie的作用:在本地浏览器储存数据,经常用于记住账号等等
cookie组成:
键值对的形式
username=asdasd pwd=123456 phone=6863087
有效期:expires=今天以后的时间
存储cookie
按照cookie的形式写好一个字符串,然后把它复制给document.cookie 浏览器就会缓存这个cookie,可以存储多个键值对,但是键的名字不能重复
获取cookie
通过document.cookie就能得到浏览器之前存储的cookie,是一个字符串,将这个字符串解析,就能得到自己想要的内容