我所理解的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

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

　

转载于:https://www.cnblogs.com/September-9/p/5024478.html