文檔對象模型DOM（獲取元素節點、設置節點屬性）

練習題：

製作一個表格，顯示班級的學生信息。

要求：

1. 鼠標移到不同行上時背景色改爲色值爲 #f2f2f2，移開鼠標時則恢復爲原背景色 #fff

2. 點擊添加按鈕，能動態在最後添加一行

3. 點擊刪除按鈕，則刪除當前行

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   
  <script type="text/javascript"> 
  
      window.onload = function(){

     // 鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。
		var myTable = document.getElementById("table");
		myTable.style.backgroundColor="#fff";
		var rows = document.getElementsByTagName("tr");
		for(var i=0;i<rows.length;i++){
			setRow(rows[i]);
		}
	 }
     function setRow(obj){
			//添加鼠標移入監聽
			obj.addEventListener("mouseover",function(){
				obj.style.backgroundColor="#f2f2f2";
				//alert("222");
			},false);
			//添加鼠標移出監聽
			obj.addEventListener("mouseout",function(){
				obj.style.backgroundColor="#fff";
			},false);
	 }
      // 編寫一個函數，供添加按鈕調用，動態在表格的最後一行添加子節點；
	  var num=2;
     function addButton(){
		num++;
		 var myTable = document.getElementById("table");
		 
		 var tr = document.createElement("tr");
		 var td1 = document.createElement("td");
		 td1.innerHTML="編號00"+num;
		 var td2 = document.createElement("td");
		  td2.innerHTML="第"+num+"個";
		 var td3 = document.createElement("td");
		 td3.innerHTML="<a href='javascript:;' οnclick='del(this)'>刪除</a>";
		 myTable.appendChild(tr);
		 tr.appendChild(td1);
		 tr.appendChild(td2);
		 tr.appendChild(td3);
		 var rows = document.getElementsByTagName("tr");
		 for(var i=0;i<rows.length;i++){
			 setRow(rows[i]);
		 }
	 }
    		
   	 
     // 創建刪除函數
     function del(obj){
		var tr=obj.parentNode.parentNode;
        tr.parentNode.removeChild(tr);
	 }


  </script> 
 </head> 
 <body> 
	   <table border="1" width="50%" id="table">
	   <tr >
		<th>學號</th>
		<th>姓名</th>
		<th>操作</th>
	   </tr>  

	   <tr>
		<td>xh001</td>
		<td>王小明</td>
		<td><a href="javascript:;" οnclick="del(this);">刪除</a></td>   <!--在刪除按鈕上添加點擊事件  -->
	   </tr>

	   <tr>
		<td>xh002</td>
		<td>劉小芳</td>
		<td><a href="javascript:;" οnclick="del(this);">刪除</a></td>   <!--在刪除按鈕上添加點擊事件  -->
	   </tr>  

	   </table>
	   <input type="button" value="添加一行"  οnclick="addButton()"/>   <!--在添加按鈕上添加點擊事件  -->
 </body>
</html>

1認識DOM

文檔對象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標準方法。DOM 將HTML文檔呈現爲帶有元素、屬性和文本的樹結構（節點樹）。

先來看看下面代碼:

將HTML代碼分解爲DOM節點層次圖:

HTML文檔可以說由節點構成的集合，DOM節點有:

1. 元素節點：上圖中<html>、<body>、<p>等都是元素節點，即標籤。

2. 文本節點:向用戶展示的內容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 屬性節點:元素屬性，如<a>標籤的鏈接屬性href="http://www.imooc.com"。

節點屬性:

遍歷節點樹:

以上圖ul爲例，它的父級節點body,它的子節點3個li,它的兄弟結點h2、P。

DOM操作:

注意:前兩個是document方法。

2getElementsByName()方法

返回帶有指定名稱的節點對象的集合。

語法：

document.getElementsByName(name)

與getElementById() 方法不同的是，通過元素的 name 屬性查詢元素，而不是通過 id 屬性。

注意:

1. 因爲文檔中的 name 屬性可能不唯一，所有 getElementsByName() 方法返回的是元素的數組，而不是一個元素。

2. 和數組類似也有length屬性，可以和訪問數組一樣的方法來訪問，從0開始。

看看下面的代碼:

3getElementsByTagName()方法

返回帶有指定標籤名的節點對象的集合。返回元素的順序是它們在文檔中的順序。

語法:

document.getElementsByTagName(Tagname)

說明:

1. Tagname是標籤的名稱，如p、a、img等標籤名。

2. 和數組類似也有length屬性，可以和訪問數組一樣的方法來訪問，所以從0開始。

4區別getElementByID,getElementsByName,getElementsByTagName

以人來舉例說明，人有能標識身份的身份證，有姓名，有類別(大人、小孩、老人)等。

1. ID 是一個人的身份證號碼，是唯一的。所以通過getElementById獲取的是指定的一個人。

