黑马程序员技术交流社区

标题: BOM和DOM的简单总结 [打印本页]

---

作者: 赵永旗    时间: 2019-6-1 14:47
标题: BOM和DOM的简单总结
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

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2