BOM、DOM学习笔记——JavaScript详解编程语言

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

2. window的属性
     innerHeight:
     innerWidth:  IE不支持
          通用写法:document.body.clientWidth
                     document.body.clientHeight
     self :等同于window对象
     parent:是打开窗口的父窗口对象
     opener:是打开窗口的父窗口对象。
            2种情况下使用opener:
                   1.使用winodw.open()方法打开的页面
                   2.超链(里面的target属性要设置成_blank)
            2种情况下使用parent:
                   1.iframe 框架
                   2.frame 框架
     frames[]: 数组类型,代表子窗口的window对象的集合,可以通过frames[索引]拿到子窗口的window对象。
        示例:父子窗口相互传参.
     
    open方法,是打开一个页面.

    对话框:
         1)消息框 alert() ;
         2)确认框 confirm() ;
         3)输入框 prompt() ; (了解)

    定时器:
       setTimeout ,setInterval
         定时器: 1.setTimeout() :只会调用1次
                  2.setInterval() :每隔一段时间调用1次
 
3. history对象
     a.  forward()前进
     b.  back() 后退
     c.  go(n) 正数是前进,负数是后退.

4. location对象。
        1.href 属性: 是指要连接到其他的URL
                        写法一、window.location.href=’demo_window对象的close方法.html’ ;
                        写法二、window.location=’demo_window对象的close方法.html’ ;

        2.reload方法: 刷新
            写法: window.location.reload() ;

5.常用事件
    鼠标移动事件
        onmousemove(event) : 鼠标移动事件 event是事件对象。名字固定
        onmouseover : 鼠标悬停事件
        onmouseout : 鼠标移出事件
    鼠标点击事件
        onclick
    加载与卸载事件
        onload ,onunload
    聚焦与离焦事件
        onfocus, onblur
    键盘事件
        onkeypress,onkeyup,onkeydown
    提交与重置事件
        onsubmit,onreset
    选择与改变事件
   
/***************************************************************************/

一.BOM回顾
    * BOM 概述
    * 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标签改变样式
            鼠标移开事件: 当鼠标从控件上移开的时候
           
            
    * 鼠标点击事件
        onclick : 当鼠标单击某个控件时发生
            示例: 当单击按钮时,在<p>中显示字符串 “冠希哥来了”
            
    * 加载与卸载事件
        onload ,onunload
            加载事件(onload) : 在整个页面的元素加载完毕之后发生
            卸载事件(onunload) : 是在页面关闭时发生
              注意: onload和onunload事件必须写在body或者图片标签里面
            
              
    * 聚焦与离焦事件
        onfocus, onblur
            聚焦事件:是在控件获得焦点的时候发生
            离焦事件:是在控件失去焦点的时候发生

            示例: 文本框获得焦点的时候改变样式,失去焦点时变回原样
            
    * 键盘事件
        onkeypress,onkeyup,onkeydown
            onkeypress: 按下键盘按键并松开
            onkeydown : 按下按键发生
            onkeyup: 松开按键

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

        示例: 提交表单中的数据(检查):如果是陈冠希:通过,否则不能提交数据

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

            示例: 当选择文本框的内容时,弹出文本框的内容
            下拉框的selectedIndex属性:代表选中某项的索引
           

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属性值拿到控件的数组。
                
                以上示例参看:示例二. demo09_演示DOM节点属性并获取节点的方法.html;
                             示例二。demo10_示例一获取h1标签内容.html                         
                            
        *.删除结点?
            removeChild() : 采用父节点删除子节点
            参见示例()
        
        *创建节点:
            document.createElement()  : 创建一个标签节点
                    参见 demo15_表格添加行.html
            docuemnt.createTextNode(“内容”) :创建一个文本节点
                    参见 demo14_添加节点.html
            节点的setAttribute() :添加属性节点
                    参见 demo14_添加节点.html
                    
        *.添加结点?
            appendChild() : 添加子节点
                参见 demo14_添加节点.html
                参见 demo15_表格添加行.html
                
        *.修改或替换结点?
            replaceNode(): 替换节点(适用于IE)
            replaceChild() : 替换子节点
            
                参见demo13_节点的替换.html

    

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

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/13447.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论