Javascript學習十

時間 2019-12-07

標籤 javascript 學習欄目 JavaScript 简体版

原文原文鏈接

認識DOM

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

先來看看下面代碼:html

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

HTML文檔能夠說由節點構成的集合，DOM節點有:node

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

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

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

節點屬性:瀏覽器

遍歷節點樹:app

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

DOM操做:

注意:前兩個是document方法。

//================================================================

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開始。

看看下面代碼，經過getElementsByTagName()獲取節點。

//============================================================

區別getElementByID,getElementsByName,getElementsByTagName

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

1. ID 是一我的的身份證號碼，是惟一的。因此經過getElementById獲取的是指定的一我的。

2. Name 是他的名字，能夠重複。因此經過getElementsByName獲取名字相同的人集合。

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

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

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

input標籤就像人的類別。

name屬性就像人的姓名。

id屬性就像人的身份證。

方法總結以下:

注意：方法區分大小寫

經過下面的例子(6個name="hobby"的複選項，兩個按鈕)來區分三種方法的不一樣:

  <input type="checkbox" name="hobby" id="hobby1">  音樂
  <input type="checkbox" name="hobby" id="hobby2">  爬山
  <input type="checkbox" name="hobby" id="hobby3">  游泳
  <input type="checkbox" name="hobby" id="hobby4">  閱讀
  <input type="checkbox" name="hobby" id="hobby5">  打球
  <input type="checkbox" name="hobby" id="hobby6">  跑步 
  <input type="button" value = "全選" id="button1">
  <input type="button" value = "全不選" id="button1">

1. document.getElementsByTagName("input")，結果爲獲取全部標籤爲input的元素，共8個。

2. document.getElementsByName("hobby")，結果爲獲取屬性name="hobby"的元素，共6個。

3. document.getElementById("hobby6")，結果爲獲取屬性id="hobby6"的元素，只有一個，"跑步"這個複選項。

//======================================================================

getAttribute()方法

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

語法：

elementNode.getAttribute(name)

說明:

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

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

看看下面的代碼，獲取h1標籤的屬性值：

運行結果:

h1標籤的ID ：alink
h1標籤的title ：getAttribute()獲取標籤的屬值

//=================================================================

setAttribute()方法

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

語法：

elementNode.setAttribute(name,value)

說明：

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

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

注意：

1.把指定的屬性設置爲指定的值。若是不存在具備指定名稱的屬性，該方法將建立一個新屬性。

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

//============================================================

節點屬性

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

1. nodeName : 節點的名稱

2. nodeValue ：節點的值

3. nodeType ：節點的類型

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

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

2、nodeValue 屬性：節點的值

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

3、nodeType 屬性: 節點的類型，是隻讀的。如下經常使用的幾種結點類型:

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

//===========================================================

訪問子節點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

//==================================================

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

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

語法：

node.firstChild

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

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

語法：

node.lastChild

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

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

//=============================================================================================

訪問父節點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等瀏覽器標籤之間的空白也算是一個文本節點。

//=========================================================================

訪問兄弟節點

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

語法：

nodeObject.nextSibling

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

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

語法：

nodeObject.previousSibling

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

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

解決問題方法:

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

運行結果:

LI = javascript
nextsibling: LI = jquery

//=======================================================================

插入節點appendChild()

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

語法:

appendChild(newnode)

參數:

newnode：指定追加的節點。

咱們來看看，div標籤內建立一個新的 P 標籤，代碼以下:

運行結果:

HTML
JavaScript
This is a new p

//=============================================================

插入節點insertBefore()

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

語法:

insertBefore(newnode,node);

參數:

newnode: 要插入的新節點。

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

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

運行結果:

This is a new p
JavaScript
HTML

注意: otest.insertBefore(newnode,node); 也能夠改成: otest.insertBefore(newnode,otest.childNodes[0]);

//=========================================================================

刪除節點removeChild()

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

語法:

nodeObject.removeChild(node)

參數:

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

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

運行結果:

HTML
刪除節點的內容: javascript

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

若是要徹底刪除對象，給 x 賦 null 值，代碼以下:

//===============================================================

替換元素節點replaceChild()

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

語法：

node.replaceChild (newnode,oldnew )

參數：

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

咱們來看看下面的代碼:

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

注意:

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

2. newnode 必須先被創建。

//===================================================================

建立元素節點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!」。

//================================================================================

建立文本節點createTextNode

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

語法：

document.createTextNode(data)

參數：

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

咱們來建立一個<div>元素並向其中添加一條消息，代碼以下：

運行結果:

//=================================================================

瀏覽器窗口可視區域大小

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

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

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

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

2、對於 Internet Explorer 八、七、六、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，獲取網頁內容高度和寬度。

1、針對IE、Opera:

scrollHeight 是網頁內容實際高度，能夠小於 clientHeight。

2、針對NS、FF:

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

3、瀏覽器兼容性

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

注意:區分大小寫

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

//=============================================================================================

網頁尺寸offsetHeight

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

1、值

offsetHeight = clientHeight + 滾動條 + 邊框。

2、瀏覽器兼容性

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

//==============================================================================