js_DOM操做

時間 2019-11-20

標籤 dom 欄目 JavaScript 简体版

原文原文鏈接

嗯，大過年的上次更新應該仍是在，大年30前一天，說好的一天更一篇，感受食言了，雖然沒有更，可是，天天仍是堅持在學習的，因此今天的任務就是把這幾天學的都發上來。javascript

博客，我以爲不單單是交流知識的地方，我寧願把它寫成個人生活日記。有差的，歡迎拍磚。html

好了，進入正題吧。java

DOM操做，我以爲能夠歸結成三個，一個標籤節點，一個屬性節點，一個文本節點。node

這裏的數組

li 就是標籤節點；app

alt就是屬性節點；學習

第一個是文本節點（不是alt裏面的）；spa

接下來我將分別用兩個例子來解釋，這三個點。htm

我先把html放上來：對象

<body>
		<ul>
			<li alt="第一個">第一個</li>
			<li>第二個<br />換行了</li>
			<li>第三個</li>
		</ul>
		<!--<uL id="father"><li>第四個</li><li>第五個</li><li id="tt">第六個</li></uL> 這裏我把疊起來，跟下面等會的操做是有區別的-->
		<uL id="father">
			<li>第四個</li>
			<li>第五個</li>
			<li id="tt">第六個</li>
		</uL>
		<button id="dd">點擊獲取第六個內容</button>
	</body>

標籤節點：

window.onload = function(){
			var a = document.getElementById("dd");/*這裏就是獲取標籤節點，獲取button按鈕，我這裏是經過Id，還有其餘不少方式，注意一點其餘的是類數組*/
			a.onclick = function(){/*點擊事件*/
				var d = document.getElementById("tt").childNodes[0].nodeValue;/*獲得含有id=「tt」的標籤,而後他的字節點，看html，只有「第六個」這幾個字，這就是文本節點，nodeValue這個就是其所含的內容*/
				alert(d);/*輸出，注意我這裏文本節點稍微帶了一下*/
			}

                        var por = document.getElementsByTagName("li")/*這是經過標籤選擇器，獲得li標籤數組，賦值給por*/
			alert(por.length+" "+por[0].tagName+" "+por[1].childNodes[1].nodeName);/*輸出，獲得，por[]數組長度，第一個li標籤的名字，第二個li的文本節點的內容*/

屬性節點,文本節點:

                   /*獲得節點*/                   var first = document.getElementsByTagName("li")[0];/*標籤選擇器獲得第一個li標籤*/
		   console.log(first.getAttribute("alt"));/*getAttribute（）方法就是獲得目標對象的（裏面屬性）的值*/
		   
		   /*建立節點*/
		   var Pcreate = document.createElement("p");/*建立一個p標籤*/
		   var Textcreate = document.createTextNode("我建立了文本節點");/*createTextNode建立文本節點，並賦予內容*/
		   var Attcreate = document.createAttribute("style");/*createAttribute建立屬性,建立的屬性是style*/
		   Attcreate.value = "color:red";/*賦予屬性值*/
		   Pcreate.setAttributeNode(Attcreate);/*setAttributeNode,把建立的屬性節點放入建立的p標籤裏*/
		   Pcreate.appendChild(Textcreate);/*appendchild把建立的文本節點放入p標籤裏*/
		   document.body.appendChild(Pcreate);/*而後把p標籤放入到body*/

相關標籤/搜索

每日一句

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