2. 程式人生 > >小白讀《JavaScript高階程式設計》DOM基礎部分

小白讀《JavaScript高階程式設計》DOM基礎部分

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

DOM

DOM（文件物件模型）是針對HTML和XML文件 的一個API（應用程式程式設計介面）。

節點層次

DOM可以將任何HTML或XML文件描繪成一個由多層節點構成的結構。
每個文件只能有一個文件元素，在HTML頁面中，文件元素始終都是<html>元素。
總共有12種節點型別：
示例圖片3

Node型別

DOM1級定義了一個Node介面，該介面將由DOM中的所有節點型別實現。
JavaScript中的所有節點型別都繼承自Node型別。
nodeType屬性：用於表明節點的型別。
12個數值 常量來表示節點型別，任何節點型別必居其一。

  • Node.ELEMENT_NODE(1);
  • Node.ATTRIBUTE_NODE(2);
  • Node.TEXT_NODE(3);
  • Node.CDATA_SECTION_NODE(4);
  • Node.ENTITY_REFERENCE_NODE(5);
  • Node.ENTITY_NODE(6);
  • Node.PROCESSING_INSTRUCTION_NODE(7);
  • Node.COMMENT_NODE(8);
  • Node.DOCUMENT_NODE(9);
  • Node.DOCUMENT_TYPE_NODE(10);
  • Node.DOCUMENT_FRAGMENT_NODE(11);
  • Node.NOTATION_NODE(12)。

nodeName和nodeValue屬性

瞭解節點的具體資訊。

節點關係

每個節點都有一個childNodes屬性，其中儲存著一個NodeList物件。
NodeList物件：一種類陣列的物件（不是陣列，但是有length）。

通用的將NodeList物件轉為陣列的方法：

function converToArray(nodes) {
	var array = null;
	try {
		array = Array.prototype.slice.call(nodes,0);		//針對非IE瀏覽器
	} catch (ex) {
		array = new Array();
		for (var i = 0,len = nodes.length; i < len; i++) {
			array.push(nodes[i]);
		}
	}
	return array;
}

每個節點都有一個parentNode屬性，該屬性指向文件樹中的父節點。
對於同胞節點，通過使用列表中每個節點的previousSibling（上一個節點）和nextSibling（下一個節點）屬性，可以訪問同一列表中的其他節點。

父節點的firstChild和lastChild屬性分別指向其childNodes列表中的第一個和最後一個節點。
示例圖片4

hasChildNodes()方法：返回是否有位元組點，Boolean型別。
每個節點都有的屬性：ownerDocument：該屬性指向表示整個文件的文件節點。

操作節點

appendChild()方法：用於向childNodes列表的末尾新增一個節點。
appendChild()返回新增的節點。
如果appendChild()中的節點已經是文件的一部分了，就將該節點從原來位置轉移到新位置。

insertBefore()方法：接受兩個引數：要插入的節點和作為參照的節點。
插入節點後，被插入的節點會變成參照節點的前一個同胞節點（previousSibling），同時被方法返回。
如果參照節點為null，則同appendChild()方法。

replaceChild()方法：接受兩個引數：要插入的節點和要替換的節點。

removeChild()方法：接受一個引數，即是要移除的節點。

其他方法

兩個所有型別的節點都有的方法：
cloneNode()：用於建立呼叫這個方法的節點的一個完全相同的副本。
接受一個布林值引數，表示是否執行深複製。
true：深複製，複製節點及其整個子節點樹。
false：淺複製，只複製節點本身。

normalize()：這個方法唯一的作用就是處理文件樹中的文字節點。
刪除文字，合併相鄰文字節點。

Document型別

Document節點具有下列特徵：

  • nodeType的值為9;
  • nodeName的值為"#document";
  • nodeValue的值為null;
  • parentNode的值為null;
  • ownerDocument的值為null;
  • 其子節點可能是一個DocumentType(最多一個)、Element(最多一個)、ProcessingInstruction或Comment。

文件的子節點

documentElement屬效能更快捷、更直接地訪問HTML中的<html>元素。
獲取body元素：document.body
獲取<!DOCTYPE>標籤：document.doctype

文件資訊

類似的還有：
document.title;
document.URL;（http獲得的頁面的URL）
document.domain（域名）

查詢元素

兩個方法：

  • getElementById()：通過id屬性（怪癖：name屬性也會被呼叫）
  • getElementsByTagName()：通過標籤名。

HTMLDocument型別獨有的方法：
getElementsByName()：通過name屬性。

特殊集合

都是HTMLCollection物件：

  • document.anchors：所有帶name特性發<a>元素。
  • document.applets：文件中所有的<applet>元素。
  • document.forms
  • document.images
  • document.links：文件中所有帶href特性的<a>元素。

DOM一致性檢測

document.implementation規定了一個方法：hasFeature()。

