js的節點和無縫滾動
js是由解析器、DOM、BOM、三部分組成的。今天要給大家介紹的是js的節點，說道節點就要從DOM講起。
1、DOM是文件物件模型（document object model）在js中能賦予js操作節點（元素、標籤、物件）的能力。即是js可以操作html元素，一般有三種辦法查詢元素：
（1）通過id名找到html元素
（2）通過標籤名來找到html元素（在ie6-8不相容）
（3）通過類名來找到html元素
2、DOM的節點分為：文字節點和元素節點
例如：
<ul id="list">
<li>1</li> 以上的例子，表面上看都以為是有兩個節點，但是事實上不是的，我們在用childNodes測試的時候，發現是有五個節點的，那麼剩下的五個節點分別在：
<ul id="list">一個
<li>兩個</li>三個
<li>四個</li>五個
</ul>一般用childNodes是用來測試DOM的節點數量，而nodeType是用來判斷節點的型別，從而去控制子節點的，當然，children也可以獲取子節點，而且能夠相容各種瀏覽器，相容性比較好。
3、查詢父節點：parentNode
例如：
<script type="text/javascript">
window.onload=function(){
var aBtn=document.getElementsByTagName('a');
for (var i=0;i<aBtn.length;i++){
aBtn[i].onclick=function(){
this.parentNode.style.display='none' 通過查詢父節點來控制子節點，讓子節點刪除。
4、首尾子節點有相容性存在問題：
首節點：firstChild、firstElementChild
尾節點：lastChild、lastElementChild
例如：在首尾子節點設定背景顏色
<script type="text/javascript">
window.onload=function(){
/*查詢第一個子節點的相容方法*/
var oList=document.getElementById('list');
alert(oList.previousSibling)
/*在火狐中可以找到物件，是真，但在ie下找不到是假*/
if(oList.firstElementChild){/*作為判斷條件*/
oList.firstElementChild.style.background='red'/*非ie相容*/
}
else{
oList.firstChild.style.background='red'/*ie下相容*/
}
}
</script>
</head>
<body>
<ul id="list">
<li></li>
<li></li>
<li></li>
</ul>
</body>同理，尾子節點也一樣，可以通過這樣的方式來實現效果。
除了首尾子節點外，還有兄弟節點，也是一樣存在相容性問題。
兄弟節點：nextSibling、nextElementSibling
previousSibling、
previousElementSibling、
5、增加節點：appendChild、innerBefore
appendChild是在子節點的末尾插入一個節點
innerBefore是在首子節點前插入一個子節點。格式：innerBefore（建立節點，第一個子節點）
<script type="text/javascript">
window.onload=function(){
var oO=document.getElementById('o');/*查詢子節點，第一個子節點*/
var oList=document.getElementById('list');/*查詢父節點*/
var oFu=document.createElement('li');/*建立新的子節點*/
oFu.innerHTML='腐女';/*新的子節點的內容*/
oList.appendChild(oFu);/*在父節點插入新的子節點*/
var oBh=document.createElement('li');
oBh.innerHTML='百合';
oList.insertBefore(oBh,oO);/*在父節點插入第一個子節點的前面新的子節點*/
}
</script>6、刪除節點：removeChild
<script type="text/javascript">
window.onload=function(){
var oList=document.getElementById('list');/*查詢父節點ul*/
var aLi=oList.getElementsByTagName('li');/*查詢子節點li*/
var aA=document.getElementsByTagName('a');/*查詢子節點a*/
for(var i=0;i<aA.length;i++){/*每次都需要點選，所以要寫迴圈*/
aA[i].onclick=function(){/*每次點選需要刪除一個子節點*/
oList.removeChild(this.parentNode);/*a對於li來說是子節點，li是a的父節點*/
}
}
}
</script>以上是js的節點
接下來是如何做一個無縫滾動
我們先做一個比較簡單的文字的滾動瀏覽。
第一步：我們先來個簡單的佈局
<div id="box">
<ul>
<li>1、習近平主持中共中央政治局常委會會議</li>
<li>爭鳴：微信小程式能否取代獨立APP？</li>
<li>官網上售罄的車票加價就能搶 旅行網站哪來的神通</li>
<li>李開復：未來十年AI將替代部分職業90%的從業者</li>
<li>個稅改革方案有望上半年出爐 起徵點是否提高？</li>
<li>李開復：未來十年AI將替代部分職業90%的從業者</li>
<li>李開復：未來十年AI將替代部分職業90%的從業者</li>
<li>個稅改革方案有望上半年出爐 起徵點是否提高？</li>
</ul>
</div>第二步：寫樣式：在樣式中一定要在ul標籤樣式中用上絕對定位，因為在js中會用到offset家族，
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#box{width: 500px;height: 300px;border: 1px solid black;position: relative;overflow: hidden;margin: 50px auto;}
#box ul{position: absolute;top: 0;left: 0px;}//position與offset結合一起使用//
#box ul li {height: 40px;}
</style>第三步：寫js：
<script type="text/javascript">
window.onload=function(){
var oBox=document.getElementById('box');
//在文件中通過id名是box的元素，獲取html元素//
var oUl=oBox.getElementsByTagName('ul')[0];
//在文件中通過id名是box的元素，獲取html元素中的標籤名是ul的元素//
var aLi=oUl.getElementsByTagName('li');
//在文件中通過標籤名是ul的元素，獲取html元素中的標籤名是li的元素//
var disTop=oUl.offsetHeight-oBox.offsetHeight;
function rise(){//宣告一個函式，形參有名函式
//判斷當頂部的值小於ul與box的差值的負值時，將讓其回到頂部重新出發 if(oUl.offsetTop<-disTop){
oUl.style.top='0px';
}
oUl.style.top=oUl.offsetTop-10+'px';//將獲取絕對定位的頂部減去10個畫素賦予給ul的top
}
setInterval(rise,100);//定時器，呼叫名為rise的函式，讓其以每100毫米就先上滾動。
}
</script>