zoukankan      html  css  js  c++  java
  • 我所理解的ECMAScript、DOM、BOM---写给新手们

      像很多新手一样,我知道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

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

     

  • 相关阅读:
    1101. Quick Sort (25)
    1100. Mars Numbers (20)
    1099. Build A Binary Search Tree (30)
    TCP四次挥手为何需要TIME_WAIT以及为何是2MSL?
    关于priority_queue运算符重载的问题
    leetcode151.翻转字符串里的单词
    华为笔试题--最长公共子串
    华为笔试题--表达式求值
    华为笔试题--字符串合并处理
    华为笔试题--删除字符串中出现次数最少的字符
  • 原文地址:https://www.cnblogs.com/September-9/p/5024478.html
Copyright © 2011-2022 走看看