iframe元素会创建包含另外一个文档的内联框架（即行内框架）。
如果说完全隔离的话就只有iframe了(HTML5也是赞成的使用的，而frameset是废弃的)
shadowDOM能够较好的隔离js DOM和css，提供web组件级的封装和隔离，但是js中的全局对象等则无法隔离…
shadowDOM目前只有Chrome、Safari10+及opera支持，长远来说shadowDOM将要作为web标准，各种浏览器迟早都会支持…
另外webWorker和webAssembly也能在一定程度上隔离js，但是css无能为力
webWorker：类似多线程，可以隔离js(有限制DOM操作不了)
webAssembly：可以用c/c++来优化js，作为组件供js加载…
文档对象模型( DOM, Document Object Model )主要用于对HTML和XML文档的内容进行操作。DOM描绘了一个层次化的节点树，通过对节点进行操作，实现对文档内容的添加、删除、修改、查找等功能。
一、DOM树
DOM树有两种，分别为节点树和元素树。
节点树：把文档中所有的内容都看成树上的节点；
元素树：仅把文档中的所有标签看成树上的节点。
二、DOM常用操作
2.1 查找节点
document.getElementById('id属性值');
返回拥有指定id的第一个对象的引用
document/element.getElementsByClassName('class属性值');
返回拥有指定class的对象集合
document/element.getElementsByTagName('标签名');
返回拥有指定标签名的对象集合
document.getElementsByName('name属性值');
返回拥有指定名称的对象结合
document/element.querySelector('CSS选择器');
仅返回第一个匹配的元素
document/element.querySelectorAll('CSS选择器');
返回所有匹配的元素
document.documentElement
获取页面中的HTML标签
document.body
获取页面中的BODY标签
document.all['']
获取页面中的所有元素节点的对象集合型
2.2 新建节点
document.createElement('元素名');
创建新的元素节点
document.createAttribute('属性名');
创建新的属性节点
document.createTextNode('文本内容');
创建新的文本节点
document.createComment('注释节点');
创建新的注释节点
document.createDocumentFragment( );
创建文档片段节点
2.3 添加新节点
parent.appendChild( element/txt/comment/fragment );
向父节点的最后一个子节点后追加新节点
parent.insertBefore( newChild, existingChild );
向父节点的某个特定子节点之前插入新节点
element.setAttributeNode( attributeName );
给元素增加属性节点
element.setAttribute( attributeName, attributeValue );
给元素增加指定属性，并设定属性值
head img 选择器：就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。
CSS的选择器分为两大类：基本选择题和扩展选择器。
基本选择器：
标签选择器：针对一类标签ID选择器：针对某一个特定的标签使用
类选择器：针对你想要的所有标签使用
通用选择器（通配符）：针对所有的标签都适用（不建议使用）