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选择器:针对某一个特定的标签使用
类选择器:针对你想要的所有标签使用
通用选择器(通配符):针对所有的标签都适用(不建议使用)