2. Name 是他的名字，可以重複。所以通過getElementsByName獲取名字相同的人集合。

3. TagName可看似某類，getElementsByTagName獲取相同類的人集合。如獲取小孩這類人，getElementsByTagName("小孩")。

把上面的例子轉換到HTML中，如下:

<input type="checkbox" name="hobby" id="hobby1">  音樂

input標籤就像人的類別。

name屬性就像人的姓名。

id屬性就像人的身份證。

5getAttribute()方法

通過元素節點的屬性名稱獲取屬性的值。

語法：

elementNode.getAttribute(name)

說明:

1. elementNode：使用getElementById()、getElementsByTagName()等方法，獲取到的元素節點。

2. name：要想查詢的元素節點的屬性名字

6setAttribute()方法

setAttribute() 方法增加一個指定名稱和值的新屬性，或者把一個現有的屬性設定爲指定的值。

語法：

elementNode.setAttribute(name,value)

說明：

1.name: 要設置的屬性名。

2.value: 要設置的屬性值。

注意：

1.把指定的屬性設置爲指定的值。如果不存在具有指定名稱的屬性，該方法將創建一個新屬性。

2.類似於getAttribute()方法，setAttribute()方法只能通過元素節點對象調用的函數。

7節點屬性

在文檔對象模型 (DOM) 中，每個節點都是一個對象。DOM 節點有三個重要的屬性：

1. nodeName : 節點的名稱

2. nodeValue ：節點的值

3. nodeType ：節點的類型

一、nodeName 屬性: 節點的名稱，是隻讀的。

1. 元素節點的 nodeName 與標籤名相同
2. 屬性節點的 nodeName 是屬性的名稱
3. 文本節點的 nodeName 永遠是 #text
4. 文檔節點的 nodeName 永遠是 #document

二、nodeValue 屬性：節點的值

1. 元素節點的 nodeValue 是 undefined 或 null
2. 文本節點的 nodeValue 是文本自身
3. 屬性節點的 nodeValue 是屬性的值

三、nodeType 屬性: 節點的類型，是隻讀的。以下常用的幾種結點類型:

元素類型節點類型
元素 1
屬性 2
文本 3
註釋 8
文檔 9

8訪問子節點childNodes

訪問選定元素節點下的所有子節點的列表，返回的值可以看作是一個數組，他具有length屬性。

語法：

elementNode.childNodes

注意：

如果選定的節點沒有子節點，則該屬性返回不包含節點的 NodeList。

我們來看看下面的代碼:

運行結果:

IE:

  UL子節點個數:3
  節點類型:1

其它瀏覽器:

   UL子節點個數:7
   節點類型:3

注意:

1. IE全系列、firefox、chrome、opera、safari兼容問題

2. 節點之間的空白符，在firefox、chrome、opera、safari瀏覽器是文本節點，所以IE是3，其它瀏覽器是7，如下圖所示:

如果把代碼改成這樣:

<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>

運行結果:（IE和其它瀏覽器結果是一樣的）

  UL子節點個數:3
  節點類型:1

9訪問子節點的第一和最後項

一、firstChild 屬性返回‘childNodes’數組的第一個子節點。如果選定的節點沒有子節點，則該屬性返回 NULL。

語法：

node.firstChild

說明：與elementNode.childNodes[0]是同樣的效果。

二、 lastChild 屬性返回‘childNodes’數組的最後一個子節點。如果選定的節點沒有子節點，則該屬性返回 NULL。

語法：

node.lastChild

說明：與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果。

注意: 上一節中，我們知道Internet Explorer 會忽略節點之間生成的空白文本節點，而其它瀏覽器不會。我們可以通過檢測節點類型，過濾子節點。 (以後章節講解)

10訪問父節點parentNode

獲取指定節點的父節點

語法：

elementNode.parentNode

注意:父節點只能有一個。

看看下面的例子,獲取 P 節點的父節點，代碼如下:

<div id="text">
  <p id="con"> parentNode 獲取指點節點的父節點</p>
</div> 
<script type="text/javascript">
  var mynode= document.getElementById("con");
  document.write(mynode.parentNode.nodeName);
</script>

運行結果:

parentNode 獲取指點節點的父節點
DIV

訪問祖節點:

elementNode.parentNode.parentNode

看看下面的代碼:

<div id="text">  
  <p>
    parentNode      
    <span id="con"> 獲取指點節點的父節點</span>
  </p>
</div> 
<script type="text/javascript">
  var mynode= document.getElementById("con");
  document.write(mynode.parentNode.parentNode.nodeName);
</script>

運行結果:

parentNode獲取指點節點的父節點
DIV

注意: 瀏覽器兼容問題，chrome、firefox等瀏覽器標籤之間的空白也算是一個文本節點。

