A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 赵永旗 初级黑马   /  2019-6-1 14:47  /  846 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

DOM简单使用

        DOM:Document Object Model   文档对象模型

        1.获取标签对象

                根据id获取标签对象:getElementById(id值);

                练习:01_DOM_获取元素对象.html

       

事件:

        鼠标单击事件:onclick

        练习:02_事件绑定.html

        案例:03案例1电灯开关.html     电风扇.html

BOM:Browser Object Model   浏览器对象模型

        1.Navigate:浏览器对象

        2.Screen:屏幕对象

        3.window:窗口对象

                * 方法:

                        alert()    弹出警告框

                        【重点】confirm()  确认取消框    确认true   取消false

                        prompt()   修改框

                    open()           打开新窗口   返回值是一个新窗口对象
                    close()    关闭窗口
   
                    一次性定时器:
                            setTimeOut(参数1,参数2)    参数1:js代码   参数2:毫秒值    达到指定毫秒,自动执行js代码。  会返回定时器编号
                            clearTimeOut(参数);  参数:定时器编号。   取消指定的定时器
                    循环定时器:
                            setInterval(参数1,参数2);   参数1:js代码   参数2:毫秒值    达到指定毫秒,自动执行js代码。  会返回定时器编号
                            clearInterval(参数)   参数:定时器编号。   取消指定的定时器
            * 属性
                    navigate
                    screen
                    location
                    history
            * 练习:
                    04_Window对象.html
                    05_案例2_轮播图.html
    4.Location:地址栏对象
            * 方法:
                    reload()   刷新当前页面
            * 属性:
                    href       跳转的url路径地址
            * 练习:
                    06_Location对象.html
                    07_案例3_自动跳转.html
    5.History:当前窗口历史记录对象
            * 方法:
                    back()     后退到前一个页面
                    forward()  前进到后一个页面
                    go(数字)   根据传递的数字来进行前进或后退页面
            * 属性:
                    length     获取当前页面历史记录的个数
            * 练习:
                    08_History对象.html
   

DOM:

DOM:

        DOM:Document Object Model   文档对象模型

        1. Document 文档对象

                * 获取方法

                        根据id值来获取指定的元素对象:getElementById()

                        根据标签名称来获取多个元素对象:getElementsByTagName()

                        根据class属性来获取多个元素对象:getElementsByClassName()

                        根据name属性值来获取多个元素对象:getElementsByName()   常用于表单项中的单选、复选~~~

                * 创建方法

                        创建标签对象:createElement()

                        创建属性对象:createAttribute()

                        创建文本对象:createTextNode()

                * 练习:

                        10_Document对象.html

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马