像很多新手一样,我知道js有三部分组成,即ECMAScript、DOM、BOM三部分组成,ECMAScript是核心解释器、DOM(Document Object Model)是文档对象模型、BOM(Browser Object Model)是浏览器对象模型,但是我并没有完全理解其中的含义,还是会经不住去问:它们到底是什么?所以今天我和好朋友坐下来好好探讨了一下,来弥补这个小小的漏洞,如果有哪些不对的地方,还望看到的朋友指正;

  ECMAScript也是一种语言,它本身不包含输入输出定义;ECMA-262规定了语法、类型、语句、关键词、保留字、操作符、对象,ECMAScript就是对实现该规定的各个方面内容的语言的描述。javascript实现了ECMAScript。

  DOM是文档对象模型,它主要包含了获取元素、修改样式、操作元素三个方面的内容,我们的绝大部分操作都是DOM操作,DOM操作大部分是可以兼容的,因为多个浏览器具有兼容写法。我们这里还可以介绍一下DOM的一些具体的内容。

  (一)、DOM树:文档的结构

  (二)、DOM结构

    1、获取父节点  obj.parentNode

         最大的祖宗是document,在往上就是null

    2、获取子节点  childNodes  获取子节点,包括文本节点

      节点类型:文本节点、标签节点

      检测节点的类型可以用nodeType:文本节点是3;标签节点是1;documnent是9

      获取子节点的另一个方法是  children ,但是它和childNodes是有区别的:

                                  (1)它只包括一级子节点,即只包括它的儿女,不包括它的孙子,孙女

                                  (2)它不会获取到文本节点

    3、获取上一个兄弟节点
      obj.previousElementSibling 兼容:高版本浏览器
      obj.previousSibling 兼容:ie6,7,8
      兼容写法
        obj.previousElementSibling||obj.previousSibling;

      获取下一个兄弟节点
      obj.nextElementSibling 兼容:高版本浏览器
      obj.nextSibling 兼容:ie6,7,8
      兼容写法
        obj.nextElementSibling||obj.nextSibling;

    4、获取首尾子节点

      首子节点
        父级.firstElementChild 兼容高版本浏览器
        父级.firstChild 兼容ie6,7,8
        兼容写法
          父级.firstElementChild||父级.firstChild
      尾子节点
        父级.lastElementChild 兼容高版本浏览器
        父级.lastChild 兼容ie6,7,8
        兼容写法
          父级.lastElementChild||父级.lastChild
      PS:这样写看起来太麻烦,所以我们完全可以用children方法搞定
      首子节点  obj.children[0];
      尾子节点  obj.children[obj.children.length-1];

  获取节点的详细内容就讲到这里,之后还有获取物体信息和创建元素
    5、物体信息

      obj.offsetWidth 获取盒子模型的宽度
      obj.offsetHeight 获取盒子模型的高度
      obj.offsetLeft 获取元素距离定位父级左边距。
      obj.offsetTop 获取元素距离定位父级上边距
      没有offsetRight/offsetBottom
      obj.offsetParent 获取定位父级

      这里需要顺带提一下parentNode和offsetParent都是获取父级,但是它们有什么区别呢?parentNode是获取结构上的父级,而offsetParent是获取定位上的父级。

    6、创建元素

      document.createElement('标签名')
      添加元素:
        父级的最后面添加了一个元素:父级.appendChild(新创建的对象);
        把一个元素插入到另一个元素之前:父级.insertBefore(要插入的元素,插入到谁之前);
        删除元素:父级.removeChild(要删除的对象);

    7、克隆元素

      obj.cloneNode();只会克隆这个标签
      obj.cloneNode(true) 深度克隆元素,包括属性内容一起克隆
      *注意:id也会被一起克隆。所以如果有id,每次克隆之后,需要去除id,obj.id='';

  BOM是浏览器对象模型,包括浏览器的一些操作,如window.open、window.alert、window.close等,BOM介于各个浏览器厂商对浏览器的不同规定,所以兼容性很差。

    其中比较重要的一些内容,我们是需要知道的;

     1、获取浏览器的详细信息:window.navigator.userAgent

     2、onscroll 当页面滚动时触发。

      滚动距离(页面滚了多少它就是多少)
       document.documentElement.scrollTop;不兼容chrome

       document.body.scrollTop;兼容chrome的。

       兼容写法:
        document.documentElement.scrollTop||document.body.scrollTop;

     3、获取可视区高度
      document.documentElement.clientHeight;

      获取可视区高度
      document.documentElement.clientWidth

     4、改变窗口大小事件   onresize

  好了,相信大家现在和我一样,对这方面的基础知识应该不会有太多疑问了,我们一起加油吧!

 

