BOM与DOM简介

来源：互联网发布：2016淘宝睡衣模特红人编辑：程序博客网时间：2024/05/17 23:30

一、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.属性

0 0