DOM元素隐藏或删除

操作DOM元素隐藏大体分为两种途径，一种是通过CSS的方式，一种是通过DOM元素操作。

CSS

1. display: none;

不占据空间，无法点击。

2. visibility: hidden;

占据空间，无法点击。

3. position: absoulte; clip: rect(1px 1px 1px 1px);

不占据空间，无法点击。

4. position: absolute; top: -999em;

不占据空间，无法点击。

5. position: relative; top: -999em

占据空间，无法点击。

6. position: absolute; visibility: hidden;

不占据空间，无法点击。

7. height: 0; overflow: hidden;

不占据空间，无法点击。

8. opacity: 0; filter:Alpha(opacity=0);

占据空间，可以点击。

10. position: absolute; opacity: 0; filter:Alpha(opacity=0);

不占据空间，可以点击。

11.

zoom: 0.001;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);

IE6/IE7/IE9不占据空间，IE8/FireFox/Chrome/Opera占据空间。都无法点击。

12.

position: absolute;
zoom: 0.001;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
transform: scale(0); 

不占据空间，无法点击

以上就是通过操作CSS达到隐藏DOM元素效果的几种方式。

DOM操作

DOM操作也可以对CSS样式进行修改，这里主要说明移除或者隐藏节点的DOM操作。
具体更改CSS样式参照上面关于CSS的操作。

1. removeChild

选中当前元素的父节点，再通过removeChild方法移除当前节点。

2. remove

选中当前节点，调用remove方法，对当前节点进行移除。

3. replaceChild

用新节点替换子节点。

可以使用JS动态创建一个display属性为none的节点，选中当前子节点后，
使用此方法用隐藏的节点替换当前节点。

4. appendChild

appendChild不仅具有增加DOM元素的功能，还有剪切功能。
可以动态的增加和剪切节点。

可以动态创建一个隐藏的节点，然后使用隐藏节点添加当前节点，
那么当前DOM节点就从页面上被移除。

提一下vue的v-if和v-show指令

不得不说，网上有些文章真是误人子弟，看到一篇文章说v-if的隐藏是操作CSS的display属性来控制页面元素的显示或者隐藏。真是大错特错。

v-if

可以直接销毁和重建DOM元素达到让元素显示和隐藏的效果。

v-show

通过修改元素的display的css属性让其显示或者隐藏。