国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

DOM(一)

imccl / 1240人閱讀

摘要：在瀏覽器中，對象是繼承自類型的一個實例，表示整個頁面。級只為規定了一個方法，即。，元素在文檔中的唯一標識符。，有關元素的附加說明信息，一般通過工具提示條顯示出來。第一類特性就是，用于通過為元素指定樣式。

DOM（文檔對象模型）是針對HTML 和XML 文檔的一個API（應用程序編程接口）。DOM描,繪了一個層次化的節點樹，允許開發人員添加、移除和修改頁面的某一部分

節點層次

DOM 可以將任何HTML 或XML 文檔描繪成一個由多層節點構成的結構。節點分為幾種不同的類
型，每種類型分別表示文檔中不同的信息及（或）標記。每個節點都擁有各自的特點、數據和方法，另
外也與其他節點存在某種關系

節點的公共屬和方法 childNodes

獲取子節點

var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;
parentNode

獲取父節點

firstNode

獲取第一個子節點

lastNode

獲取最后一個子節點

nextSibling

獲取下一個兄弟節點

previousSibling

獲取上一個兄弟節點

ownerDocument

獲取文檔節點

hasChildNodes()

判斷是否有子節點

appendChild()

添加子節點,接收一個參數表示要添加的節點,返回添加的節點.

var returnedNode = someNode.appendChild(newNode);
alert(returnedNode == newNode); //true
alert(someNode.lastChild == newNode); //true
insertBefore()

在參考節點前添加子節點,接收兩個參數,第一個參數表示要添加的節點,第二個參數表示參考節點,返回添加的節點.

//插入后成為第一個子節點
var returnedNode = someNode.insertBefore(newNode, someNode.firstChild);
alert(returnedNode == newNode); //true
replaceChild()

替換子節點,接收兩個參數,第一個參數表示要添加的節點,第二個參數表示被替換的節點,返回被替換的節點.

//替換第一個子節點
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);
removeChild()

移除子節點,這個方法接受一個參數，即要移除的節點。被移除的節點將成為方法的返回值

//移除第一個子節點
var formerFirstChild = someNode.removeChild(someNode.firstChild);
cloneNode()

克隆節點,接收一個boolean類型的參數,當參數為true時執行深復制,意即復制內容包含其子節點.

    

  • item 1
    • 

  • item 2
    • 

  • item 3
    • 

var deepList = myList.cloneNode(true);
alert(deepList.childNodes.length); //3（IE < 9）或7（其他瀏覽器）
var shallowList = myList.cloneNode(false);
alert(shallowList.childNodes.length); //0

deepList.childNodes.length 中的差異主要是因為IE8 及更早版本與其他瀏覽器處理空白字符的方式不一樣。IE9 之前的版本不會為空白符創建節點。
cloneNode()方法不會復制添加到DOM 節點中的JavaScript 屬性，例如事件處
理程序等。這個方法只復制特性、（在明確指定的情況下也復制）子節點，其他一切
都不會復制。IE 在此存在一個bug，即它會復制事件處理程序，所以我們建議在復制
之前最好先移除事件處理程序。

Doucment類型

JavaScript 通過Document 類型表示文檔。在瀏覽器中，document 對象是HTMLDocument（繼承
自Document 類型）的一個實例，表示整個HTML 頁面。而且，document 對象是window 對象的一個
屬性，因此可以將其作為全局對象來訪問

document對象的屬性和方法 documentElement

獲取html節點元素

var html = document.documentElement; //取得對的引用
alert(html === document.childNodes[0]); //true
alert(html === document.firstChild); //true
body

獲取body節點元素

title

獲取title文字節點元素

//取得文檔標題
var originalTitle = document.title;
//設置文檔標題
document.title = "New page title";
URL

取得完整的URL

domain

取得域名

referrer

取得來源頁面的URL

//取得完整的URL
var url = document.URL;
//取得域名
var domain = document.domain;
//取得來源頁面的URL
var referrer = document.referrer;
getElementById()

通過id屬性獲取元素

getElementsByTagName()

通過元素名獲取元素

var div = document.getElementById("myDiv"); //取得id="myDiv"元素的引用
var images = document.getElementsByTagName("img"); //取得img元素的引用
var allElements = document.getElementsByTagName("*"); //獲取文檔中所有的元素
IE7及較低版本還為此方法添加了一個有意思的“怪癖”：name特性與給定ID匹配的表單元素也會被該方法返回
document.anchors

包含文檔中所有帶name 特性的元素

document.forms

包含文檔中所有的

元素，與document.getElementsByTagName("form")得到的結果相同

document.images

包含文檔中所有的元素，與document.getElementsByTagName("img")得到的結果相同；

document.links

包含文檔中所有帶href 特性的元素。

DOM一致性檢測

