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 前进

最新文章

  1. cocoapods无法使用(mac os 10.11升级导致pod: command not found)
  2. lua 自己编译源文件
  3. RuntimeWarning: invalid value encountered in divide
  4. MyISAM表锁
  5. Django 1.6 的测试驱动开发
  6. 带你走近AngularJS - 创建自己定义指令
  7. 二.ubuntu14.04 3D特效设置
  8. 笔记本shift变粘贴,粘滞键设置已关闭
  9. c语言的,三个工具可以使编译器生成性能更佳的代码。
  10. Java五道输出易错题解析(进来挑战下)
  11. Bootstrap模态框垂直高度居中问题
  12. javascript基础修炼(8)——指向FP世界的箭头函数
  13. MyBatis 工作原理
  14. 01-01java概述 doc命令、jdk\jre下载安装、path、classpath配置、开发中常见小问题
  15. [图片生成]使用VAEs生成新图片
  16. Beyond Compare脚本:命令行批量比较文件并生成html格式的差异报告
  17. windows redis 后台运行
  18. ansible debug模块学习笔记
  19. CentOS 6.9/7通过yum安装指定版本的JDK/Maven
  20. Opencv Harris角点检测

热门文章

  1. lower_bound() 与 upper_bound()
  2. CSS div固定顶端
  3. Android程序的打包和安装
  4. idea各种设置和学习
  5. ubuntu study
  6. RecyclerView的使用(3)之加入Header和Footer
  7. HDU-4031-Attack(树状数组)
  8. python 基础 9.5 数据库连接池
  9. Js拼接html并给onclick传多个参数
  10. centos下安装pip时失败: