像很多新手一样，我知道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
网友评论