摘要：无缝滚动图和节点的操作在网页设计时使用得非常广泛。无缝滚动图一般有左、右移动以及上、下移动两种方式。而节点的操作是与父节点、子节点、兄弟节点相关的。
一、无缝滚动图的创建方法
创建的步骤可概括如下：
- 首先要对相关的元素布局好，通常使用<li></li>标签来存放内容，为了使整个<ul>标签能移动，可使用定位法，让其相对于所在的“父盒子”进行相对定位，初始时<ul>标签的具有这样的属性值left:0;top:0;最后还要对装有<ul>的“盒子”进行高度和宽度的设置同时添加overflow:hidden;属性。
- 获取要操作的元素对象或数组，这里为了能出现无缝滚动的效果，应把<ul>标签的内容扩为原来的一倍，具体操作语句为：oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;然后写一个能让<ul>标签移动的方法，通过该方法控制<ul>标签的left和top值从而实现该标签的水平或垂直方向的运动。在这个过程中，比较关键的是left或top临界值的判定。以水平向左方向的运动为例，其临界值的判定为：if(oUl.offsetLeft<-oUl.offsetWidth/2)oUl.left=0;也就是说当<ul>标签运动到其left的x坐标刚好小于 -oUl.offsetWidth/2时就把它“拉回”初始位置；水平向右方向的运动时临界值的判定如下：if(oUl.offsetLeft>0)oUl.left=-oUl.offsetWidth/2+'px';竖直向上方向的运动时临界值的判定如下：if(oUl.offsetTop<-oUl.offsetHeight/2)oUl.offsetTop=0;竖直向下方向的运动时临界值的判定如下：if(oUl.offsetTop>0)oUl.top=-oUl.offsetHeight/2+'px';(注：oUl:通过id获得的ul标签对象；offsetLeft：ul标签的左边的x坐标；offsetTop：ul标签的左边的y坐标；offsetWidth、offsetHeight分别为ul标签的宽度和高度)
- 最后一步为设置一个定时器，使其每隔一段时间调用上步所定义的函数。
var oBox=document.getElementById('box'); //获得装有ul标签的“父盒子”
var oUl=oBox.getElementsByTagName('ul')[0];//取ul标签对象
var aLi=oUl.getElementsByTagName('li');//取li标签的“伪数组”
var oBtnUp=document.getElementById('btn-up');//取得“向上”按钮的对象
var oBtnDown=document.getElementById('btn-down');//取得“向下”按钮的对象
var num=-2;//决定ul的运动方向;初始值为向上
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//使ul的内容扩充为原来的一倍
oUl.style.height=aLi[0].offsetHeight*aLi.length+'px';//根据li第高度设置ul的高度
function move(){//定义让ul移动的方法
if(oUl.offsetTop<-(oUl.offsetHeight/2))//向上运动的临界条件
oUl.style.top=0;
if(oUl.offsetTop>0)//向下运动的临界条件
oUl.style.top=-oUl.offsetHeight/2+'px';
oUl.style.top=oUl.offsetTop+num+'px';//往上或下移动num个像素
}
oBtnUp.onclick=function(){
num=-2;
}
oBtnDown.onclick=function(){
num=2;
}
setInterval(move,50);
}
二、DOM中节点的操作
节点可分为父节点、子节点、兄弟。parentNode为父节点、childNodes、children都为子节点，不过用得比较多的是children，它可以兼容各种浏览器。包括IE6-8。进一步地，子节点又可以通过firstChild、firstElementChild、lastChild 、lastElementChild来获取但firstElementChild、lastElementChild只兼容非IE浏览器，firstChild、lastChild兼容IE浏览器，最后就是关于兄弟节点的获取，
nextSibling、nextElementSibling、previousSibling、previousElementSibling其浏览器的兼容性与上述的firstChild、firstElementChild、lastChild 、lastElementChild相同。
以下是关于parentNode的一个例子代码如下：
var oA=document.getElementsByTagName('a');//获取li中的a标签对象
for(var i=0;i<oA.length;i++){
oA[i].onclick=function(){//给a标签对象添加鼠标点击事件
this.parentNode.style.display='none';//点击a标签后a标签的父节点即li标签消失。
}
}
布局如下图所示（注：111、222、333包含在a标签中）
还有一点需要请注意的是：通过类名获取节点时，使用函数getElementByClassName()方法在IE下并不兼容。通常的做法是将相应的操作过程封装成一个方法，在需要的时候调用即可，该方法如下所示：
function getEleByClsName(oUl,clsName){
var aLi=oUl.getElementsByTagName('li');
var arr=[];
for(var i=0;i<aLi.length;i++){
if(aLi[i].className==clsName){
arr.push(aLi[i]);
}
}
return arr;
}
注：oUl：ul标签对象；clsName:传入该函数的类名；aLi：存有li标签的数组；
类似的要求在使用时处理浏览器兼容性有firstChild、firstElementChild、lastChild、lastElementChild以及nextSibling、nextElementSibling、previousSibling、previousElementSibling，即获取子节点和兄弟节点。以firstChild、firstElementChild为例其它属性相同，firstElementChild只兼容非IE的浏览器，而firstChild只兼容IE浏览器，为了解决兼容性问题可封装如果方法：
function changeStyle(){//通过firstChild、firstElementChild获取子节点并修改其样式
if(oUl.firstElementChild){//为非IE浏览器的情况
oUl.firstElementChild.style.background='red';
}
else{//为IE浏览器的情况
oUl.firstChild.style.background='red';
}
}
注：oUl为ul的标签对象
另外一个关于兼容性的处理是获取非行间样式时；所使用的currentStyle和getComputedStyle(obj,false);这是经常使用的处理兼容性问题时所用的属性和方法。封装的方法如下所示：
function getStyle(){//该方法返回一个“盒子”的宽度值
if(oBox.currentStyle){//IE浏览器
return oBox.currentStyle.width;
}
else{//非IE浏览器
return getComputedStyle(oBox,false).width;
}
}