由于 DOM 分為多個級別，也包含多個部分，因此檢測瀏覽器實現了DOM的哪些部分就十分必要
了。document.implementation 屬性就是為此提供相應信息和功能的對象，與瀏覽器對DOM的實現
直接對應。DOM1 級只為document.implementation 規定了一個方法，即hasFeature()。這個方
法接受兩個參數：要檢測的DOM功能的名稱及版本號。如果瀏覽器支持給定名稱和版本的功能，則該
方法返回true

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

以下為列出了可以檢測的不同的值及版本號

Core 1.0、2.0、3.0 基本的DOM，用于描述表現文檔的節點樹

XML 1.0、2.0、3.0 Core的XML擴展，添加了對CDATA、處理指令及實體的支持

HTML 1.0、2.0 XML的HTML擴展，添加了對HTML特有元素及實體的支持

Views 2.0 基于某些樣式完成文檔的格式化

StyleSheets 2.0 將樣式表關聯到文檔

CSS 2.0 對層疊樣式表1級的支持

CSS2 2.0 對層疊樣式表2級的支持

Events 2.0，3.0 常規的DOM事件

UIEvents 2.0，3.0 用戶界面事件

MouseEvents 2.0，3.0 由鼠標引發的事件（click、mouseover等）

MutationEvents 2.0，3.0 DOM樹變化時引發的事件

HTMLEvents 2.0 HTML4.01事件

Range 2.0 用于操作DOM樹中某個范圍的對象和方法

Traversal 2.0 遍歷DOM樹的方法

LS 3.0 文件與DOM樹之間的同步加載和保存

LS-Async 3.0 文件與DOM樹之間的異步加載和保存

Validation 3.0 在確保有效的前提下修改DOM樹的方法

Element類型 HTML元素

所有 HTML 元素都由HTMLElement 類型表示，不是直接通過這個類型，也是通過它的子類型來表
示。HTMLElement 類型直接繼承自Element 并添加了一些屬性。添加的這些屬性分別對應于每個HTML
元素中都存在的下列標準特性。

id，元素在文檔中的唯一標識符。

title，有關元素的附加說明信息，一般通過工具提示條顯示出來。

lang，元素內容的語言代碼，很少使用。

dir，語言的方向，值為"ltr"（left-to-right，從左至右）或"rtl"（right-to-left，從右至左），也很少使用。

className，與元素的class 特性對應，即為元素指定的CSS類。沒有將這個屬性命名為class，是因為class 是ECMAScript 的保留字

var div = document.getElementById("myDiv");
alert(div.id); //"myDiv""
alert(div.className); //"bd"
alert(div.title); //"Body text"
alert(div.lang); //"en"
alert(div.dir); //"ltr"

div.id = "someOtherId";
div.className = "ft";
div.title = "Some other text";
div.lang = "fr";
div.dir ="rtl";
特性操作

有三個方法可以操作元素的特性,getAttribute() setAttribute() removeAttribute()

var div = document.getElementById("myDiv");
alert(div.getAttribute("id")); //"myDiv"
alert(div.getAttribute("class")); //"bd"

div.setAttribute("id", "someOtherId");
div.setAttribute("class", "ft");
div.setAttribute("title", "Some other text");

div.removeAttribute("class");

有兩類特殊的特性，它們雖然有對應的屬性名，但屬性的值與通過getAttribute()返回的值并不
相同。第一類特性就是style，用于通過CSS 為元素指定樣式。在通過getAttribute()訪問時，返
回的style 特性值中包含的是CSS 文本，而通過屬性來訪問它則會返回一個對象。
第二類與眾不同的特性是onclick 這樣的事件處理程序。當在元素上使用時，onclick 特性中包
含的是JavaScript 代碼，如果通過getAttribute()訪問，則會返回相應代碼的字符串.
IE6 及以前版本不支持removeAttribute()。

attributes 屬性

Element類型是使用attributes屬性的唯一一個DOM節點類型,attributes屬性是NamedNodeMap類型的對象,它有以下幾個方法

getNamedItem(name)：返回nodeName 屬性等于name 的節點；

removeNamedItem(name)：從列表中移除nodeName 屬性等于name 的節點；

setNamedItem(node)：向列表中添加節點，以節點的nodeName 屬性為索引；

item(pos)：返回位于數字pos 位置處的節點。

var id = element.attributes.getNamedItem("id").nodeValue;
var id = element.attributes["id"].nodeValue;
element.attributes["id"].nodeValue = "someOtherId";

由于attributes的方法不夠方便，因此開發人員更多的會使用getAttribute()、removeAttribute()和setAttribute()方法。

創建元素

使用 document.createElement()方法可以創建新元素。這個方法只接受一個參數，即要創建元素的標簽名。

var div = document.createElement("div");
div.id = "myDiv";
div.className = "box";

document.appendChild(div);

在 IE 中可以以另一種方式使用createElement()，即為這個方法傳入完整的元素標簽，也可以包含屬性，如下面的例子所示。

