整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          JavaScript中的DOM

          JavaScript中的DOM

          . 關于DOM

          文檔對象模型(DocumentObject Model),是基于瀏覽器編程的一套API接口,W3C出臺的推薦標準,每個瀏覽器都有一些細微的差別,其中以Mozilla(火狐)的瀏覽器最與標準接近。

          通過 DOM,可以訪問所有的 HTML元素,連同它們所包含的文本和屬性。可以對其中的內容進行修改和刪除,同時也可以創建新的元素。


          2. 動態改變文檔內容

          要想對頁面的內容做修改,需要如下方式來操作:

          ? a.解析文檔(如HTML)并生成DOM樹

          ? b.通過DOM提供的屬性和方法,獲取或改變文檔的內容

          2.1 DOM的節點

          HTML 文檔中的每個成分都是一個節點(Node)

          DOM 是這樣規定的:

          • 整個文檔是一個文檔節點
          • 每個 HTML 標簽是一個元素節點
          • 包含在 HTML 元素中的文本是文本節點
          • 每一個 HTML 屬性是一個屬性節點
          • 注釋屬于注釋節點

          2.1.1 節點間的關系

          節點彼此都有等級關系

          父節點、子節點、兄弟節點(同級節點)

          2.2 DOM標準接口

          W3C提供了三類DOM標準接口,如下:

          ? a. 核心DOM,適用于各種結構化文檔

          ? b.HTML DOM,專用于HTML文檔

          c. XML DOM,專用于XML文檔


          3. 核心DOM操作

          3.1 訪問節點

          訪問節點兼容處理

          getElement系列方法

          使用getElement系列方法來訪問指定的節點

          • getElementById():返回對擁有指定id的第一個對象的引用
          • getElementsByTagName():返回帶有指定名稱的對象集合
          • getElementsByClassName():返回指定的類選擇器的集合
          • getElementsByName():返回帶有指定名稱的對象集合(注意不是所有標簽都有name屬性)

          3.1.1 節點信息1

          每個節點都擁有包含節點某些信息的屬性

          • nodeName(節點名稱)
          • nodeValue(節點值)
          • nodeType(節點類型)

          3.1.2 節點信息2

          nodeName

          • 元素節點的 nodeName (節點名稱)是標簽名稱
          • 屬性節點的 nodeName 是屬性名稱
          • 文本節點的 nodeName 永遠是 #text
          • 文檔節點的 nodeName 永遠是 #document

          nodeValue

          • 對于文本節點,nodeValue 屬性包含文本
          • 對于屬性節點,nodeValue 屬性包含屬性值

          nodeType

          • 元素 1 、屬性 2、 文本 3、 注釋 8、 文檔 9
          • 上面不同的數值代表不同的節點類型

          3.2 創建和操作節點

          3.2.1 主要方法

          方法 說 明

          createElement( tagName) 創建一個名為tagName的新元素節點,用法Document.createElement(標簽名)

          ANode.appendChild( BNode) 把子節點B追加到父節點A里面的末尾

          insertBefore( ANode,BNode ) 把A節點插入到B節點之前

          Node.loneNode(deep) deep為true則復制該節點以及該節點的所有子節點,為false則只復制該節點和其屬性


          3.2.2 操作節點的屬性


          3.3 刪除和替換節點

          方法 說 明

          removeChild( node) 刪除指定的節點(用父級元素去調用它)

          replaceChild( newNode, oldNode) 用newNode來替換oldNode(https://www.cnblogs.com/zzq919101/p/6017152.html)

          3.3.1 removeChild()示例代碼如下

          var tb = document.getElementById("tb");
          //先找到要刪除的節點,這里要刪除一行
          var tr = tb.lastChild.lastChild;
          //這里也需要父節點操作子節點
          tr.parentNode.removeChild(tr);???

          3.3.2 replaceChild()示例代碼

          var tb = document.getElementById("tb");
          var tr = document.createElement("tr");
          var td1 = document.createElement("td");
          var td2 = document.createElement("td");
          td1.innerHTML = "我的內容1";
          td2.innerHTML = "我的內容2";
          tr.appendChild(td1);
          tr.appendChild(td2);
          
          //父節點操作子節點
          //兩個參數,第一個表示新節點,第二個表示舊節點,這里用心節點替換舊節點
          tb.lastChild.replaceChild(tr,tb.lastChild.firstChild);??

          3.4 其他

          id,value等操作

          innerHTML和innerText的區別

          • 如果內容中有html標簽,使用innerHTML時,內容中的html標簽會被解析出來,而使用innerText時,html只會被當作文本顯示出來

          元素.style.樣式

          className

          3.5 示例

          代碼1:

          結果1:

          代碼2:

          結果2:

          代碼3:

          結果3:


          4. HTML DOM操作

          ? HTML文檔中的每個節點,都是DOM對象,每個DOM對象都有屬于自己的屬性和方法.

          ? HTML DOM在操作表格時,我們把一個表格看成是一個table對象,那么一個table對象是由若干個行對象(row)組成的,而其中每個行對象又是由若干個單元格對象(cell)組成的

          ? Table對象可以操作行對象,行對象可以操作單元格對象

          4.1 table表格對象

          類別 名稱 描述

          屬性 rows[] 返回包含表格中所有行的一個數組

          方法 insertRow() 在表格中插入一個新行

          方法 deleteRow() 從表格中刪除一行


          4.2 row行對象

          類別 名稱 描述

          屬性 cells[] 返回包含行中所有單元格的一個數組

          屬性 rowIndex 返回該行在表中的位置

          方法 insertCell() 在一行中的指定位置插入一個空的<td>標簽

          方法 deleteCell() 刪除行中指定的單元格


          另,對于單元格對象,還有cellIndex可以獲取單元格的索引號

          例如,這里需要在表格的末尾追加一行:

          Object 對象

          Object 對象表示一個 HTML <object> 元素。

          <object> 元素用于在網頁中包含對象,比如:圖像、音頻、視頻、Java applet、ActiveX、PDF、Flash 等。

          訪問 Object 對象

          您可以使用 getElementById() 來訪問 <object> 元素:

          var x=document.getElementById("myObject");

          創建 Object 對象

          您可以使用 document.createElement() 方法來創建 <object> 元素:

          var x=document.createElement("OBJECT");

          Object 對象屬性

          屬性描述
          alignHTML5 中不支持。使用 style.cssFloat 替代。 設置或返回對象相對于周圍文本的對齊方式。
          archiveHTML5 中不支持。設置或返回一個用于實現對象存檔功能的字符串。
          borderHTML5 中不支持。使用 style.border 替代。 設置或返回圍繞對象的邊框。
          codeHTML5 中不支持。 設置或返回文件的 URL,該文件包含已編譯的 Java 類。
          codeBaseHTML5 中不支持。 設置或返回組件的 URL。
          codeTypeHTML5 中不支持。
          data
          declareHTML5 中不支持。
          form返回對對象的父表單的引用。
          height設置或返回對象的高度。
          hspaceHTML5 中不支持。使用 style.margin 替代。 設置或返回對象的水平外邊距。
          name設置或返回對象的名稱。
          standbyHTML5 中不支持。 設置或返回在加載對象時的消息。
          type設置或返回通過 data 屬性下載的數據的內容類型。
          useMap
          vspaceHTML5 中不支持。使用 style.margin 替代。 設置或返回對象的垂直外邊距。
          width設置或返回對象的寬度。

          標準屬性和事件

          Object 對象同樣支持標準 屬性 和 事件。

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          OM操作

          節點類型

          <p title="remark">備注</p>

          節點分為三個類型

          • 元素節點 如上述html中的p標簽
          • 屬性節點 如上述html中的title屬性,元素節點的屬性
          • 文本節點 如上述html中的 備注,元素節點的子節點

          文檔加載順序

          html的文檔是按照順序進行加載的,如果將js寫在<head>中,獲取<body>中節點時會獲取不到,使用兩種方式來解決這種情況

          第一種方式:在<html>之后編寫<script>

          第二種方式:在<script>中使用window.onload來加載html文檔,加載完之后再去獲取html中的元素節點就可以獲取到

          獲取節點

          獲取元素節點

          獲取id為content的節點,html中需要確保id值唯一

          window.onload=function(){
            var content=document.getElementById("content");
          }
          

          獲取li節點,使用標簽名獲取節點的集合

          var liNodes=document.getElementsByTagName("li");
          

          屬于node的方法,可以使用任何節點來調用該方法

          var content=document.getElementById("content");
          var liNodes=content.getElementsByTagName("li");
          

          根據元素的name屬性獲取指定的節點集合

          var genders=document.getElementsByName("gender");
          

          操作屬性節點

          通過元素節點 . 的當時來獲取和設置

          // 獲取元素節點
          var nameNode=document.getElementById("name");
          // 讀取屬性的值
          var value=nameNode.value;
          // 設置指定的屬性值
          nameNode.value="你好";
          

          獲取元素節點的子節點

          window.onload=function () {
            // 獲取city節點
            var city=document.getElementById("city");
            // 獲取city節點的所有li子節點
            var cityLiNode=city.getElementsByTagName("li");
            alert(cityLiNode.length);
          }
          

          節點的屬性

          所有的節點都包含有nodeType、nodeName、nodeValue

          // 元素節點
          var elementNode=document.getElementById("bj");
          alert(elementNode.nodeType);  // 元素節點:1
          alert(elementNode.nodeName);  // 節點名:li
          alert(elementNode.nodeValue); // 元素節點沒有nodeValue屬性值:null
          
          // 屬性節點
          var attributeNode=elementNode.getAttributeNode("name");
          alert(attributeNode.nodeType); //屬性節點:2
          alert(attributeNode.nodeName); // 屬性節點的節點名:屬性名
          alert(attributeNode.nodeValue); // 屬性節點的nodeValue屬性值 : 屬性值
          
          // 文本節點
          var textNode=elementNode.firstChild;
          alert(textNode.nodeType); //文本節點:3
          alert(textNode.nodeName); // 文本節點的nodeName:#text
          alert(textNode.nodeValue); // 屬性節點的nodeValue :文本值
          

          創建節點

          // 新創建一個元素節點
          window.onload=function () {
              // 創建li元素節點
              var liNode=document.createElement("li");
              // 獲取需要加入li節點的父節點
              var cityNode=document.getElementById("city");
              // 將li元素節點添加到父節點中
              cityNode.appendChild(liNode);
          
              // 創建一個文本節點
              var textNode=document.createTextNode("香港");
              // 將文本節點放入li元素節點中
              liNode.appendChild(textNode);
          }
          

          刪除節點


          主站蜘蛛池模板: 国产一区二区三区久久| 精品少妇人妻AV一区二区三区| 国产av一区二区精品久久凹凸 | 精品无码AV一区二区三区不卡| 国内精品视频一区二区八戒| 久久国产一区二区三区| 精品国产一区二区三区AV性色| 日本一区二区三区在线观看视频| 亚洲综合一区二区| 一区二区三区日韩| 亚洲AV乱码一区二区三区林ゆな| 国产成人精品一区在线| 亚洲视频在线一区二区| 日韩视频在线观看一区二区| 午夜视频在线观看一区| 亚洲日韩AV无码一区二区三区人 | 五十路熟女人妻一区二区 | 亚洲国产日韩一区高清在线| 免费看一区二区三区四区| 动漫精品一区二区三区3d| 无码人妻aⅴ一区二区三区| AV天堂午夜精品一区二区三区| 日韩一区二区三区四区不卡| 日韩中文字幕精品免费一区| 国产高清在线精品一区| 亚洲色一区二区三区四区 | 亚洲一区二区三区AV无码| 日本一区二区三区高清| 亚洲色无码一区二区三区| 久久99国产精一区二区三区| 国产精品美女一区二区视频| 乱精品一区字幕二区| 国产自产对白一区| 久久久久久人妻一区二区三区| 精品国产免费观看一区| 日本一区二区三区免费高清在线 | 中文字幕精品一区二区精品| 久久精品免费一区二区三区 | 在线观看国产一区二三区| 亚洲a∨无码一区二区| 精品3d动漫视频一区在线观看|