BOM与DOM简介

一、BOM

* BOM 概述
browser object modal :浏览器对象模型。
浏览器对象:window对象。
Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。

* BOM 的各个对象
     * window对象
            innerHeight,innerWidth 
            document.body.clientWidth,document.body.clientHeight,
            self
            opener :超链和window.open() 
            parent : iframe和frame
            frames[]:

            三种对话框: alert(),prompt(),confirm()
            定时器: setTimeout(),setInterval() 

            模态窗口: showModalDialog() ,showModelessDialog() 

    *  History对象
            forward() ,back(),go()
    *  Location对象.

二、常用事件

* 事件(掌握,明白每个事件发生的时机)
    鼠标移动事件
    * onmousemove(event) : 鼠标移动事件 event是事件对象。名字固定 
    * onmouseover : 鼠标悬停事件
        鼠标悬停事件: 当鼠标移动到某个控件上面的时候发生
            this: 把this写在那个标签里面就代表那个标签对象
            this.style.backgroundColor : 当调用样式表中的属性的时候,如果属性中间有横杠,则应去掉.

         示例: 当鼠标移动到p标签上的时候,p标签改变样式  (参见demo01_鼠标悬停事件.html)
    * onmouseout : 鼠标移出事件
        鼠标移开事件: 当鼠标从控件上移开的时候
        示例参见(demo_02_鼠标移开事件.html ;

* 鼠标点击事件
    onclick : 当鼠标单击某个控件时发生
        示例: 当单击按钮时,在<p>中显示字符串 "冠希哥来了" 参见(demo03_鼠标单击事件.html)

* 加载与卸载事件 
    onload ,onunload
        加载事件(onload) : 在整个页面的元素加载完毕之后发生
        卸载事件(onunload) : 是在页面关闭时发生 
          注意: onload和onunload事件必须写在body或者图片标签里面
          示例参见(demo04_加载卸载事件.html)

* 聚焦与离焦事件
    onfocus, onblur
        聚焦事件:是在控件获得焦点的时候发生
        离焦事件:是在控件失去焦点的时候发生


        示例: 文本框获得焦点的时候改变样式,失去焦点时变回原样(参见demo05_聚焦离焦事件.html)

* 键盘事件
    onkeypress,onkeyup,onkeydown
        onkeypress: 按下键盘按键并松开
        onkeydown : 按下按键发生
        onkeyup: 松开按键

        示例参见(demo06_键盘事件.html`)


* 提交与重置事件
    onsubmit,onreset
    提交事件: 是在点击提交按钮后发生。(必须写在form表单中)
    重置事件: 是在点重置交按钮后发生。


    示例: 提交表单中的数据(检查):如果是陈冠希:通过,否则不能提交数据(参见demo07_提交重置事件.html)



* 选择与改变事件
    onselect:
    onchange:

    onselect: 只能用于输入框. 当选择输入框中的文本时发生
    onchange: 用于select和文本框.
                对于下拉框是在选项发生变化的时候发生
                对于文本框是在文本框的内容发生变化并且失去焦点时发生


        示例: 当选择文本框的内容时,弹出文本框的内容
        下拉框的selectedIndex属性:代表选中某项的索引 
        参见(demo08_选择与改变事件.html)

三.DOM

1.Dom概述?

    * 什么是DOM?  docuemnt object model 文档对象模型
    * 它的作用?   重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目
    * 分类?   
         Core DOM :   定义了一套标准的针对任何结构化文档的对象 
         XML  DOM :   定义了一套标准的针对 XML 文档的对象 
         HTML DOM :   定义了一套标准的针对 HTML 文档的对象。 
    *.xml介绍?
        expensible markup language : 可扩展标记语言.
            <penson>
                <name>张无忌</name>
                <age>23</age>
            </person>

2.DOM树

* 结点 :   文档中的每个成分都是一个节点.(包括文本也是节点)
*.结点的属性
    a. nodeName(节点名称) 
        元素节点的 nodeName 是标签名称 
        属性节点的 nodeName 是属性名称 
        文本节点的 nodeName 永远是 #text 
        文档节点的 nodeName 永远是 #document 


    b. nodeValue(节点值) 
        对于文本节点,nodeValue 属性包含文本。
        对于属性节点,nodeValue 属性包含属性值。
        nodeValue 属性对于文档节点和元素节点是不可用的。


    c. nodeType(节点类型)  : nodeType 属性可返回节点的类型。
        标签节点的类型值是 1
        属性节点的类型值是 2
        文本节点的类型值是 3


*. 结点的分类
        整个文档是一个文档节点 
        每个 XML 标签是一个元素节点 
        包含在 XML 元素中的文本是文本节点 
        每一个 XML 属性是一个属性节点 
        注释属于注释节点 


*.结点的关系
        只有父子和兄弟关系
        parentNode  : 父节点
        childNodes  :所有的子标签
        firstChild  :第一个儿子
        lastChild  :最后一个儿子
        nextSibling :下一个兄弟节点
        previousSibling : 上一个兄弟节点


*. 对结点进行CRUD操作
    *.查找结点?

两种方式:
a. 采用节点之间的关系去拿 根节点:document.documentElement ;
b. 采用方法去拿
getElementById() : 根据标签的ID拿到此标签节点
getElementsByTagName() : 根据标签的名字拿到此标签节点数组
getElementsByName(): 适用于表单控件。根据标签的name属性值拿到控件的数组。

    *.删除结点?
        removeChild() : 采用父节点删除子节点
        参见示例()

    *创建节点:
        document.createElement()  : 创建一个标签节点
                参见 demo15_表格添加行.html
        docuemnt.createTextNode("内容") :创建一个文本节点
                参见 demo14_添加节点.html
        节点的setAttribute() :添加属性节点
                参见 demo14_添加节点.html

    *.添加结点?
        appendChild() : 添加子节点
            参见 demo14_添加节点.html
            参见 demo15_表格添加行.html

    *.修改或替换结点?
        replaceNode(): 替换节点(适用于IE)
        replaceChild() : 替换子节点

在javascript中想调用html代码: 只能通过属性innerHTML
在javascript中想调用CSS代码: 只能通过属性clasName可以调用样式表
 .style.属性

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
评论

打赏作者

范培华

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值