【JavaScript学习整理】DOM对象(location history screen navigator)

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