一、BOM

1、browser object model的缩写，简称浏览器对象模型

2、提供与浏览器窗口进行交互的对象

3、核心对象：window。除此之外还有：history,localtion,navigator等

4、BOM由一系列对象构成，并且每个对象都提供了很多方法与属性

5、BOM最初是Netspace浏览器标准的一部分

二、DOM

1、DOM是文档对象模型

2、获取HTML元素的最基本的三种方式：getElementById，getElementsByTagName，getElementsByClassName

3、关于HTML属性的几点：

（1）修改HTML元素文本值用innerHTML属性（innerText属性）。

<body>　　　　

<p><div id="div" style="border:1px #ff0000 dashed;"><span>这是一个层</span></div>
            <input name="innerHTML" value="innerHTML" type="button" OnClick="alert(div.innerHTML);">
            <input name="outerHTML" value="outerHTML" type="button" OnClick="alert(div.outerHTML);">
            <input name="innerText" value="innerText" type="button" OnClick="alert(div.innerText);">
            <input name="outerText" value="outerText" type="button" OnClick="alert(div.outerText);">
            <br>
            innerHTML 设置或获取位于对象起始和结束标签内的 HTML <br>
            outerHTML 设置或获取对象及其内容的 HTML 形式 <br>
            innerText 设置或获取位于对象起始和结束标签内的文本 <br>
            outerText 设置(包括标签)或获取(不包括标签)对象的文本 <br><br>
            </body>

(2)如需改变 HTML 元素的属性：document.getElementById(id).attribute=新属性值

        (3)改变css样式：document.getElementById(id).style.property=新样式

例如：document.getElementById("p2").style.color="blue";

document.getElementById("p2").style.fontFamily="Arial";

document.getElementById("p2").style.fontSize="larger";

4、DOM元素（节点）：即节点的增删改

a)  添加节点：

A.首先首先创建文本节点：createTextNode

B.再创建该元素（元素节点）：createElement

C.接着必须向创建该元素节点追加这个文本节点：para.appendChild(node);

D.然后向一个已存在的元素追加该元素: appendChild            element.appendChild(para);

b) 删除节点:[ DOM 需要清楚您需要删除的元素，以及它的父元素。]

A.首先找到你要删除的节点元素：var parent=document.getElementById("div1");

B.再找到你要删除节点的父元素：var child=document.getElementById("p1");

常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素。

C.开删（从父元素中删除子元素）：removeChild                  parent.removeChild(child);

c) 替换

A.找到要被替换的节点：var liTag = document.getElementById("apple");

B.创建替换节点：var textNode = document.createTextNode("平安果");

C.开始替换：liTag.replaceChild(textNode,liTag.firstChild);//firstChild指的是ID为apple的第一个孩子，而后面的就不能再被替换。

d) 在指定元素之前插入：insertBefore

e)在指定元素之后插入：

A.extSibling返回相同节点树层级的下一个节

B.insertBefore

5、DOM事件：

a)  常用的：

onclick（单击）  ondblclick（双击）

onmou wn（按下鼠标） onmouseup（释放鼠标） onclick（完成鼠标点击）

onmousemove（移入）  onmouseout（移出）

onkeydown (键盘按键被按下) onkeypress(键盘按键被按下并松开) onkeyup (键盘按键被松开)

onload    onunload(用户退出页面。 ( <body> 和 <frameset>))

onfocus    onblur

target      返回触发此事件的元素（事件的目标节点）。

type        返回当前 Event 对象表示的事件的名称。

addEventListener() 允许在目标事件中注册监听事件(IE8 = attachEvent())

removeEventListener() 运行一次注册在事件目标上的监听事件(IE8 = detachEvent())

button     返回当事件被触发时，哪个鼠标按钮被点击。

clientX   返回当事件被触发时，鼠标指针的水平坐标。

clientY    返回当事件被触发时，鼠标指针的垂直坐标。

screenX 返回当某个事件被触发时，鼠标指针的水平坐标。

screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。

shiftKey          返回当事件被触发时，"SHIFT" 键是否被按下。

keyCode 返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。

which 返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。

onresize(窗口或框架被重新调整大小)

onsearch(用户向搜索域输入文本时触发 ( <input="search">))

onsubmit(表单提交时触发)

onselect