var hasXmlDom = document.implementation。hasFeature("XML","1.0");

文件寫入

4個方法：

  • write()：接受一個字串
  • writeln()：接受一個字串
  • open()：開啟網頁的輸出流
  • close()：關閉網頁的輸出流

Element型別

  • nodeType的值為1
  • nodeName的值為元素的標籤名
  • nodeValue的值為null
  • parentNode可能是Document或Element；
  • 其子節點可能是Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference。

在HTML中，標籤名始終都以大寫表示，而在XML（有時候也包括XHTML）中，標籤名則始終會與原始碼中的保持一致。

element.tagName.toLowerCase() == "div"

HTML元素

所有HTML元素都由HTMLElement型別表示。

  • id，元素在文件中的唯一識別符號。
  • title，有關元素的附加說明資訊，一般通過工具提示條顯示出來。
  • lang，元素內容的語言程式碼，很少使用。
  • dir，語言的方向，ltr、rtl。
  • className，與元素的class特性對應。

取得特性

每個元素都有一個或多個特性，這些特性的用途是給出相應元素或其內容的附加資訊。
操作特性的DOM方法主要有三個：

  • getAttribute()：引數是特性名的字串。
  • setAttribute()：同上
  • removeAttribute()：同上

兩類特殊的特性：style和onclick。

設定特性

setAttribute()，替換或者建立。
這個方法設定的特性名會統一轉換為小寫形式。

attributes屬性

Element型別是使用attributes屬性的唯一一個DOM節點型別。
attributes屬性中包含一個NameNodeMap。
NameNodeMap物件擁有的方法：

  • getNameItem(name)：返回nodeName屬性等於name的節點。
  • removeNamedItem(name)
  • setNamedItem(name)
  • item(pos)

為特性設定新值：

element.attributes["id"].nodeValue = "someOtherId";

建立元素

document.createElement()方法。
引數是要建立元素的標籤名。HTML忽略大小寫，XML區分大小寫。

把新元素新增到文件樹：
appendChild()、insertBefore()、replaceChild()。

注意點：

  1. 不能設定動態建立的<iframe>元素的name特性。
  2. 不能通過表單的reset()方法重設動態建立的<input>元素。
  3. 動態建立的type特性值為"reset"的<button>元素重設不了表單。
  4. 動態建立的一批name相同的單選框彼此毫無關係。

元素的子節點

元素可以有任意數目的子節點和後代節點。
這些子節點有可能是元素、文字節點、註釋或處理指令。

Text型別

  • nodeType的值為3
  • nodeName的值為"#text"
  • nodeValue的值為節點所包含的文字
  • parentNode是一個Element
  • 不支援（沒有）子節點。

操作節點中的文字：

  • appendData(text)：將text新增到節點的末尾
  • deleteData(offset,count)：從offset指定的位置開始刪除count個字元。
  • insertData(offset,text)：在offset指定的位置插入text
  • replaceData(offset,count,text)：用text替換從offset指定的位置開始到offset+count為止的文字。
  • splitText(offset)：從offset指定的位置將當前文字節點分成兩個文字節點。
  • substringData(offset,count)：提取從offset指定的位置開始到offset+count為止的字串。

還有個length屬性

建立文字節點

document.createTextNode()方法。

規範化文字節點

normalize()方法
父節點使用，子節點中多個文字節點合併為一個。

分割文字節點

splitText()方法。
引數：一個數值代表要分割的位置。
把一個節點分為兩個。

Comment型別

  • nodeType的值為8
  • nodeName的值為"#comment"
  • nodeValue的值是註釋的內容
  • parentNode 可能是Document或Element
  • 不支援（沒有）子節點。

Coment型別與Text型別繼承自相同的基類（所以，你懂的，很多前面提到的方法可以用）。
document.createComment()

CDATASection型別

只針對基於XML的文件。類似Comment，nodeType值為4。

DocumentType型別

並不常用。包含著與文件的doctype有關的所有資訊。

  • nodeType的值為10
  • nodeName的值為doctype的名稱
  • nodeValue的值為null
  • parentNode是Document
  • 不支援（沒有）子節點

DocumentFragment型別

"輕量級"文件。

  • nodeType值11
  • nodeName："#document-fragment"
  • nodeValue：null
  • parentNode：null
  • 子節點可以是：Element、ProcessingInstruction、Comment、Text、CDATASection或EntityReference。

document.createDocumentFragment()方法。

Attr型別

  • nodeType：2
  • nodeName：特性的名稱
  • nodeValue：特性的值
  • parentNode：null
  • 在HTML中不支援（沒有）子節點。
  • 在XML中子節點可以是Text或EntityReference。

3個屬性：name、value、specified（布林值，區別在程式碼中指定的還是預設的）。
程式碼演示：

var attr = document.createAttribute("align");
attr.value = "left";
element.setAttributeNode(attr);

