【JavaScript学习整理】DOM对象(location history screen navigator)
2024-09-04 14:08:51
DOM: 描述网页各个组成部分之间的关系.
- parentNode: 父节点
- childNode: 子节点
- firstChild: 第一个子节点
- lastChild: 最后一个子节点
- nextSibling: 下一个姐妹或兄弟节点
- previousSibling: 前一个兄弟节点
案例:打开网页出现随机位置星星,点击星星,星星消失
<script type="text/javascript">
window.onload = init;
function init() {
window.setInterval("star()", 1000);
}
function star() {
var obj = document.createElement("img");
obj.src = "../static/img/xingxing.gif";
//随机星星大小
var w = Math.floor(Math.random()*80 + 20);
obj.width = w;
//随机位置
var x = Math.floor(Math.random()*1166+100);
var y = Math.floor(Math.random()*500+100);
obj.style.position = "absolute";
obj.style.top = y + "px";
obj.style.left = x + "px";
document.body.appendChild(obj);
}
</script>
2.点击星星,星星消失
绑定事件onclick
//添加点击事件
obj.onclick = removeStar;
在绑定事件中,this可以直接使用
obj.onclick = abc;
removeChild(obj)
//点击删除星星
function removeStar() {
this.parentNode.removeChild(this);
}
screen对象
- screen height 获取屏幕的高度
- screen width 获取屏幕的宽度
- availheight 获取除去任务栏的高度
- availwidth 获取除去任务栏的宽度
navigator对象
- appName: 浏览器名称
- appCodeName: 是一个只读字符串,生命了浏览器的代码名
- appVerison: 返回浏览器的平台和版本信息
- userAgent: userAgent的头部信息
location对象
- 属性: href 返回当钱完整URL
- 方法: assign() 加载新的文档,会产生历史记录
- 方法: reload() 重新加载当前文档
- 方法: replace() 用新的文档替换当钱文档,不会产生历史记录.
案例: 实现页面自动跳转
window.onload = init;
function init() {
window.setTimeout("redirect()", 5000);
window.setInterval("change()", 1000);
}
function change() {
var obj = document.getElementById("d1");
obj.innerHTML=obj.innerHTML - 1;
}
function redirect() {
location.replace("http://www.baidu.com")
}
history对象: 实际是JavaScript对象,它由一些列的URL组成,是用户在一个浏览器窗口已访问的URL
- history.length 同一个浏览器窗口访问的URL的数量
- history.back 回退
- history.go 去往history列表中某个URL
- history.forward 前进
最新文章
- cocoapods无法使用(mac os 10.11升级导致pod: command not found)
- lua 自己编译源文件
- RuntimeWarning: invalid value encountered in divide
- MyISAM表锁
- Django 1.6 的测试驱动开发
- 带你走近AngularJS - 创建自己定义指令
- 二.ubuntu14.04 3D特效设置
- 笔记本shift变粘贴,粘滞键设置已关闭
- c语言的,三个工具可以使编译器生成性能更佳的代码。
- Java五道输出易错题解析(进来挑战下)
- Bootstrap模态框垂直高度居中问题
- javascript基础修炼(8)——指向FP世界的箭头函数
- MyBatis 工作原理
- 01-01java概述 doc命令、jdk\jre下载安装、path、classpath配置、开发中常见小问题
- [图片生成]使用VAEs生成新图片
- Beyond Compare脚本:命令行批量比较文件并生成html格式的差异报告
- windows redis 后台运行
- ansible debug模块学习笔记
- CentOS 6.9/7通过yum安装指定版本的JDK/Maven
- Opencv Harris角点检测