(6)JavaScript DOM元素，文字，屬性的區別

阿新 • • 發佈：2018-11-27

元素節點如下
在這裡插入圖片描述
屬性節點如下

文字節點如下

在這裡插入圖片描述
獲取當前節點的時候 getElementByid（“bj”）通過id屬性獲取單個節點那麼它的第一個子節點 .firstNode 是文字節點 .lastNode同樣也是文字節點

  {
  
                      元素節點     屬性節點    文字節點    註釋節點    文件節點
        nodeType：        1          2          3           8           9
        nodeName：     標籤名       屬性名稱     #text
        nodeValue：     null       屬性value   標籤中間夾的文字值
    }

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
	  
	  //	關於節點的屬性：   nodeType ， nodeName ， nodeValue；
	  //	在文件中  認識一個結點都有這3個屬性
	  //	而id，name，value是具體節點的屬性。
	  window.onload = function()
	  { 

	  	 //1. 元素節點的這3個屬性
		 var bjNode = document.getElementById("bj");
		 alert(bjNode.nodeType); 	//元素節點：1
		 alert(bjNode.nodeName); 	//節點名:	LI
		 alert(bjNode.nodeValue); 	//元素節點沒有 nodeValue  屬性值：null
		 
		 //2. 屬性節點
		 var nameAttr = document.getElementById("name").getAttributeNode("name");
		 alert(nameAttr. 
nodeType);	//屬性節點： 2
		 alert(nameAttr.nodeName);	//屬性節點的節點名： 屬性名 name
		 alert(nameAttr.nodeValue); //屬性節點的nodeValue  屬性值：屬性值   username
		 
		 
		 //3. 文字節點：
		 var textNode = bjNode.firstChild;
		 alert(textNode.nodeType);	//文字節點：3
		 alert(textNode.nodeName);	//節點名： #text
		 alert(textNode.nodeValue);	//文字節點的 nodeValue 屬性值：文字值  北京
		 
		 //nodeType  nodeName 是隻讀的
		 //而nodeValue 是可以被改變的。
		 //以上3個屬性 只有在文字節點中使用nodeValue 讀寫文字值時使用最多。
		 
	  }
	</script>
</head>
<body>
	<p>你喜歡哪個城市？</p>
	<ul id = "city">
	   <li id="bj" name="beijing">北京</li>
	   <li>上海</li>
	   <li>東京</li>
	   <li>首爾</li>
	</ul>
	
	<br><br>
	<p>你喜歡哪款單機遊戲？</p>
	<ul id = "game">
	   <li id="rl">紅警</li>
	   <li>實況</li>
	   <li>極品飛車</li>
	   <li>魔獸</li>
	</ul>
	<br><br>
	
	gender:
		<input type="radio" name="gender" value="male"/>Male
		<input type="radio" name="gender" value="female"/>Female
		
	name: <input type="text" name="username" id="name" value="11111"/>
</body>
</html>

(6)JavaScript DOM元素，文字，屬性的區別