alert(element.atrributes["align"].value);		//"left"
alert(element.getAtrributeNode("align").value);		//"left"
alert(element.getAtrribute("align"));				//"left"

DOM操作技術

瀏覽器中充斥著隱藏的陷阱和不相容問題。

動態指令碼

在頁面載入時不存在，但將來的某一時刻通過修改DOM動態新增的指令碼。
建立動態指令碼兩種方式：插入外部檔案和直接插入JavaScript程式碼。
封裝的方法實現載入外部JavaScript檔案：

function loadScript(url) {
	var script = document.createElement("script");
	script.type = "text/javascript";
	script.src = url;
	document.body,appendChild(script);
}

直接插入封裝的函式：

function loadScriptString(code) {
	var script = document.createElement("script");
	script.type = "text/javascript";
	try {
		script.appendChild(document.createTextNode(code));
	}catch(ex) {
		script.text = code;
	}
	document.body.appendChild(script);
}

動態樣式

封裝的載入樣式的方法：

function loadStyles(url) {
	var link = document.createElement("link");
	link.rel = "stylessheet";
	link.type = "text/css";
	link.href = url;
	var head = document.getElementsByTagName("head")[0];
	head.appendChild(link);
}

直接寫程式碼封裝的方法：

function loadStylesString(css) {
	var style = document.createElement("style");
	style.type = "text/css";
	try {
		style.appendChild(document.createTextNode(css));
	} catch (ex) {
		style.styleSheet.cssText = css;
	}
	var head = document.getElementsByTagName('head')[0];
	head.appendChild(style);
}

操作表格

<table>元素是HTML中最複雜的結構之一。
正常寫需要冗長的程式碼。
使用HTMLDOM提供的方法可以簡化。
例：要建立下面結構：

<table border="1" width="100%">
	<tbody>
		<tr>
			<td>Cell 1,1</td>
			<td>Cell 2,1</td>
		</tr>
		<tr>
			<td>Cell 1,2</td>
			<td>Cell 2,2</td>
		</tr>
	</tbody>
</table>

DOM程式碼：

//建立table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";

//建立tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);
//建立第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));
//建立第二行
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));
//將表格新增到文件主體中
document.body.appendChild(table);

使用NodeList

三個”動態的”集合：NameNodeMap、HTMLCollection和NodeList。
每當文件結構發生變化時，都會得到更新。

相關推薦

小白讀《JavaScript高階程式設計》BOM部分筆記

BOM 如果要在Web中使用JavaScript，那麼BOM（瀏覽器物件模型）是真正的核心。 BOM提供了很多物件，用於訪問瀏覽器的功能，這些功能與任何網頁內容無關。 window物件 BOM的核心物件是window，它表示瀏覽器的一個例項。 window物件的雙重身份：

2020/6/11 JavaScript高階程式設計 DOM

DOM（文件物件模型）是針對HTML和XML文件的一個API（應用程式介面）。他描繪了一個層次化的節點樹，允許開發人員新增、移除和修改頁面的某一部分。 10.1 節點層次 DOM將任何HTML和XML文件描繪成一個由多層節點構成的結構。 文件節點(Document)是每個文件的根節點。文件節點只有一個子節點（

小白讀《JavaScript高階程式設計》DOM基礎部分

DOM DOM（文件物件模型）是針對HTML和XML文件 的一個API（應用程式程式設計介面）。 節點層次 DOM可以將任何HTML或XML文件描繪成一個由多層節點構成的結構。 每個文件只能有一個文件元素，在HTML頁面中，文件元素始終都是<html>元素。 總共有1

小白讀《JavaScript高階程式設計》DOM拓展部分

DOM拓展 DOM兩個主要的拓展是Selectors API和HTML5。 選擇符API jQuery核心：通過CSS選擇符查詢DOM文件取得元素的引用，從而拋開了getElementById()和getElementByTagName()。 SelectorsAPI Lecel

JavaScript高階程式設計:基礎概念下

5.操作符      ①一元操作符:           1）遞增與遞減 前置遞增、遞減：變數的值在語句被求值以前改變。                 後置遞增、遞減：變數的值是在語句被求值之後才執行。 遞增、遞減遵循的規則 1）包含有效數字字元的字串：轉換

《Javascript 高階程式設計(第三版)》筆記0x11 DOM操作技術

