BOM,DOM常见操作和DHML
BOM
(Browser Object Model)浏览器对象模型,控制浏览器的一些行为
window对象
代表一个HTML文档
属性
页面导航的5个属性 self, parent, top, opener, frames
方法
弹出对话框 3个: alert, confirm, prompt
页面定时器. setInterval, clearInterval, setTimeout, clearTimeout
窗口打开关闭 open, close
History
浏览器的历史记录 前进, 后退.
属性 length
方法 forward 前进, back 后退, go 前进/后退
Location 浏览器地址栏 跳转,刷新
属性 href 改变当前页面位置
方法 reload 刷新
DOM
(Document Object Model) 文档对象模型 让JS 和 HTML ,css结合. 可以使用 JS 来控制他们.
原理 将页面中所有内容, 都封装成了对象.
Dom中的五类对象
Document 文档(重点)
Element 元素(重点)
Attribute 属性
Text 文本
Commons 注释
以上五类对象抽取了一个父类: Node
自身属性 nodeType, nodeName, nodeValue
导航属性
父找儿 firstChild, lastChild, childNodes
儿找父: parentNode (重要)
找兄弟: nextSibling, priviousSibling
获取Element的方式(重点):
从Document中获得ELement:
1.getElementById
2.getElementsByTagName
3.getElementsByClassName
4.getElementsByName
从Element中获得ELement:
1.getElementsByTagName
2.getElementsByClassName
DOM中的事件
给Element对象添加一个Function类型的属性. 那么这个Function的运行时机与属性的名称有关.例如:
属性名 触发时机
onClick 单击 ondblclick 双击 onload 当加载完毕 onchange 当内容改变 onblur 当失去焦点 onfocus 当得到焦点
在事件中我们想要获得事件的详情, 那么我们需要拿到Event(侦探)对象.
获得 事件函数是由浏览器在对应时机调用的, 浏览器在调用的时候, 已经Event传给我们了.对于我们来讲. 接受下就可以了.
属性
keyCode 按键的编码
button 鼠标按键的编码
clientX/clientX 鼠标所在位置的x, y轴坐标
方法
preventDefault 阻止默认行为. 例如 在点击submit按钮时,表单提交就是默认动作.
stopPropergation 停止事件的继续传播. 例如 在嵌套的DIV中, 点击里面的div, 同时也会触发外层div的onclick事件. 如果不想触发外层使用该方法.
Dom中常见操作
增
创建元素: document.createElement
添加: element.appendChild ==> 添加到末尾
element.insertBefore ==> 指定添加位置
删
removeAttribute 删除属性
removeChild 删除子节点
改
replaceChild 改元素
setAttribute 改属性
查
getAttribute 查属性值
getElementById
getElementsByTagName
getElementsByClassName
getElementsByName
DHTML技术
由微软提出, Dynamic HTML 动态网页技术. 整合了 HTML CSS Javascript DOM 4个技术.
可以理解为对DOM对象的增强: 增加了一些新的属性和方法.让我们开发更加便捷.
例如
一个元素的class属性, 我们想改变, 我们使用setAttribute("class","类名")可以. 但是DHTML提供了更方便的操作,className属性.
BOM,DOM常见操作和DHML的更多相关文章
- DOM常见操作
一.查找 1.直接查找 document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性 ...
- JavaScript基础:BOM的常见内置方法和内置对象
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. BOM的介绍 JavaScript的组成 JavaScript基础分为三 ...
- 10 关于DOM的操作
一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象 ...
- 深入理解DOM节点操作
× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...
- 转:jQuery 常见操作实现方式
http://www.cnblogs.com/guomingfeng/articles/2038707.html 一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备 ...
- jQuery 常见操作实现方式
一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备忘. jQuery 常见操作实现方式 $("标签名") //取html元素 document. ...
- 第30天:DOM对象操作
JS包括三部分:ECMAscript.DOM(文档对象).BOM(浏览器对象) 一.DOM(文档对象)DOM树节点(元素.属性.标签.标记等都是节点) 二.访问节点 documment.getElem ...
- BOM DOM区别 来源
DOM 是为了操作文档出现的 API,document 是其的一个对象:BOM 是为了操作浏览器出现的 API,window 是其的一个对象. BOM是浏览器对象模型,DOM是文档对象模型,前者是对浏 ...
- react-native 常见操作 及 git 补充
一. react-native 常见操作 1.创建项目 react-native init Market(项目名称,首字母大写) 2.安装常用插件 npm install react-native-t ...
随机推荐
- Linux进程模型
----原文链接:http://www.cnblogs.com/biyeymyhjob/archive/2012/08/01/2617884.html------ Linux进程通过一个task_st ...
- 集群通信组件tribes之集群的平行通信
前面的集群成员维护服务为我们提供了集群内所有成员的地址端口等信息,可以通过MembershipService可以轻易从节点本地的成员列表获取集群所有的成员信息,有了这些成员信息后就可以使用可靠的TCP ...
- Ext.Net 1.x_Ext.Net.GridPanel之Access数据库分页显示
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...
- 给Cocos2D视图添加手势支持
见如下代码: UISwipeGestureRecognizer *swipeLeft = [[UISwipeGestureRecognizer alloc]initWithTarget:self ac ...
- Java-Iterator总结
纸上得来终觉浅,绝知此事要躬行 --陆游 问渠那得清如许,为有源头活水来 --朱熹 迭 代器是一种设计模式,它是一个对象,它可以遍历并选择序列中的对象,而开发人员不需要了解该序列的底层结构. ...
- SpriteBuilder添加的TrueType字体未显示在log中的原因分析
按照书上的说法,在SpriteBuilder中添加的TrueType字体名称会在枚举字体方法显示的log中出现.但是运行程序后没有在log中发现对应的字体名称. 因为该字体是例子中作者制作的,所以字体 ...
- rabbitMQ之AMQP协议
1.什么是AMQP协议 即高级消息队列协议,规范客户端与消息中间件服务器之间的通信,并能相互操作. 2.AMQP协议的作用 降低应用程序之间的耦合度,这样不同应用之间的集成的难度将变得更小,并开发出更 ...
- DB 查询分析器 6.03 在Windows 8 上安装与运行演示
DB 查询分析器 6.03 在Windows 8 上安装与运行演示 马根峰 ( 广东联合电子服务股份有限公司, 广州 510300) 摘要 ...
- Android实训案例(三)——实现时间轴效果的ListView,加入本地存储,实现恋爱日记的效果!
Android实训案例(三)--实现时间轴效果的ListView,加入本地存储,实现恋爱日记的效果! 感叹离春节将至,也同时感叹时间不等人,一年又一年,可是我依然是android道路上的小菜鸟,这篇讲 ...
- HBase Master启动过程
master启动过程: -->首先初始化HMaster -->创建一个rpcServer,其中并启动 -->启动一个Listener线程,功能是监听client的请求,将请求放入ni ...