015.

時間 2019-11-11

原文原文鏈接

HTML DOM的新特性

核心DOM操做網頁中的各元素，能夠實現動態的HTML。可是，選擇某個元素很是麻煩，特是當層級越深時，操做就更麻煩。核心DOM查找元素並不實用。DOM爲HTML提供了專用的方法，就是HTML DOM。css

HTML DOM的特性node

（1）每個HTML元素(標記)，都對應一個元素對象(對象)。任何HTML標記都對應一個元素對象。數組

（2）每個HTML元素的屬性，都與元素對象的屬性一一對應。app

舉例：spa

<img id=「obj」 src=「images/xingxing.gif」 />orm

<script>對象

Var obj = document.getElementById(「obj」);圖片

obj.src = 「images/yueliang.gif」;ip

obj.title = 「圖片標題」get

obj.style = 「width:400px;height:300px;」;

obj.border = 1;

obj.class = 「img01」3

</script>

HTML DOM訪問HTML的方法

（1）使用getElementById()方法

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>

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來訪問。

用戶名：<input type=「text」 name=「username」 />

</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。

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>

將CSS的屬性轉成style對象的屬性

（1）若是CSS的屬性是一個單詞，能夠直接寫，必須爲全小寫。如：obj.style.width = 「400px」

（2）若是CSS的屬性是多個單詞用橫線鏈接的，在書寫時，將「橫線」去掉，而且從第二個單詞開始，每一個單詞的首字母要大寫。如：obj.style.backgroundColor = 「red」

1. codewars-015: k-Primes
2. AtCoder Grand Contest 015
3. 015-W命令
4. 015 臨界區
5. 015：Redis-Codis
6. 015 SpringCloud_Zuul網關（一）
7. 015-面向對象
8. 015 Deep convolutional models:case studies
9. 015 vue的項目
10. 編程素養015
更多相關文章...

相關標籤/搜索

015年

015.kubernetes

015.uisegmentedcontrol

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。