var div = document.createElement("
");

這種方式有助于避開在IE7 及更早版本中動態創建元素的某些問題。下面是已知的一些這類問題。

不能設置動態創建的"); //創建input 元素 var input = document.createElement(""); //創建button 元素 var button = document.createElement(""); //創建單選按鈕 var radio1 = document.createElement(""); var radio2 = document.createElement(""); } Text類型

文本節點由 Text 類型表示，包含的是可以照字面解釋的純文本內容。純文本中可以包含轉義后的HTML 字符，但不能包含HTML代碼。

使用下列方法可以操作節點中的文本

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 為止處的字符串

創建文本節點

通過createTextNode()可以創建文本節點.

var textNode = document.createTextNode("Hello world!");

下面展示如何將一個文本節點添加到文檔中

var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
document.body.appendChild(element);
合并文本節點

一個元素可能會存在多個文本節點,但是文本節點之間也沒有空格,因此無法區分哪個節點對應的是哪個文本,通過下面的方法可以將element元素的文本節點合并.

element.normalize();

當然也可以分割文本節點,使用splitText(index),index表示字符索引.

var newNode = element.firstChild.splitText(5);從位置5 開始。位置5是"Hello"和"world!"之間的空格
alert(element.firstChild.nodeValue); //"Hello"
alert(newNode.nodeValue); //" world!"
alert(element.childNodes.length); //2

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/86136.html

相關文章

  • 虛擬Dom詳解 - (一)

    摘要：為此也做了一些學習簡單的侃一侃虛擬到底是什么虛擬詳解二什么是虛擬虛擬首次產生是框架最先提出和使用的，其卓越的性能很快得到廣大開發者的認可，繼之后也在其核心引入了虛擬的概念。所謂的虛擬到底是什么也就是通過語言來描述一段代碼。 隨著Vue和React的風聲水起，伴隨著諸多框架的成長，虛擬DOM漸漸成了我們經常議論和討論的話題。什么是虛擬DOM，虛擬DOM是如何渲染的，那么Vue的虛擬Dom...

    ashe 評論0 收藏0

  • 虛擬DOM

    摘要：什么是虛擬舉例說明如果網頁中有一個表格，表頭是姓名，年級，分數。即我們用虛擬的結構替換需要處理的結構，對虛擬的進行操作之后再進行渲染，就成為了真實的數據。當狀態變更的時候用修改后的新渲染的的對象和舊的虛擬對象作對比，記錄著兩棵樹的差異。 虛擬DOM 可以看看這個文章如何理解虛擬DOM？ - 戴嘉華的回答 - 知乎 https://www.zhihu.com/questio... 深度剖...

    yanwei 評論0 收藏0

  • 虛擬DOM

    摘要：什么是虛擬舉例說明如果網頁中有一個表格，表頭是姓名，年級，分數。即我們用虛擬的結構替換需要處理的結構，對虛擬的進行操作之后再進行渲染，就成為了真實的數據。當狀態變更的時候用修改后的新渲染的的對象和舊的虛擬對象作對比，記錄著兩棵樹的差異。 虛擬DOM 可以看看這個文章如何理解虛擬DOM？ - 戴嘉華的回答 - 知乎 https://www.zhihu.com/questio... 深度剖...

    alin 評論0 收藏0

  • 你不知道的Virtual DOM（一）：Virtual Dom介紹

    摘要：不同的框架對這三個屬性的命名會有點差別，但表達的意思是一致的。它們分別是標簽名屬性和子元素對象。我們先來看下頁面的更新一般會經過幾個階段。元素有可能是數組的形式，需要將數組解構一層。 歡迎關注我的公眾號睿Talk，獲取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言 目前最流行的兩大前端框架，React和Vue，都不約...

    lavor 評論0 收藏0

  • DOM 事件深入淺出（一）

    摘要：本文就將帶大家深入淺出地了解事件的那些屬性和方法。針對不同級別的，我們的事件處理方式也是不一樣的。當然其優點是不需要操作來完成事件的綁定。文章地址事件深入淺出二。 在項目開發時，我們時常需要考慮用戶在使用產品時產生的各種各樣的交互事件，比如鼠標點擊事件、敲擊鍵盤事件等。這樣的事件行為都是前端DOM事件的組成部分，不同的DOM事件會有不同的觸發條件和觸發效果。本文就將帶大家深入淺出地了解...

    macg0406 評論0 收藏0

  • JavaScript 簡介

    摘要：簡介原文鏈接簡稱是一種輕量級，解釋型的編程語言，其函數是一等公民。標準的目標是讓任何一種程序設計語言能操控使用任何一種標記語言編寫出的任何一份文檔。核心規定了如何映射基于的文檔結構，以便簡化對文檔的任意部分的訪問和操作。 JavaScript 簡介 原文鏈接 JavaScript ( 簡稱：JS ) 是一種 輕量級，解釋型 的編程語言，其函數是一等公民。眾所周知，它是用于網頁開發的腳...

    URLOS 評論0 收藏0

發表評論

0條評論

imccl

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<