我所理解的ECMAScript、DOM、BOM---写给新手们的更多相关文章

  1. DOM&BOM笔记

    day01正课:1. DOM概述2. ***DOM树3. *查找 1. DOM概述: DHTML:动态网页技术的统称 DHTML=HTML+CSS+JS 鄙视题: HTML XHTML DHTML X ...

  2. JavaScript·DOM,BOM

    YI.DOM 1.创建DOM 2.删除DOM 3.文档碎片 文档碎片可以提高DOM操作性能(理论上) 文档碎片(类似于一个口袋,先将多个元素放在口袋里,放完之后,再将口袋放到最终要插入的元素中): d ...

  3. 什么是BOM?,什么是DOM? BOM跟DOM之间的关系

    什么是BOM? BOM是browser object model的缩写,简称浏览器对象模型.是用来获取或设置浏览器的属性.行为,例如:新建窗口.获取屏幕分辨率.浏览器版本号等. 比如 alert(); ...

  4. js初级DOM&BOM知识点总结

    第一章 js的组成DOM BOM ECMAScript javaScript 是一种直译是脚本语言 js语言特点 .脚本编写语言 .基于对象的语言 .简单性 .动态性 .安全性 .跨平台性 C/S是C ...

  5. 深入理解JPEG图像格式Jphide隐写

    0x00 隐写原理 Jphide是基于最低有效位LSB的JPEG格式图像隐写算法,使用JPEG图像作为载体是因为相比其他图像格式更不容易发现隐藏信息,因为JPEG图像在DCT变换域上进行隐藏比空间域隐 ...

  6. 写给新手的WebAPI实践

    此篇是写给新手的Demo,用于参考和借鉴,用于发散思路.老鸟可以忽略了. 自己经常有这种情况,遇到一个新东西或难题,在了解和解决之前总是说“等搞定了一定要写篇文章记录下来”,但是当掌握了之后,就感觉好 ...

  7. JavaScript学习总结(一)——ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)

    一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...

  8. JavaScript的组成—ECMAScript、BOM和DOM

      JavaScript 是一种基于 ECMAScript 规范的脚本语言,并在此基础上进行了自己的封装.ECMAScript 不是一种编程语言,仅仅是一种脚本语言规范,由欧洲计算机协会制定和发布,任 ...

  9. 关于dom&bom

    javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1. DOM 是 W3C的标准:[所有浏览器 ...

随机推荐

  1. Glide请求图片能携带Cookie的哟!

    在Web编程中我们都很熟知一个概念,当有了seesion登录状态时,你可以访问一些资源但如果你没有登录的话很多资源是无法访问的. 在android的WebApi中当然一样拥有这个概念.比如,用户的头像 ...

  2. java 基础三 下雪

    通过repaint()方法进行重画. import javax.swing.JFrame; import javax.swing.JPanel; import java.awt.Graphics; p ...

  3. oracle中函数和存储过程的区别和联系【转载竹沥半夏】

    oracle中函数和存储过程的区别和联系[转载竹沥半夏] 在oracle中,函数和存储过程是经常使用到的,他们的语法中有很多相似的地方,但也有自己的特点.刚学完函数和存储过程,下面来和大家分享一下自己 ...

  4. mongoperf用法

    mongoperf是mongoDB自带工具,用于评估磁盘随机IO性能. 官方文档 使用方法 作用:用于部署前,评估mongodb所在存储的IO性能 用法:mongoperf <conffile, ...

  5. Sqlserver 导出数据脚本

    编写数据压缩选项的脚本 true 要编写脚本的数据的类型 仅限数据

  6. linux命令日常总结

    1.date 显示系统日期2. mkdir xx 创建xx目录 rmdir xx 删除xx目录(空目录) rm -rf xx 删除xx目录(非空目录) 3. vi xx 创建某文件 写入-->e ...

  7. PHP:php知识小解

    一.什么是PHP? PHP 是一种创建动态交互性站点的服务器端脚本语言.PHP 能够生成动态页面内容.PHP 能够创建.打开.读取.写入.删除以及关闭服务器上的文件.PHP 能够接收表单数据并处理.P ...

  8. charles Mock测试总结

    转载:http://www.jianshu.com/p/03081c9d1559 1.背景 测试存在问题:1.测试环境接口不稳定2.业务系统不是孤立存在的,关联方太多,而且关联系统常常出现不稳定的情况 ...

  9. 磁盘io的那些事

    1.使用hdparm命令  hdparm -Tt /dev/sda /dev/sda: Timing cached reads: 6676 MB in 2.00 seconds = 3340.18 M ...

  10. vim - Convert between hex and decimal

    http://vim.wikia.com/wiki/VimTip448 ga g8