JSwindow对象和Dom对象

本文深入讲解JavaScript中的window对象和DOM对象操作,包括弹窗、页面加载事件、定时器、元素查找与修改等内容,帮助读者掌握网页交互与动态更新的关键技术。

1.window对象:用于窗体的操作,页面常用事件/方法.
        ①弹窗操作
            alert("对话框");   //弹窗  
            prompt("输入框");  //输入框
            confirm("确认框"); //确认框
            
        ②打开和关闭窗口:
            window.open("地址");//打开指定的页面
            window.close();     //关闭当前页面
            
        ③页面加载事件:  !!!
            //A:页面加载时候就要完成某个操作
            //B:对元素加事件 写在加载事件中
            //C:一个页面中只能一个onload事件  多个会覆盖
            window.onload=function(){
                //元素加载完成之后做的操作
            }
            
        ④定时器事件 反复执行某个操作  !!!
            var timer = setInterval(function(){
            },时间);
            停止:
            clearInterval(timer);
            
        ⑤延时执行事件  等一段时间再执行这个操作
            setTimeout(function(){
            
            },时间);
            
        ⑥设置页面的地址:
            window.location="url地址";
            
        ⑦设置浏览历史:
            history.back();     //后退
            history.forward();  //前进
            history.go(1);  //前进一次
            history.go(-1);  //后退一次
            
    2.Dom对象:对页面的元素进行操作  原生js操作太复杂
        ①找元素  直接通过元素属性去找   通过层级关系去找   
            直接通过元素去找
            document.getElementById("id值");  //通过id去查找  唯一的
            document.getElementsByClassName("类名称去查找") 
                                            //通过class查找 数组 下标访问
            document.getElementsByName("name名称去查找")  表单元素
                                            //通过name查找 数组 下标访问
            document.getElementsByTagName("标签名称")  
                                            //通过标签名称查找 数组 下标访问
            
            
            通过层级关系去找:
        document.getElementById("item1").parentNode; //返回父节点
        document.body.childNodes;//子节点集合
        document.body.firstChild;//第一个子节点
        document.body.lastChild;//最后一个子节点,如果没有子节点返回null
        document.getElementById("item1").nextSibling();//后面的那个兄弟节点
        document.getElementById("item1").previousSibling();//前面的那个兄弟节点
        
        ②修改/操作元素:
            改内容
            改属性 
            改样式
            
            内容:
            .innerText="文本内容";  //修改标签的内容 不解析HTML标签
            .innerHtml="内容";      //修改标签的内容 解析HTML标签
            .value="内容";          //修改表单的值
            
            属性:
            .setAttribute("属性",值);
            .getAttribute("属性");
            
            样式: 
            .style.css样式=值;  //设置行内样式  样式优先级特别高
            .className="类名称";  //添加一个类样式 class=“类名称” 写法更合理

### BOM对象 BOM即浏览器对象模型(Browser Object Model),它提供了独立于内容而与浏览器窗口进行交互的对象,主要用于操作浏览器窗口。以下是一些主要的BOM对象及其作用: - **window**:是浏览器窗体对象,也是BOM的核心对象,其他BOM对象都是它的属性。它可对浏览器窗口进行操作,如创建弹出窗口、设置定时器等。 ```javascript // 打开一个新窗口 window.open('https://www.example.com', '_blank'); ``` - **location**:为浏览器地址栏对象,能获取或修改当前页面的URL地址,例如实现页面跳转等功能。 ```javascript // 获取当前页面的URL console.log(window.location.href); // 跳转到指定页面 window.location.href = 'https://www.newpage.com'; ``` - **history**:作为历史记录对象,可操控浏览器的历史记录,实现前进、后退等操作。 ```javascript // 后退一页 window.history.back(); // 前进一页 window.history.forward(); ``` - **Navigator**:存放有关浏览器的信息,可用于识别用户使用的浏览器类型等信息。 ```javascript // 获取浏览器的用户代理信息 console.log(window.navigator.userAgent); ``` - **Screen**:存放客户端显示屏幕的信息,如屏幕分辨率等。 ```javascript // 获取屏幕的宽度 console.log(window.screen.width); ``` ### DOM对象 DOM即文档对象模型(Document Object Model),当HTML文档在被解析为一颗DOM树以后,里面的每一个节点都可以看做是一个一个的对象,称为DOM对象。document是JavaScript内置的专门用于DOM对象,该对象包含了若干的属性方法,是学习DOM的核心[^1]。可以对DOM对象进行各式各样的操作,查找到某一个或者一类节点对象,可以创建某种节点对象,可以在某个位置添加节点对象,甚至可以动态地删除节点对象,这些操作可以使页面看起来有动态的效果,后期结合事件使用,就能让页面在特定时机、特定的事件下执行特定的变换[^2]。 ```javascript // 通过 document 获取根节点 console.log(document.documentElement); // 对应 html 标签 // 通过 document 节取 body 节点 console.log(document.body); // 对应 body 标签 // 通过 document.write 方法向网页输出内容 document.write('Hello World!'); // 通过 JavaScript 操作 DOM,实现点击按钮后修改段落内容 var button = document.getElementById('myButton'); var paragraph = document.getElementById('myParagraph'); button.addEventListener('click', function() { paragraph.innerText = "按钮被点击了!"; }); ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值