IFRAME是HTML標簽，作用是文檔中的文檔，或者浮動的框架(FRAME)。

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選擇器：針對某一個特定的標簽使用

類選擇器：針對你想要的所有標簽使用

通用選擇器（通配符）：針對所有的標簽都適用（不建議使用）