動態指令碼 <script type="text/javascript" src="client.js"></script> function loadScript(url){ var script = document.createElement("scri

《Javascript 高階程式設計(第三版)》筆記0x13 DOM2和DOM3：DOM變化

目錄 DOM變化     針對XML名稱空間的變化         Node 型別的變化         Document 型別的變化     &

Javascript高階程式設計學習筆記（35）—— DOM（1）節點

DOM JS由三部分組成 1、BOM 2、DOM 3、ECMAScript ES和BOM在前面的文章已經介紹過了 今天開始JS組成的最後一部分DOM（文件物件模型） 我們知道，JS中的這三個部分實際上就是三種規範，只要是實現了這三種規範，那麼這個語言就可以說是JS DOM（文件物件模型）也是一

Javascript高階程式設計學習筆記（40）—— DOM（6）CDATASection、DocumentType

CDATASection型別 CDATASection型別是隻針對XML文件的型別 因為瀏覽器無法解析 在瀏覽器中建立CDATASection的函式也無法正常使用   該型別有以下屬性 nodeType：4 nodeName：“#data-section” nodeVa

Javascript高階程式設計學習筆記（41）—— DOM（7）DocumentFragment型別

DocumentFragment型別 除開昨天我們瞭解的兩種不常用的型別之外 今天我們要介紹的兩種型別可以說使用頻率不輸於前面最常用的幾種元素型別   首先就是DocumentFragment型別 有些小夥伴可能沒有聽說過這個型別，但是這個型別在前端效能優化方面有著舉足輕重的作用 應該是

《JavaScript高階程式設計》——DOM

對程式碼的理解全部寫在了註釋中 8.js /* * BOM - * - 框架（每個框架包含自己的window物件） * - window物件（主要） ：視窗資訊 * - location物件 ：文件資訊 * - navigator物件 ：瀏覽器資

Web前端攻城獅培養計劃之前端小白入門：網頁布局基礎與常見網頁特效

圖像 空間 實戰 ref 學會 結構 position 運算操作 常見 步驟1: HTML基礎超文本標記語言（英文縮寫：HTML）是為“網頁創建和其它可在網頁瀏覽器中看到的信息”設計的一種標記語言,為搭建網頁結構做出第一步。本階段主要介紹了HTML的語法基礎、表格、表單、等

小白學ES 01-Elasticsearch的基礎概念

目錄 1 Elasticsearch概述 1.1 Elasticsearch是什麼 1.2 Elasticsearch的優點 1.3 Elasticsearch的相關產品 1.4 Elasticsearch的使用場景 2 Elasticsearch的功

javascript高階程式設計之---繼承

物件的繼承  1.繼承的思想：關鍵是將一個建構函式A的原型指向給另一個建構函式B的例項本身，那麼A例項將擁有（繼承）B例項的所有的屬性和方法（繼承在原型）；   2.原理：將一個建構函式A的原型指向給另一個建構函式B的例項本身，也就意味著A原型將繼承B例項本身擁有的所

javascript高階程式設計之--自執行函式

什麼是自執行函式？ 顧名思義.就是不用呼叫，自己自動就會執行的函式； 為什麼要用自執行函式？ 自執行函式內部是一個獨立的作用域，這樣就保持了一個相對獨立的名稱空間，避免汙染全域性作用域 怎麼建立自執行函式？ 寫法一:(function(param){…})(re—param)

javascript高階程式設計--單體內建物件

global:單體內建物件； encodeURL(url):對url進行編碼，事實上只會對url中的空格進行編碼(%20),其他的都不會變，與之對應的是decodeURL(),換句話說只能反解析%20； encodeURLComponent(url):也是對url進行編碼，與encod

JavaScript高階程式設計之客戶端檢測

瀏覽器檢測，是個很讓人頭痛但又必須要考慮的一個問題。畢竟市面上的瀏覽器廠商眾多，雖然有些標準化的東西約束著他們，但是有些東西，他們還是各自按自己的意願來。這其中以IE瀏覽器最為突出，它幾乎可以被稱之為萬惡之源。 瀏覽器檢測的方法有很多，這裡介紹的可能並不是全部，但基本上都是比較常用的方法。下邊我就來詳細介紹

JavaScript高階程式設計之事件

當用戶按下某個按鈕是，就會觸發對應事件，事件在執行註冊事件時，繫結的程式，實現一次成功的瀏覽器與JS之間的互動。其中事件基於設計模式中的觀察者模式原理實現，但又有些不同，事件它還擁有著一些屬於自己的特點。 事件流 　　事件冒泡是IE的產物，它的流向，是自下向上，從繫結事件的具體元素開始，一直流到具體元素的

小白讀《HTML５權威指南》第二部分，HTML元素

地址：http://note.youdao.com/noteshare?id=ca45c17e98435e0a6095f05bd7e7f565 下面是直接複製貼上過來的，沒有圖片和亂版了。 HTML5元素背景基本知識 1.語義與呈現分離 ①HTML5中的一大主要變化是基本信念方面的：

《JavaScript高階程式設計》筆記第一部分（ECMA5）

JavaScript分三部分： ECMAScript BOM DOM 瀏覽器組成： shell 核心 主流瀏覽器： IE trident Chrome webkit/blink firefox Gecko Opera presto Safari we