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的更多相关文章

  1. DOM常见操作

    一.查找 1.直接查找 document.getElementById           根据ID获取一个标签 document.getElementsByName         根据name属性 ...

  2. JavaScript基础:BOM的常见内置方法和内置对象

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. BOM的介绍 JavaScript的组成 JavaScript基础分为三 ...

  3. 10 关于DOM的操作

    一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象 ...

  4. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  5. 转:jQuery 常见操作实现方式

    http://www.cnblogs.com/guomingfeng/articles/2038707.html 一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备 ...

  6. jQuery 常见操作实现方式

    一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备忘. jQuery 常见操作实现方式 $("标签名") //取html元素 document. ...

  7. 第30天:DOM对象操作

    JS包括三部分:ECMAscript.DOM(文档对象).BOM(浏览器对象) 一.DOM(文档对象)DOM树节点(元素.属性.标签.标记等都是节点) 二.访问节点 documment.getElem ...

  8. BOM DOM区别 来源

    DOM 是为了操作文档出现的 API,document 是其的一个对象:BOM 是为了操作浏览器出现的 API,window 是其的一个对象. BOM是浏览器对象模型,DOM是文档对象模型,前者是对浏 ...

  9. react-native 常见操作 及 git 补充

    一. react-native 常见操作 1.创建项目 react-native init Market(项目名称,首字母大写) 2.安装常用插件 npm install react-native-t ...

随机推荐

  1. JVM 类的生命周期、类加载器

    类的加载.连接与初始化                  • 1. 加载:查找并加载类的二进制数据         • 2. 连接             – 2.1 验证:确保被加载的类的正确性   ...

  2. JavaScript进阶(八)JS实现图片预览并导入服务器功能

    JS实现导入文件功能       赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉!(PS:此篇博文是自己在午饭时间所写,为此没吃午饭,这就是程序猿 ...

  3. tomcat生产部署关键参数设置

    JVM设置 个节点,每个tomcat预计处理500个链接,那么连接池的长连接数最大设为2000. 全节点复制(DeltaManager)模式集群节点数3-6为宜. 主备复制(BackupMnagage ...

  4. 操作系统 - Linux进程实现的内部结构

    在进程描述符中进入几个字段来表示进程之间的父子关系和兄弟关系. 图3-4显示了一组进程间的亲属关系. 表3-4:建立非亲属关系的进程描述符字段 在某些情况下,内核必须能从进程的PID到处对应的进程描述 ...

  5. kettel的stream lookup报错

    kettel的stream lookup报错: you can't use the 'integer-pair' algorithm when you have more than one key o ...

  6. 关于synchronized

    如果用synchronized修饰一个类成员方法A,那么就不会出现下面的情况: 同时多个线程访问这个类的A方法. 当然如果还有一个方法B,它没有被synchronized修饰,那么A方法与B方法是可以 ...

  7. "《算法导论》之‘队列’":队列的三种实现(静态数组、动态数组及指针)

    本文有关栈的介绍部分参考自网站数据结构. 1. 队列  1.1 队列的定义 队列(Queue)是只允许在一端进行插入,而在另一端进行删除的运算受限的线性表. (1)允许删除的一端称为队头(Front) ...

  8. Leetcode_260_Single Number III

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/50276549 Given an array of numb ...

  9. 史上最强Spring mvc入门

    一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于SpringMVC的配置 1 2 3 4 5 6 ...

  10. 拆解轮子之XRecyclerView

    简介 这个轮子是对RecyclerView的封装,主要完成了下拉刷新.上拉加载更多.RecyclerView头部.在我的Material Design学习项目中使用到了项目地址,感觉还不错.趁着毕业答 ...