JavaScript dom 藝術是一種通過JavaScript操作dom元素，實現頁面動態交互效果的藝術形式。隨著web前端技術的不斷發展，JavaScript dom 藝術也越來越受到開發者們的關注，下面我們來看看如何用JavaScript dom 藝術來實現一些具體的交互效果。

第一個案例，我們來實現一個圖片輪播效果。HTML代碼如下：

<div id="slider">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
</div>

我們要實現的效果是：每3秒鐘自動切換到下一張圖片，當鼠標移入圖片時，停止切換，移出后再次開始切換。JavaScript代碼如下：

var slider = document.getElementById('slider');
var imgs = slider.getElementsByTagName('img');
var len = imgs.length;
var index = 0;
var timer;
function showImg(){
imgs[index].style.display = 'none';
index = (index + 1) % len;
imgs[index].style.display = 'block';
}
function autoPlay(){
timer = setInterval(function(){
showImg();
}, 3000);
}
autoPlay();
slider.onmouseover = function(){
clearInterval(timer);
};
slider.onmouseout = function(){
autoPlay();
};

第二個案例，我們來實現一個拖拽效果。HTML代碼如下：

<div id="drag"></div>

我們要實現的效果是：鼠標按下拖動div元素，松開鼠標后div元素停止拖動。JavaScript代碼如下：

var drag = document.getElementById('drag');
var disX = 0;
var disY = 0;
drag.onmousedown = function(ev){
var ev = ev || window.event;
disX = ev.clientX - drag.offsetLeft;
disY = ev.clientY - drag.offsetTop;
document.onmousemove = function(ev){
var ev = ev || window.event;
var left = ev.clientX - disX;
var top = ev.clientY - disY;
drag.style.left = left + 'px';
drag.style.top = top + 'px';
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};

以上就是JavaScript dom 藝術的兩個案例，通過這些例子我們可以看出，JavaScript dom 藝術不僅可以為我們的網站增添更加豐富的交互效果，也能夠讓我們更好地理解和掌握JavaScript和dom的相關知識。希望本文能夠對讀者有所幫助。