BOM和DOM(精简版)
一、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>))
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(表单提交时触发)
|
(用户选取文本时触发 ( <input> 和 <textarea>) |
oninput(元素获取用户输入时触发)
onreset(表单重置时触发)
onpause 事件在视频/音频（audio/video）暂停时触发。
onplay 事件在视频/音频（audio/video）开始播放时触发。
transitionend 该事件在 CSS 完成过渡后触发。
BOM和DOM(精简版)的更多相关文章
- DOM精简版笔记
1.1. 基本概念 1.1.1. DOM DOM Document Object Model 文档对象模型 就是把HTML文档模型化,当作对象来处理 DOM提供的一系列属性和方法可以 ...
- Vue精简版风格指南
前面的话 Vue官网的风格指南按照优先级(依次为必要.强烈推荐.推荐.谨慎使用)分类,且代码间隔较大,不易查询.本文按照类型分类,并对部分示例或解释进行缩减,是Vue风格指南的精简版 组件名称 [组件 ...
- BOM，DOM，ECMAScripts三者的关系
一:DOM 文档对象模型(DOM)是表示文档(比如HTML和XML)和访问.操作构成文档的各种元素的应用程序接口(API) DOM是HTML与JavaScript之间沟通的桥梁. DOM下,HTM ...
- Linux上oracle精简版客户端快速部署
RHEL6 + Oracle 11g客户端快速部署 需求:只是用到客户端的sqlplus, sqlldr功能. 方案:用精简版实现客户端的快速部署 1.上传oracle精简版客户端到服务器/tmp目录 ...
- ArcGIS10.2.1精简版、ArcGIS_Desktop10_Tutorial、破解文件等下载地址
原版ArcGIS for Desktop的ISO文件一般都在4.5G以上,一般人用不上里面很多工具,下载回来又浪费时间,现推出ArcGIS10.2.1精简版(里面只包含主程序.Data Interop ...
- TeamViewer12.0.71503(远程控制软件)精简版 单文件企业版介绍
TeamViewer 是一款能在任何防火墙和 NAT 代理的后台用于远程控制,桌面共享和文件传输的简单且快速的解决方案.为了连接到另一台计算机,只需要在两台计算机上同时运行 TeamViewer 即可 ...
- Log4j快速使用精简版
Log4j快速使用精简版 1.导入log4j-1.2.17.jar包 2.在src根目录下创建log4j.properties文件 log4j.rootLogger=INFO, CONSOLE, FI ...
- VMware10.06精简版安装后台运行
VMware10.06精简版安装时会出现一个安装功能选择菜单,里面有一条后台运行必选功能,一般人会跳过条.当你打算在服务器上用vmware时,一定要安装后台运行服务,否则你无法换出正在运行的后台虚拟机 ...
- [异常解决] ubuntu上安装虚拟机遇到的问题（vmware坑了，virtual-box简单安装，在virtual-box中安装精简版win7）
利用周末时间将整个电脑格式化,换成了ubuntu系统- 所谓:扫清屋子再请客! 但是有些软件只在win上有,于是还是考虑装个虚拟机来个——逐步过度策略,一点点地从win上转移到linux上 我的系统是 ...
随机推荐
- YOU KNOW NOTHING , SNOW
JVM运行时数据区域 方法区: 用 于存储虚拟机加载的类信息,常量,静态变量,JIT编译后的代码,所有线程共享 堆:所有线程共享,用来存储实例对象. 虚拟机栈:线程私有,生命周期与线程相同,每个方法被 ...
- less文件转换为css文件
Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. 本文主要介绍less文件如何转化为css文件. ...
- LA 3211 飞机调度
题目链接:http://vjudge.net/contest/142615#problem/A 题意:n架飞机,每架可选择两个着落时间.安排一个着陆时间表,使得着陆间隔的最小值最大. 分析: 最小值最 ...
- Android中插件开发篇之----应用换肤原理解析
一.前言 今天又到周末了,感觉时间过的很快呀.又要写blog了.那么今天就来看看应用的换肤原理解析.在之前的一篇博客中我说道了Android中的插件开发篇的基础:类加载器的相关知识.没看过的同学可以转 ...
- WPFの三种方式实现快捷键
最近,对wpf添加快捷键的方式进行了整理.主要用到的三种方式如下: 一.wpf命令: 资源中添加命令 <Window.Resources> <RoutedUICommand x:Ke ...
- R实战之热点图（HeatMap)
快速实现是搜索帮助文档的首要目的,所以此处涉及实战的文章一概略去传统帮助文档的理论部分,直接上代码加注释! 本文将介绍R语言下利用ggplot2包制作heatmap的代码 -------------- ...
- int与string之间的类型转换--示例
package demo; public class IntDemo { public static void main(String[] args) { // String-->int 类型转 ...
- Tomcat内存设置
MyEclipse Tomcat的JDK菜单:“Optional Java VM arguments:”框中输入“有前置空格” -Xms512m -Xmx512m -XX:PermSize=512 ...
- C 语言中用bsearch()实现查找操作
C语言中可以用bsearch()实现二分查找.同qsort()一样,bsearch()也包含在库中,且同样要自定义比较子函数.其原型如下: void *bsearch(const void *key, ...
- IE的条件注释
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE可识别 <![ ...