DOM探索之控制頁面元素

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

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

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

2. 文本節點：向用戶展示的內容，如<li>...</li>中的文本內容。

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

節點屬性：

屬性	說明
nodeName	返回一個字符串，其內容是給定節點的名字
nodeType	返回一個整數，這個數值代表給定節點的類型
nodeValue	返回給定節點的當前值

遍歷節點樹：

屬性	說明
childNodes	返回一個數組，這個數組由給定元素節點的子節點構成
firstChild	返回第一個子節點
lastChild	返回最後一個子節點
parentNode	返回一個給定節點的父節點
nextSibling	返回給定節點的下一個子節點
previousSibling	返回給定節點的上一個子節點

DOM操作：

方法	說明
getElementById()	返回帶有指定 ID 的元素
getElementsByTagName()	返回包含帶有指定標籤名稱的所有元素的節點列表（集合/節點數組）
getElementsByClassName()	返回包含帶有指定類名的所有元素的節點列表
appendChild()	把新的子節點添加到指定節點
removeChild()	刪除子節點
replaceChild()	替換子節點
nsertBefore()	在指定的子節點前面插入新的子節點
createAttribute()	創建屬性節點
createElement()	創建元素節點
createTextNode()	創建文本節點
getAttribute()	返回指定的屬性值
setAttribute()	把指定屬性設置或修改爲指定的值

getElementById()方法

返回帶有指定唯一ID的節點對象。

語法：

document.getElementById(id)

注意:

因爲文檔中的 id 屬性唯一，所有 getElementById() 方法返回的是一個元素。

getElementsByName()方法

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

語法：

document.getElementsByName(name)

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

注意:

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

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

getElementsByTagName()方法

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

語法:

document.getElementsByTagName(Tagname)

說明:

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

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

getAttribute()方法

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

語法：

elementNode.getAttribute(name)

說明:

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

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

setAttribute()方法

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

語法：

elementNode.setAttribute(name,value)

說明：

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

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

注意：

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

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

節點屬性

在文檔對象模型 (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

訪問子結點childNodes

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

語法：

elementNode.childNodes

注意：

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

注意:

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

2. 節點之間的空白符，在firefox、chrome、opera、safari瀏覽器是文本節點，而IE中不是。

訪問子結點的第一和最後項

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

語法：

node.firstChild

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

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

語法：

node.lastChild

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

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

訪問父節點parentNode

獲取指定節點的父節點

語法：

elementNode.parentNode

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

訪問祖節點：

elementNode.parentNode.parentNode

訪問兄弟節點

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

語法：

nodeObject.nextSibling

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

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

語法：

nodeObject.previousSibling

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

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

解決問題方法：

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

<!DOCTYPE HTML>
<html lang="zh-CN">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>nextSibling</title>
  </head>
  <body>
    <ul id="u1">   
      <li id="a">javascript</li>   
      <li id="b">jquery</li>   
      <li id="c">html</li>   
    </ul>   
    <ul id="u2">   
      <li id="d">css3</li>   
      <li id="e">php</li>   
      <li id="f">java</li>   
    </ul>   
    <script type="text/javascript">
      function get_nextSibling(n){
        var x=n.nextSibling;
        while (x && x.nodeType!=1){
            x=x.nextSibling;
        }
        return x;
      }
      function get_previousSibling(n){
        var x=n.previousSibling;
        while(x&&x.nodeType!=1){
            x=x.previousSibling;
        }
        return x;
      }
      function get_firstChild(n){
        var x=n.firstChild;
        while(x&&x.nodeType!=1){
            x=x.nextSibling;
        }
        return x;
      }
      function get_lastChild(n){
        var x=n.lastChild;
        while(x&&x.nodeType!=1){
            x=x.previousSibling;
        }
        return x;
      }
      var x=document.getElementsByTagName("li")[0];
      document.write(x.nodeName+" = "+x.innerHTML+"<br>");
      var y=get_nextSibling(x);
      if(y!=null){
        document.write("<br />nextsibling: "+y.nodeName+" = "+y.innerHTML);
      }else{
        document.write("<br>已經是最後一個節點");      
      }
      var u2=document.getElementById("u2");
      var l=get_lastChild(u2);
      document.write("<br>"+l.nodeName+"="+l.innerHTML);
      var z=get_previousSibling(l);
      if(z!=null){
        document.write("<br />previoussibling: "+z.nodeName+" = "+z.innerHTML);
      }else{
        document.write("<br>已經是第一個節點");      
      }
   </script>
  </body>
</html>

插入節點appendChild()

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

語法:

appendChild(newnode)

參數:

newnode：指定追加的節點。

插入節點insertBefore()

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

語法:

insertBefore(newnode,node);

參數:

newnode: 要插入的新節點。

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

刪除節點removeChild()

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

語法:

nodeObject.removeChild(node)

參數:

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

替換元素節點replaceChild()

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

語法：

node.replaceChild (newnode,oldnew )

參數：

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

創建元素節點createElement

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

語法：

document.createElement(tagName)

參數:

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

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

創建文本節點createTextNode

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

語法：

document.createTextNode(data)

參數：

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

瀏覽器窗口可視區域大小

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

一、對於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;

網頁尺寸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元素中內容實際佔用的高度和寬度。

網頁尺寸offsetHeight

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

一、值

offsetHeight = clientHeight + 滾動條 + 邊框。

二、瀏覽器兼容性

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

網頁捲去的距離與偏移量

我們先來看看下面的圖：

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

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

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

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

注意:

1. 區分大小寫

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

DOM探索之控制頁面元素

getElementById()方法

getElementsByTagName()方法

getAttribute()方法

setAttribute()方法

節點屬性

訪問子結點childNodes

訪問子結點的第一和最後項

訪問父節點parentNode

訪問兄弟節點

插入節點appendChild()

插入節點insertBefore()

刪除節點removeChild()

替換元素節點replaceChild()

創建元素節點createElement

創建文本節點createTextNode

瀏覽器窗口可視區域大小

網頁尺寸scrollHeight

網頁尺寸offsetHeight

網頁捲去的距離與偏移量

電子科技大學計算機科學與技術就讀體驗

Golang爬蟲代理接入的技術與實踐

Javascript中的事件處理程序

freemarker如何獲取頁面請求的參數

如何寫出漂亮的js代碼

DOM探索之基礎詳解

DOM探索之控制頁面元素

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

linux以太網驅動總結