js操作DOM對象
阿新 • • 發佈：2017-11-02
ons 獲取 ont logs nod 愛的 容器 ren gem 
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>訪問節點</title>
<!--
DOM（Document Object Model） 文檔對象模型
HTML-DOM
CSS-DOM
XML-DOM
DOM-CORE
noteType的返回值：
1 ：元素節點
2 ：屬性節點
3 ：文本節點
8 ：註釋節點
訪問節點
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>節點的增刪改</title>
</head>
<body>
<ul>
<li>大家辛苦了1</li>
<li>大家辛苦了2</li>
<li>大家辛苦了3</li>
<li>大家辛苦了4</li>
<li>大家辛苦了5</li>
<li>大家辛苦了6</li>
<li>大家辛苦了7</li>
<li>大家辛苦了8</li>
<li>大家辛苦了9</li>
<li>大家辛苦了10</li>
<li>大家辛苦了11</li>
<li>大家辛苦了12</li>
</ul>
<script type="text/javascript">
//首先獲取頁面中的第一個ul
var ul= document.getElementsByTagName("ul")[0];
//創建一個新的節點
var newLi=document.createElement("li");
//給新節點的增加內容
newLi.innerHTML="<h1>哈哈</h1>";
//在第7 個位置之前 把新增的li放入
var needLi= ul.getElementsByTagName("li")[6];
//ul.insertBefore(newLi,needLi); // 把newLi放在needLi之前
//替換指定的節點
var repLi= ul.getElementsByTagName("li")[9];
ul.replaceChild(newLi,repLi);
//刪除指定的節點
ul.removeChild(newLi);
//clone UL
var newUl= ul.cloneNode(true);
// 在body中增加 ul
ul.parentNode.appendChild(newUl);
</script>
</body>
</html>
節點的增刪改
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Style樣式</title>
<!--
之前接觸的 行內樣式 style 是css設置樣式
現在我們使用的是js中的設置樣式！
-->
<style type="text/css">
#myDiv{
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<div id="myDiv" style="border: 1px solid red"></div>
<button type="button" onclick="changeBackground();">換背景色</button>
<button type="button" onclick="changeMargin();">換外邊距</button>
<script type="text/javascript">
var div=document.getElementById("myDiv");
/**
* 通過js中的style屬性來設置樣式
*
* 註意點：
* 01.css中有的屬性我們 style中都有
* 02.只不過屬性名寫法不一致
* 比如說 css font-size style fontSize
*/
function changeBackground(){
div.style.backgroundColor="pink"; //改變背景顏色
}
function changeMargin(){
div.style.marginLeft="50px"; //改變外邊距
}
</script>
</body>
</html>
Style樣式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Tab切換</title>
<style type="text/css">
#tab{ width: 400px;}
#tab ul{list-style: none;overflow:hidden;margin:0px;padding:0px;}
#tab ul li{float:left;padding:5px 10px;border:1px solid #eee;cursor:pointer;}
#tab ul li.cur{background-color: red}
#tab .content{width:100%;border:1px solid #eeeeee;height: 100px;}
</style>
</head>
<body>
<div id="tab">
<ul>
<li class="cur">tab1</li>
<li>tab2</li>
<li>tab3</li>
<li>tab4</li>
</ul>
<div id="c-box">
<div class="content" id="content-0">
tab-1第一個容器的內容
</div>
<div class="content" id="content-1" style="display: none;">
tab-2第二個容器的內容
</div>
<div class="content" id="content-2" style="display: none;">
tab-3第3個容器的內容
</div>
<div class="content" id="content-3" style="display: none;">
tab-4第4個容器的內容
</div>
</div>
<script type="text/javascript">
//獲取頁面中需要得所有li的集合
var liList=document.getElementsByTagName("li");
//循環li集合
for(var i=0;i<liList.length;i++){
liList[i].index=i; //當前選中的li
liList[i].onmouseover=function(){ //鼠標移入事件
for(var j=0;j<liList.length;j++){ //循環div
document.getElementById("content-"+j).style.display="none"; //所有div的都隱藏
liList[j].className=""; //清除所有的li 的class屬性值
}
liList[this.index].className="cur";//設置選中的li樣式
document.getElementById("content-"+this.index).style.display="block"; //顯示選中的li對應div
}
}
</script>
</body>
</html>
Tab切換
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>className屬性</title>
<style type="text/css">
.myDiv{
height: 50px;
width: 50px;
border: 1px solid red;
}
.newStyle{
height: 150px;
width: 150px;
border: 2px solid pink;
}
</style>
</head>
<body>
<div class="myDiv" id="myDiv"></div>
<script type="text/javascript">
var div= document.getElementById("myDiv");
div.onclick=function(){
div.className="newStyle"; //newStyle是我們需要設置class的名稱
}
</script>
</body>
</html>
className屬性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>EasyUI實現tabs</title>
</head>
<body>
<div id="myTabs">
<ul>
<li><a href="#a">第1個</a></li>
<li><a href="#b">第2個</a></li>
<li><a href="#c">第3個</a></li>
<li><a href="#d">第4個</a></li>
</ul>
<div id="a">第1個選項卡</div>
<div id="b">第2個選項卡</div>
<div id="c">第3個選項卡</div>
<div id="d">第4個選項卡</div>
</div>
<!-- 引入我們需要的js文件-->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/jquery-ui.js"></script>
<script type="text/javascript" src="../js/jquery.ui.tabs.js"></script>
<script type="text/javascript">
$(function(){
$("#myTabs").tabs({
active:1, //默認選中第一個tab
event:"mouseover"
})
})
</script>
</body>
</html>
EasyUI實現tabs
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>滾動距離</title>
<style type="text/css">
*{margin:0;padding: 0;}
#box1{height:200px;width: 200px;background:#eee;border:1px solid #000;overflow-y:scroll;}
p{line-height:40px;}
</style>
<script type="text/javascript">
window.onload=function(){
var box1=document.getElementById("box1");
var text=document.getElementById("text");
//當div滾動的時候
box1.onscroll=function(){
text.innerHTML="距離TOP多少像素："+box1.scrollTop;
}
}
</script>
</head>
<body>
<div id="box1">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
</div>
<div id="text"></div>
</body>
</html>
滾動距離
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>window.onload</title>
<!--
window.onload
註意點：
01.在整個頁面中只能存在一次，否則後面會覆蓋前面
02.頁面中所有的內容加載完畢之後才執行！
03.沒有簡寫的方法
-->
</head>
<body>
<img src="../images/cat.jpg">
<script type="text/javascript">
//alert("頁面沒有加載完畢就可能執行！");
window.onload=function(){
alert("頁面中所有的內容加載完畢之後才執行！");
}
</script>
</body>
</html>
window.onload
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>滾動距離</title>
<style type="text/css">
*{margin:0;padding: 0;}
#box{
position: absolute;
top: 0px;
left: 0px;
}
</style>
<script type="text/javascript">
window.onload = function () {
var box=document.getElementById("box");
var time=null,x= 1,y= 1,speed=5;
function go(){
//水平方向
if((box.offsetLeft+box.offsetWidth)>document.documentElement.clientWidth){
x=-1;
}
if(box.offsetLeft<0){
x=1;
}
box.style.left=box.offsetLeft+x*speed+"px";
//垂直方向
if((box.offsetTop+box.offsetHeight)>document.documentElement.clientHeight){
y=-1;
}
if(box.offsetTop<0){
y=1;
}
box.style.top=box.offsetTop+x*speed+"px";
}
//定時函數
time=setInterval(go,100);
//鼠標移上去 停止
box.onmousemove=function(){
if(time!=null){
clearInterval(time);
}
}
//鼠標離開 繼續移動
box.onmouseout=function(){
time=setInterval(go,100);
}
}
</script>
</head>
<body>
<div id="box">
<img src="../images/cat.jpg" height="200px" width="200px">
</div>
</body>
</html>
滾動距離
js操作DOM對象