Javaweb知识 day10 DOM知识&BOM知识

一、DOM简单学习

1.1 功能:控制html文档的内容

获取页面标签(元素)对象:Element

document.getElementById("id值"):通过元素的id获取元素对象

1.2 操作Element对象: 

修改标签体内容:

     属性:innerHTML

            1. 获取元素对象

            2. 使用innerHTML属性修改标签体内容

1.3 事件简单学习

功能: 某些组件被执行了某些操作后,触发某些代码的执行。

如何绑定事件:

直接在html标签上,指定事件的属性(操作),属性值就是js代码

比如:onclick--- 单击事件

1.4 案例1:电灯开关

        <!DOCTYPE html>

        <html lang="en">

        <head>

            <meta charset="UTF-8">

            <title>电灯开关</title>


        </head>

        <body>


        <img id="light" src="img/off.gif">


        <script>

            /*

                分析:

                    1.获取图片对象

                    2.绑定单击事件

                    3.每次点击切换图片

                        * 规则:

                            * 如果灯是开的 on,切换图片为 off

                            * 如果灯是关的 off,切换图片为 on

                        * 使用标记flag来完成


             */


            //1.获取图片对象

            var light = document.getElementById("light");


            var flag = false;//代表灯是灭的。 off图片


            //2.绑定单击事件

            light.onclick = function(){

                if(flag){//判断如果灯是开的,则灭掉

                    light.src = "img/off.gif";

                    flag = false;


                }else{

                    //如果灯是灭的,则打开


                    light.src = "img/on.gif";

                    flag = true;

                }



            }


        </script>

        </body>

        </html>

二、BOM:

2.1 概念:Browser Object Model 浏览器对象模型

将浏览器的各个组成部分封装成对象。

2.2 组成:

Window:窗口对象

Navigator:浏览器对象

Screen:显示器屏幕对象

History:历史记录对象

Location:地址栏对象

2.3 Window:窗口对象

2.3.1 方法

             1. 与弹出框有关的方法:

                alert()    显示带有一段消息和一个确认按钮的警告框。

                confirm()    显示带有一段消息以及确认按钮和取消按钮的对话框。

                    * 如果用户点击确定按钮,则方法返回true

                    * 如果用户点击取消按钮,则方法返回false

                prompt()    显示可提示用户输入的对话框。

                    * 返回值:获取用户输入的值

             2. 与打开关闭有关的方法:

                close()    关闭浏览器窗口。

                    * 谁调用我 ,我关谁

                open()    打开一个新的浏览器窗口

                    * 返回新的Window对象

             3. 与定时器有关的方式

                setTimeout()    在指定的毫秒数后调用函数或计算表达式。

                    * 参数:

                        1. js代码或者方法对象

                        2. 毫秒值

                    * 返回值:唯一标识,用于取消定时器

                clearTimeout()    取消由 setTimeout() 方法设置的 timeout。

                setInterval()    按照指定的周期(以毫秒计)来调用函数或计算表达式。

                clearInterval()    取消由 setInterval() 设置的 timeout。


2.3.2 属性:

            1. 获取其他BOM对象:

                history

                location

                Navigator

                Screen:

            2. 获取DOM对象

                document

2.3.3 特点:

            * Window对象不需要创建可以直接使用 window使用。 window.方法名();

            * window引用可以省略。  方法名();

2.4 Location:地址栏对象

        1. 创建(获取):

            1. window.location

            2. location

        2. 方法:

            * reload()    重新加载当前文档。刷新

        3. 属性

            * href    设置或返回完整的 URL。

2.5 History:历史记录对象

        1. 创建(获取):

            1. window.history

            2. history

        2. 方法:

            * back()    加载 history 列表中的前一个 URL。

            * forward()    加载 history 列表中的下一个 URL。

            * go(参数)    加载 history 列表中的某个具体页面。

                * 参数:

                    * 正数:前进几个历史记录

                    * 负数:后退几个历史记录

        3. 属性:

            * length    返回当前窗口历史列表中的 URL 数量。

三、DOM:

3.1 概念: Document Object Model 文档对象模型

将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作

3.2 W3C DOM 标准被分为 3 个不同的部分:

        * 核心 DOM - 针对任何结构化文档的标准模型

            * Document:文档对象

            * Element:元素对象

            * Attribute:属性对象

            * Text:文本对象

            * Comment:注释对象

            * Node:节点对象,其他5个的父对象


        * XML DOM - 针对 XML 文档的标准模型

        * HTML DOM - 针对 HTML 文档的标准模型

3.3 核心DOM模型:

3.3.1 Document:文档对象

创建(获取):在html dom模型中可以使用window对象来获取

window.document

方法:

获取Element对象:

getElementById(): 根据id属性值获取元素对象。id属性值一般唯一

getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组

getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组

getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组


3.3.2 创建其他DOM对象:

createAttribute(name)

createComment()

createElement()

createTextNode()


3.3.3 属性

Element:元素对象

获取/创建:通过document来获取和创建

方法:

removeAttribute():删除属性

setAttribute():设置属性

Node:节点对象,其他5个的父对象

特点:所有dom对象都可以被认为是一个节点

方法:CRUD dom树:

                    * appendChild():向节点的子节点列表的结尾添加新的子节点。

                    * removeChild():删除(并返回)当前节点的指定子节点。

                    * replaceChild():用新节点替换一个子节点。

属性:

       * parentNode 返回节点的父节点。

3.4 HTML DOM

3.4.1 标签体的设置和获取:innerHTML

3.4.2 使用html元素对象的属性

3.4.3 控制元素样式:

        1. 使用元素的style属性来设置

                如:

                     //修改样式方式1

                    div1.style.border = "1px solid red";

                    div1.style.width = "200px";

                    //font-size--> fontSize

                    div1.style.fontSize = "20px";

       2. 提前定义好类选择器的样式,通过元素的className属性来设置其class属性值。

四、事件监听机制:

    * 概念:某些组件被执行了某些操作后,触发某些代码的执行。    

        * 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了

        * 事件源:组件。如: 按钮 文本输入框...

        * 监听器:代码。

        * 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。

    * 常见的事件:

        1. 点击事件:

            1. onclick:单击事件

            2. ondblclick:双击事件

        2. 焦点事件

            1. onblur:失去焦点

            2. onfocus:元素获得焦点。

        3. 加载事件:

            1. onload:一张页面或一幅图像完成加载。

        4. 鼠标事件:

            1. onmousedown    鼠标按钮被按下。

            2. onmouseup    鼠标按键被松开。

            3. onmousemove    鼠标被移动。

            4. onmouseover    鼠标移到某元素之上。

            5. onmouseout    鼠标从某元素移开。



        5. 键盘事件:

            1. onkeydown    某个键盘按键被按下。    

            2. onkeyup        某个键盘按键被松开。

            3. onkeypress    某个键盘按键被按下并松开。

        6. 选择和改变

            1. onchange    域的内容被改变。

            2. onselect    文本被选中。

        7. 表单事件:

            1. onsubmit    确认按钮被点击。

            2. onreset    重置按钮被点击。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,681评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,710评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,623评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,202评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,232评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,368评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,795评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,461评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,647评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,476评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,525评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,226评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,785评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,857评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,090评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,647评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,215评论 2 341

推荐阅读更多精彩内容