015.
HTML DOM的新特性
核心DOM操作網頁中的各元素，可以實現動態的HTML。但是，選擇某個元素非常麻煩，特是當層級越深時，操作就更麻煩。核心DOM查找元素并不實用。DOM為HTML提供了專用的方法，就是HTML DOM。
HTML DOM的特性
（1）每一個HTML元素(標記)，都對應一個元素對象(對象)。任何HTML標記都對應一個元素對象。
（2）每一個HTML元素的屬性，都與元素對象的屬性一一對應。
舉例：
<img id=“obj” src=“images/xingxing.gif” />
<script>
Var obj = document.getElementById(“obj”);
obj.src = “images/yueliang.gif”;
obj.title = “圖片標題”
obj.style = “width:400px;height:300px;”;
obj.border = 1;
obj.class = “img01”3
</script>
?
HTML DOM訪問HTML的方法
（1）使用getElementById()方法
<div id=“box”></div>
var obj = document.getElementById(“box”);
?????? obj.style = “width:400px;height:300px;”
?????? obj.setAttribute(“style”,”width:400px;padding:20px;”);
?????? //給id=box的元素添加一個圖片
?????? Var node_img = document.createElement(“img”);
?????? node_img.src = “images/bg.gif”;
?????? obj.appendChild(node_img);
?????? //清除div中所有的內容
?????? obj.innerHTML = “”;
（2）使用getElementsByTagName()方法
?????? 含義：取得某一個標記下的所有指定的子標記，返回一個數組類型。
?????? <ul id=“obj”>
????????????? <li>北京市</li>
<li>天津市</li>
<li>武漢市</li>
<li>上海市</li>
<li>廣州市</li>
</ul>
?????? Var obj = document.getElementById(“obj”);
?????? Var arr = obj.getElementsByTagName(“li”); ?//HTML DOM
?????? Var arr = obj.childNodes;? //核心DOM
?????? For(var i=0;i<arr.length;i++)
{
????????????? arr[i].style = “color:#0000ff;text-decoration:underline;”;
????????????? arr[i].setAttribute(“style”,”color:#0000ff;text-decoratin:underline;”);
}
??????
（3）使用name屬性
每個HTML標記，都有name屬性，一般在表單中使用name來訪問。
<form name=“form1” οnsubmit=“return checkForm()”>
用戶名：<input type=“text” name=“username” />
<input type=“submit” value=“提交表單” />
</form>
//對表單中的username進行驗證
function checkForm()
{
?????? Var theForm = document.form1;
?????? if( theForm.username.value == “”){
????????????? alert(“用戶名不能為空”);
return false;
}else if(theForm.username.value.length <5 && theForm.username.value.length > 20)
{
?????? alert(“用戶名只能介于5-20之間”);
return false;
}else
{
?????? return true;
}
}
?
元素對象的屬性和方法
元素對象就是HTML元素對應的對象，就叫元素對象。
tagName：標記的名稱，同nodeName一樣。
id：同元素的id屬性一樣
title：同元素的title屬性一樣
className：同元素的class屬性一樣，給元素增加一個類樣式
innerHTML：指某個標記中的所有內容，可以包含其它標記。
?????? nodeValue：也指某個文本節點的內容，但只能是純文本。
offsetWidth：指元素對象的寬度(不含滾動條中的內容)
offsetHeight：指元素對象的高度，里面如果沒有內容，則高為0
?????? 注意：跟css中的height不太一樣，CSS中的height，標記可以沒有內容，但height可以設置
?????? offsetHeight必須要有內容，否則高為0.
scrollWidth：包含滾動條中的內容的寬度
scrollHeight：包含滾動條中的內容的高度
scrollTop：指向上滾動過去的距離。
scrollLeft：抽向左滾動過去的距離。
offsetTop：指元素距離網頁頂端的距離
offsetLeft：指元素距離網頁左端的距離
?
onscroll：當滾動條移動時，執行JS程序。
?
?
CSS DOM
每一個HTML標記，都具有style屬性，相應的，每一個元素對象都具有style屬性。style屬性是一個對象。
CSS DOM就是通過style對象來訪問和操作CSS。
<script>
function init()
{
//取得id=box的對象
var obj = document.getElementById(“box”);
//給id=box的對象增加樣式
obj.setAttribute(“style”,“width:400px;height:300px;”);? //核心DOM中的方法
obj.style = “width:400px;height:300px;”;? //HTML DOM中的屬性
//使用style對象來增加樣式
obj.style.width = “400px”;? //給id=box的對象增加一個width的CSS屬性
obj.style.height = “300px”; //給id=box的對象增加一個height的CSS屬性
obj.style.overflow = “hidden”;? //數據溢出則隱藏
obj.style.border = “1px solid #ff0000”? //增加邊框
obj.style.backgroundColor = “#f0f0f0”;? //背景顏色
obj.style.paddingTop = “20px”;? //上填充為20px
//往id=box中添加一個<h2>標記，內容隨意，標題的顏色為#FF0000
var str = “<h2 style=’color:#ff0000’>廣州傳智播客歡迎您</h2>”;
str += “<ul id=’obj_ul’>”;
str += “<li>HTML超文本標注語言</li>”;
str += “<li>CSS層疊樣式表</li>”;
str += “</ul>”;
obj.innerHTML = str;? //將str的內容寫入到obj對象中
//求出有多少個<li>標記
var obj_ul = document.getElementById(“obj_ul”);
var arr = obj_ul.getElementsByTagName(“li”);
window.alert(“<li>標記的個數為：”+arr.length);
}
</script>
<body οnlοad=“init()”>
<div id=“box”></div>
</body>
?
將CSS的屬性轉成style對象的屬性
（1）如果CSS的屬性是一個單詞，可以直接寫，必須為全小寫。如：obj.style.width = “400px”
（2）如果CSS的屬性是多個單詞用橫線連接的，在書寫時，將“橫線”去掉，并且從第二個單詞開始，每個單詞的首字母要大寫。如：obj.style.backgroundColor = “red”
?
轉載于:https://www.cnblogs.com/chun-jiang-chao-de-gu-shi/p/5584729.html
總結
- 上一篇： 小白学数据分析--回归分析在游戏人气分析
- 下一篇： HTML5-SVG-嵌入到html的几种