(用户选取文本时触发 ( <input> 和 <textarea>)

oninput(元素获取用户输入时触发)

onreset(表单重置时触发)

onpause 事件在视频/音频（audio/video）暂停时触发。

onplay    事件在视频/音频（audio/video）开始播放时触发。

transitionend 该事件在 CSS 完成过渡后触发。

BOM和DOM(精简版)的更多相关文章

  1. DOM精简版笔记

    1.1.    基本概念 1.1.1.       DOM DOM Document Object Model 文档对象模型 就是把HTML文档模型化,当作对象来处理 DOM提供的一系列属性和方法可以 ...

  2. Vue精简版风格指南

    前面的话 Vue官网的风格指南按照优先级(依次为必要.强烈推荐.推荐.谨慎使用)分类,且代码间隔较大,不易查询.本文按照类型分类,并对部分示例或解释进行缩减,是Vue风格指南的精简版 组件名称 [组件 ...

  3. BOM，DOM，ECMAScripts三者的关系

    一:DOM 文档对象模型(DOM)是表示文档(比如HTML和XML)和访问.操作构成文档的各种元素的应用程序接口(API) DOM是HTML与JavaScript之间沟通的桥梁.   DOM下,HTM ...

  4. Linux上oracle精简版客户端快速部署

    RHEL6 + Oracle 11g客户端快速部署 需求:只是用到客户端的sqlplus, sqlldr功能. 方案:用精简版实现客户端的快速部署 1.上传oracle精简版客户端到服务器/tmp目录 ...

  5. ArcGIS10.2.1精简版、ArcGIS_Desktop10_Tutorial、破解文件等下载地址

    原版ArcGIS for Desktop的ISO文件一般都在4.5G以上,一般人用不上里面很多工具,下载回来又浪费时间,现推出ArcGIS10.2.1精简版(里面只包含主程序.Data Interop ...

  6. TeamViewer12.0.71503(远程控制软件)精简版 单文件企业版介绍

    TeamViewer 是一款能在任何防火墙和 NAT 代理的后台用于远程控制,桌面共享和文件传输的简单且快速的解决方案.为了连接到另一台计算机,只需要在两台计算机上同时运行 TeamViewer 即可 ...

  7. Log4j快速使用精简版

    Log4j快速使用精简版 1.导入log4j-1.2.17.jar包 2.在src根目录下创建log4j.properties文件 log4j.rootLogger=INFO, CONSOLE, FI ...

  8. VMware10.06精简版安装后台运行

    VMware10.06精简版安装时会出现一个安装功能选择菜单,里面有一条后台运行必选功能,一般人会跳过条.当你打算在服务器上用vmware时,一定要安装后台运行服务,否则你无法换出正在运行的后台虚拟机 ...

  9. [异常解决] ubuntu上安装虚拟机遇到的问题（vmware坑了，virtual-box简单安装，在virtual-box中安装精简版win7）

    利用周末时间将整个电脑格式化,换成了ubuntu系统- 所谓:扫清屋子再请客! 但是有些软件只在win上有,于是还是考虑装个虚拟机来个——逐步过度策略,一点点地从win上转移到linux上 我的系统是 ...

随机推荐

  1. Android中帧布局-FrameLayout和网格布局-GridLayout

    帧布局-FrameLayout 一.概念 帧布局中,容器为每个加入其中的空间创建一个空白的区域(成为一帧).每个空间占据一帧,这些帧会按gravity属性自动对齐. 帧布局的效果是将其中的所有空间叠加 ...

  2. ajax 另外两种返回类型（json xml）

    返回json类型(例子): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  3. [问题2014A09] 复旦高等代数 I（14级）每周一题（第十一教学周）

    [问题2014A09]  设 \(A,B\) 分别是 \(3\times 2\), \(2\times 3\) 矩阵且满足\[AB=\begin{bmatrix} 8 & 2 & -2 ...

  4. sql索引实例

    1.创建表并插入数据 在Sql Server2008中创建测试数据库Test,接着创建数据库表并插入数据,sql代码如下: USE Test IF EXISTS (SELECT * FROM INFO ...

  5. 关于无法把程序（Adobe Fireworks CS5）添加到打开方式的解决办法

    关于无法把程序(Adobe Fireworks CS5)添加到打开方式的解决办法 最近换了新版的Adobe Fireworks CS5,发现打开图片文件时在右键“打开方式”里仍然是以前的Firewor ...

  6. kali linux安装virtualbox虚拟机之爬坑经历

    很多kali爱好者想把kali linux作为系统使用,但是有些win下的程序有时候也需要用到,此时需要虚拟机. kali系统在安装虚拟机的时候也会遇到一大堆坑,接下来是我的爬坑过程. 一波三折. 环 ...

  7. MYSQL添加新用户 MYSQL为用户创建数据库 MYSQL为新用户分配权限

    1.新建用户 //登录MYSQL @>mysql -u root -p @>密码 //创建用户 mysql> insert into mysql.user(Host,User,Pas ...

  8. 单据BE构建

    本节来构建单据BE1.新建单据BE实体项目,修改命名空间 2.引入单据基类如下图所示,在UFIDA.U9.Base.BaseBE.MetaData命名空间下将类Doc托至设计BE视图中 3.分别托2个 ...

  9. 《BI那点儿事》三国数据分析系列——蜀汉五虎上将与魏五子良将武力分析，绝对的经典分析

    献给广大的三国爱好者们,希望喜欢三国的朋友一起讨论,加深对传奇三国时代的了解 数据分析基础概念:集中趋势分析是指在大量测评数据分布中,测评数据向某点集中的情况.总体(population)是指客观存在 ...

  10. 根据多年经验整理的《互联网MySQL开发规范》

    一.基础规范 使用 INNODB 存储引擎 表字符集使用 UTF8  所有表都需要添加注释 单表数据量建议控制在 5000W 以内 不在数据库中存储图⽚.文件等大数据 禁止在线上做数据库压力测试 禁⽌ ...