11訪問兄弟節點(注意，使用該屬性的時候只有在同一個父節點下，才能獲取）

1. nextSibling 屬性可返回某個節點之後緊跟的節點（處於同一樹層級中）。

語法：

nodeObject.nextSibling

說明：如果無此節點，則該屬性返回 null。

2. previousSibling 屬性可返回某個節點之前緊跟的節點（處於同一樹層級中）。

語法：

nodeObject.previousSibling

說明：如果無此節點，則該屬性返回 null。

注意: 兩個屬性獲取的是節點。Internet Explorer 會忽略節點間生成的空白文本節點（例如，換行符號），而其它瀏覽器不會忽略。

解決問題方法:

判斷節點nodeType是否爲1, 如是爲元素節點，跳過。

12插入節點appendChild()

在指定節點的最後一個子節點列表之後添加一個新的子節點。

語法:

appendChild(newnode)

參數:

newnode：指定追加的節點。

我們來看看，div標籤內創建一個新的 P 標籤，代碼如下:

運行結果:

HTML
JavaScript
This is a new p

13插入節點insertBefore()

insertBefore() 方法可在已有的子節點前插入一個新的子節點。

語法:

insertBefore(newnode,node);

參數:

newnode: 要插入的新節點。

node: 指定此節點前插入節點。

我們在來看看下面代碼，在指定節點前插入節點。

運行結果:

This is a new p
JavaScript
HTML

注意: otest.insertBefore(newnode,node); 也可以改爲: otest.insertBefore(newnode,otest.childNodes[0]);

14刪除節點removeChild()

removeChild() 方法從子節點列表中刪除某個節點。如刪除成功，此方法可返回被刪除的節點，如失敗，則返回 NULL。

語法:

nodeObject.removeChild(node)

參數:

node ：必需，指定需要刪除的節點。

我們來看看下面代碼，刪除子點。

運行結果:

HTML
刪除節點的內容: javascript

注意: 把刪除的子節點賦值給 x，這個子節點不在DOM樹中，但是還存在內存中，可通過 x 操作。

如果要完全刪除對象，給 x 賦 null 值，代碼如下:

15替換元素節點replaceChild()

replaceChild 實現子節點(對象)的替換。返回被替換對象的引用。

語法：

node.replaceChild (newnode,oldnew )

參數：

newnode : 必需，用於替換 oldnew 的對象。
oldnew : 必需，被 newnode 替換的對象。

我們來看看下面的代碼:

效果: 將文檔中的 Java 改爲 JavaScript。

注意:

1. 當 oldnode 被替換時，所有與之相關的屬性內容都將被移除。

2. newnode 必須先被建立。

16創建元素節點createElement

createElement()方法可創建元素節點。此方法可返回一個 Element 對象。

語法：

document.createElement(tagName)

參數:

tagName：字符串值，這個字符串用來指明創建元素的類型。

注意：要與appendChild() 或 insertBefore()方法聯合使用，將元素顯示在頁面中。

我們來創建一個按鈕，代碼如下：

<script type="text/javascript">
   var body = document.body; 
   var input = document.createElement("input");  
   input.type = "button";  
   input.value = "創建一個按鈕";  
   body.appendChild(input);  
 </script>

效果：在HTML文檔中，創建一個按鈕。

我們也可以使用setAttribute來設置屬性，代碼如下：

<script type="text/javascript">  
   var body= document.body;             
   var btn = document.createElement("input");  
   btn.setAttribute("type", "text");  
   btn.setAttribute("name", "q");  
   btn.setAttribute("value", "使用setAttribute");  
   btn.setAttribute("onclick", "javascript:alert('This is a text!');");       
   body.appendChild(btn);  
</script>

效果：在HTML文檔中，創建一個文本框，使用setAttribute設置屬性值。當點擊這個文本框時，會彈出對話框“This is a text!”。

17創建文本節點createTextNode

createTextNode() 方法創建新的文本節點，返回新創建的 Text 節點。

語法：

document.createTextNode(data)

參數：

data : 字符串值，可規定此節點的文本。

18瀏覽器窗口可視區域大小

獲得瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）的方法:

一、對於IE9+、Chrome、Firefox、Opera 以及 Safari：

• window.innerHeight - 瀏覽器窗口的內部高度

• window.innerWidth - 瀏覽器窗口的內部寬度

二、對於 Internet Explorer 8、7、6、5：

• document.documentElement.clientHeight表示HTML文檔所在窗口的當前高度。

• document.documentElement.clientWidth表示HTML文檔所在窗口的當前寬度。

或者

Document對象的body屬性對應HTML文檔的<body>標籤

• document.body.clientHeight

• document.body.clientWidth

在不同瀏覽器都實用的 JavaScript 方案：

var w= document.documentElement.clientWidth
      || document.body.clientWidth;
var h= document.documentElement.clientHeight
      || document.body.clientHeight;

19網頁尺寸scrollHeight

scrollHeight和scrollWidth，獲取網頁內容高度和寬度。

一、針對IE、Opera:

scrollHeight 是網頁內容實際高度，可以小於 clientHeight。

二、針對NS、FF:

scrollHeight 是網頁內容高度，不過最小值是 clientHeight。也就是說網頁內容實際高度小於 clientHeight 時，scrollHeight 返回 clientHeight 。

三、瀏覽器兼容性

var w=document.documentElement.scrollWidth
   || document.body.scrollWidth;
var h=document.documentElement.scrollHeight
   || document.body.scrollHeight;

注意:區分大小寫

scrollHeight和scrollWidth還可獲取Dom元素中內容實際佔用的高度和寬度。

20網頁尺寸offsetHeight

offsetHeight和offsetWidth，獲取網頁內容高度和寬度(包括滾動條等邊線，會隨窗口的顯示大小改變)。

一、值

offsetHeight = clientHeight + 滾動條 + 邊框。

二、瀏覽器兼容性

var w= document.documentElement.offsetWidth
    || document.body.offsetWidth;
var h= document.documentElement.offsetHeight
    || document.body.offsetHeight;

21網頁捲去的距離與偏移量

我們先來看看下面的圖：

scrollLeft:設置或獲取位於給定對象左邊界與窗口中目前可見內容的最左端之間的距離，即左邊灰色的內容。

scrollTop:設置或獲取位於對象最頂端與窗口中可見內容的最頂端之間的距離，即上邊灰色的內容。

offsetLeft:獲取指定對象相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置。

offsetTop:獲取指定對象相對於版面或由 offsetParent 屬性指定的父座標的計算頂端位置。

注意:

1. 區分大小寫

2. offsetParent：佈局中設置postion屬性(Relative、Absolute、fixed)的父容器，從最近的父節點開始，一層層向上找，直到HTML的body。

調整橫豎滾動條後，點擊按鈕後，查看offsetTop、offsetLeft、scrollTop、scrollLeft值的變化。

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
    function req(){
          var div = document.getElementById("div1");
          document.getElementById("li1").innerHTML = (div.offsetTop)+"px";//div1距離屏幕頂部的距離
          document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";//div1距離屏幕左部的距離
          document.getElementById("li3").innerHTML = (div.scrollTop)+"px";//div1縱向滾動條滾動的距離
          document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";//div1橫向滾動條滾動的距離
     }
</script>
</head>
<body style="border:10px solid #ccc;padding:0px 0px;margin:5px 10px">
    <div style="width:60%;border-right:1px dashed red;float:left;">
        <div style="float:left;">
            <div id="div1" style="border:5px red solid;height:300px;width:200px;overflow:auto">
                <div style="height:500px;width:400px">請調整橫豎滾動條後，點擊按鈕後查看offsetTop、offsetLeft、scrollTop、scrollLeft值。</div>
            </div>
            <input type="button" value="點擊我!" οnclick="req()" style="border: 1px solid purple;height: 25px;"/>
        </div>
        
    </div>
    <div style="width:30%;float:left;">
        <ul style="list-style-type: none; line-height:30px;">結果：
            <li>offsetTop : <span id="li1"></span></li>
            <li>offsetLeft : <span id="li2"></span></li>
            <li> scrollTop : <span id="li3"></span></li>
            <li>scrollLeft : <span id="li4"></span></li>
        </ul>
        
    </div>
    <div style="clear:both;"></div>    
</body>
</html>

文檔對象模型DOM（獲取元素節點、設置節點屬性）

1認識DOM

2getElementsByName()方法

3getElementsByTagName()方法

4區別getElementByID,getElementsByName,getElementsByTagName

5getAttribute()方法

6setAttribute()方法

7節點屬性

8訪問子節點childNodes

9訪問子節點的第一和最後項

10訪問父節點parentNode

11訪問兄弟節點(注意，使用該屬性的時候只有在同一個父節點下，才能獲取）

12插入節點appendChild()

13插入節點insertBefore()

14刪除節點removeChild()

15替換元素節點replaceChild()

16創建元素節點createElement

17創建文本節點createTextNode

18瀏覽器窗口可視區域大小

19網頁尺寸scrollHeight

20網頁尺寸offsetHeight

21網頁捲去的距離與偏移量

js中的事件響應，實現網頁交互,鼠標點擊、經過等

顏色值的幾種寫法，長度值（px（像素）、em、% 百分比）

css樣式，水平垂直居中顯示

Python中繼承、多態、多繼承、判斷類型、json.load()解析、獲取/設置對象信息

JavaScript瞭解，js的插入

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結