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