元素節點如下屬性節點如下文字節點如下獲取當前節點的時候 getElementByid（“bj”）通過id屬性獲取單個節點那麼它的第一個子節點 .firstNode 是文字節點 .lastNode同樣也是文字節點 {

JavaScript HTML DOM 元素 (節點)新增，編輯，刪除

createElement，createTextNode，appendChild，insertBefore，removeChild，replaceChild createElement 以下程式碼是用於建立 <p> 元素: var para = document.crea

javascript每日進階--var和let，const，class的屬性區別

平常我們對於var和let，const，class的關注主要在他們的作用域的區別上，今天發現它們在屬性上也是有一些區別的。 var命令和function命令宣告的全域性變數，依舊是頂層物件的屬性，也就是還是window和global的屬性 let命令、const命令、c

jq獲取元素內文字，但不包括其子元素內的文字值的方法，不包括後代

權宣告：本文為博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/zhangwenwu2/article/details/78365667 <li id="listItem"> This is some text

JavaScript操作DOM元素中的class屬性

在互動性較強的Web應用中，經常需要動態更改指定元素的屬性值，假設變數e是頁面中一個元素的引用，根據W3C DOM標準，可以在JavaScript中使用e.getAttribute('屬性名')來取得屬性的值，並且用e.setAttribute('屬性名', '值')來設定屬

javascript dom頁面中的location屬性

完整 javascrip url hash name arc () hostname 開始屬性名稱 host：設置或返回主機名和當前URL的端口號 hostname：設置或返回當前的URL的主機名 href：設置或返回完整的url，可用於設置跳轉 hash：設置或返回從

python_01(專案，文字，迴圈，判斷)

建立 1.New Project — Pure python — location（比如改為S14） 2.與S14右鍵 New — Directory （命名為day1） 3. 與day1右鍵New — Python File —（命名為var， for，guess……）

JavaScript DOM元素長寬等比例縮放

我們經常遇到長寬隨視窗變化等比縮放的例子，比如視訊網上中間的視訊案例、等比縮放的盒子圖片等等。公式我們已經知道根據比例求長寬公式是：求寬度 w = h / ratio 求高度 h = w * ratio 準備根據公式此時我們需要準備，一個外容器dom和一個進行等比縮放的容器dom

(4)JavaScript DOM讀寫文字節點

文字節點一定是元素節點的子節點獲取文字節點的步驟文字節點一定是元素節點的子節點獲取文字節點所在的元素節點-》利用firstChild獲取文字節點-》利用文字的nodeValue 屬性來讀寫文字值 childNodes : 該方法不實用因為如果要獲取指定的節點的指定子節點的集合

CSS3基礎——邊框，背景，文字，顏色

圓角效果 border-radius 單位:px 和% 陰影 box-shadow box-shadow: h-shadow v-shadow blur spread color inset; 常用四屬性：X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影

DOM元素的三種屬性

我們通過程式語言對 HTML DOM 進行訪問，所有 HTML 元素被定義為物件，而程式設計介面則是物件方法和物件屬性。系統屬性 HTML物件原有的屬性，如“id”,“class”,“src”,“value”等，我們可以直接獲取或設定（比如節點的名稱或內容）。 console.

HTML5---Canvas-畫線，空心圖，矩形，文字，三角形，旋轉圖片

</pre><pre name="code" class="html"><!doctype html> <html> <head></head> <body> <canvas widt

javascript DOM元素操作彙總

DOM的概念 DOM= Document Object Model，文件物件模型，DOM可以以一種獨立於平臺和語言的方式訪問和修改一個文件的內容和結構。換句話說，這是表示和處理一個HTML或XML文件的常用方法。有一點 DOM很重要，DOM的設計是以物件管理組織（O

網路請求圖片，文字，展現在ListView上

<uses-permission android:name="android.permission.INTERNET"/> 在 <application 寫 android:name=".MApp"寫依賴compile 'com.google.code.gson:gson:2.8.2

DOM元素的特性和屬性

1.特性每個DOM元素都有一或多個特性，特性用來給出相應元素或其內容的附加資訊，特性名稱不區分大小寫。特性設定：通過在HTML文件標籤中設定`attributeName='value'`，或者通過`element.setAttribute

認識DOM的三大節點：元素節點，文字節點，屬性節點以及nodeName,nodeType,nodeValue的區別

既然我們把網頁文件看做樹形結構，那麼就有對應的節點。誠然DOM中有三大節點，分別是元素節點，文字節點，屬性節點元素節點：構成了DOM的基礎。文件結構中，<html>是根元素，代表整個文件，其他的還有<head>,<body>,<p

使用JavaScript來選擇性改變HTML DOM中元素的樣式，使用if語句。

javascrip 使用 style color () return cti .get turn <style> #p1 { color: red; } </style> </head> <body> <butto

jq 筆記七設定，刪除，獲取DOM的元素屬性

第一種用attr() 1、獲取指訂屬性的值 $("p").attr("width"); //獲取p元素屬性名稱是 width的值 2、設定屬性的值 $("p").attr("width","180") //設定p元素屬性名稱是 width的值 2、設定屬

Web開發——JavaScript庫（jQuery HTML——獲取/設定內容和屬性（DOM操作）續，需要整合在一起）

3.2 text()、html() 以及 val()的回撥函式　　上面的三個 jQuery 方法：text()、html() 以及 val()，同樣擁有回撥函式。回撥函式由兩個引數：被選元素列表中當前元素的下標，以及原始（舊的）值。然後以函式新值返回您希望使用的字串。　　下面的例子演示

JavaScript基礎---獲取元素的屬性（title，style，width）

<div id="box" class="box" title="abc" style="width:100px;height:100px;">123</div> <script> var oBox=document.getEleme

(6)JavaScript DOM元素，文字，屬性的區別

相關推薦