摘要:一類型在中,所有的節(jié)點(diǎn)類型都繼承自類型。包含文檔中所有帶特性的元素包含文檔中所有的元素包含文檔中所有的元素包含文檔中所有帶特性的元素一致性檢測(cè)因?yàn)榉譃槎鄠€(gè)級(jí)別,也包含多個(gè)部分,因此檢測(cè)瀏覽器實(shí)現(xiàn)了的哪些部分就十分必要。
DOM是針對(duì)HTML和XML文檔的一個(gè)API
DOM描繪了一個(gè)層次化的節(jié)點(diǎn)樹(shù),允許開(kāi)發(fā)人員輕松自如地添加、刪除、替換、修改頁(yè)面的某一部分
DOM將HTML文檔描繪成一個(gè)層次化的節(jié)點(diǎn)樹(shù),HTML文檔中的任何內(nèi)容都可以通過(guò)樹(shù)中的一個(gè)節(jié)點(diǎn)來(lái)表示:
HTML元素表示成元素節(jié)點(diǎn)
HTML屬性表示成屬性節(jié)點(diǎn)
注釋表示成注釋節(jié)點(diǎn)
......
DOM中共有12種節(jié)點(diǎn)類型。
(一) Node類型在javascript中,所有的節(jié)點(diǎn)類型都繼承自Node類型。Node類型定義了節(jié)點(diǎn)類型的一些基本屬性和方法,這些屬性和方法被所有的節(jié)點(diǎn)共享。
1、基本屬性(1)nodeType:表明節(jié)點(diǎn)的類型
元素節(jié)點(diǎn).nodeType = 1
文本節(jié)點(diǎn).nodeType = 3
(2)nodeName:節(jié)點(diǎn)的名稱
元素節(jié)點(diǎn).nodeName = 元素的標(biāo)簽名(大寫(xiě))
(3)nodeValue:節(jié)點(diǎn)的值
元素節(jié)點(diǎn).nodeValue = null
2、節(jié)點(diǎn)關(guān)系文檔中所有的節(jié)點(diǎn)之間存在著各種關(guān)系,節(jié)點(diǎn)間的關(guān)系可以用傳統(tǒng)的家族關(guān)系來(lái)描述。
(1)childNodes屬性
作用:返回節(jié)點(diǎn)的所有子節(jié)點(diǎn),這些子節(jié)點(diǎn)組成NodeList對(duì)象(NodeList對(duì)象并不是Array實(shí)例)
語(yǔ)法:someNode.childNode
訪問(wèn)保存在NodeList對(duì)象中的子節(jié)點(diǎn)
someNode.childNodes[0];
someNode.childNodes.item(0)
(2)parentNode屬性
作用:指向文檔樹(shù)中的父節(jié)點(diǎn)
包含在childNodes列表中的所有節(jié)點(diǎn)都有相同的父節(jié)點(diǎn)
(3)firstChild、lastChild屬性
分別指向childNodes列表中的第一個(gè)和最后一個(gè)節(jié)點(diǎn)
(4)previousSibling、nextSibling屬性
(5)ownerDocument屬性
該屬性指向整個(gè)文檔的文檔節(jié)點(diǎn)
(6)hasChildNodes()方法
當(dāng)節(jié)點(diǎn)包含一個(gè)或多個(gè)子節(jié)點(diǎn)時(shí)返回true
3、操作節(jié)點(diǎn)DOM提供了一些操作節(jié)點(diǎn)的方法:
(1)添加節(jié)點(diǎn)
appendChild():向NodeList列表的末尾添加一個(gè)節(jié)點(diǎn),并返回新增的節(jié)點(diǎn)
insertBefore(newNode,參照節(jié)點(diǎn)):向參照節(jié)點(diǎn)的前面插入newNode,并返回新節(jié)點(diǎn)
(2)替換節(jié)點(diǎn)
replaceChild(新節(jié)點(diǎn),要替換的節(jié)點(diǎn)):要替換的節(jié)點(diǎn)被新節(jié)點(diǎn)替換,并被方法返回
(3)刪除節(jié)點(diǎn)
removeChild(要?jiǎng)h除的節(jié)點(diǎn)):刪除要?jiǎng)h除的節(jié)點(diǎn),并返回要?jiǎng)h除的節(jié)點(diǎn)
注意:上述四個(gè)方法操作的是某個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn),即這四個(gè)方法均需要先取得父節(jié)點(diǎn)(parentNode)
4、其他方法(1)cloneNode(true/false)
作用:復(fù)制調(diào)用該方法的節(jié)點(diǎn)
參數(shù)為true時(shí):執(zhí)行深復(fù)制,即復(fù)制節(jié)點(diǎn)及其整個(gè)子節(jié)點(diǎn)樹(shù)
參數(shù)為false時(shí):執(zhí)行淺復(fù)制,即只復(fù)制該節(jié)點(diǎn)本身
復(fù)制后的節(jié)點(diǎn)及其子節(jié)點(diǎn)屬于文檔,但是它沒(méi)用父節(jié)點(diǎn)
(2)normalize()
作用:處理文檔樹(shù)中的文本節(jié)點(diǎn),該方法會(huì)刪除空文本節(jié)點(diǎn)/或者將相鄰的文本節(jié)點(diǎn)合并為一個(gè)文本節(jié)點(diǎn)
(二) Document類型Document類型可以表示HTML頁(yè)面或者其他基于XML的文檔,其中最常見(jiàn)的是作為HTMLDocument 實(shí)例的document對(duì)象,該對(duì)象表示整個(gè)HTML頁(yè)面。Document節(jié)點(diǎn)具有下列特征:
nodeType = 9
nodeName = "#document"
nodeValue = null
parentNode = null
ownerDocument = null
1.文檔的子節(jié)點(diǎn)DOM規(guī)定Document節(jié)點(diǎn)的子節(jié)點(diǎn)可以是以下幾種:
(1)DocumentType
通常標(biāo)簽看成一個(gè)與文檔其他部分不同的實(shí)體,可以通過(guò)doctype屬性訪問(wèn)該標(biāo)簽
語(yǔ)法:var doctype = document.doctype
因?yàn)椴煌臑g覽器對(duì)該屬性的支持差別很大,所以該屬性的用處不大
(2)Element
有兩個(gè)內(nèi)置屬性可以快速地訪問(wèn)Document節(jié)點(diǎn)的子節(jié)點(diǎn):
documentElement:訪問(wèn)文檔的元素 //var html = document.documentElement
body:訪問(wèn)
元素 //var body = document.body(3)Comment
按照定義,出現(xiàn)在元素外部的注釋?xiě)?yīng)該算是文檔的子節(jié)點(diǎn),然而不同的瀏覽器對(duì)這些外部注釋的解析不同,故通常不在元素外部使用注釋。
(4)ProcessingInstruction
2、文檔信息document對(duì)象作為HTMLDocument的一個(gè)實(shí)例,還有幾個(gè)標(biāo)準(zhǔn)Document對(duì)象沒(méi)有的屬性:
title:獲取
URL:返回地址欄中的URL
domain:頁(yè)面的域名
referrer:返回鏈接到當(dāng)前頁(yè)面的URL
3、查找元素(1)getElementById()
(2)getElementsByTagName()
該方法返回一個(gè)HTMLCollection對(duì)象,作為一個(gè)“動(dòng)態(tài)”集合,該對(duì)象與NodeList很相似
訪問(wèn)HTMLCollection對(duì)象中元素的方法:
(假設(shè), var images=document.getElementsByTagName("img");)
images[0]
images.item(0)
images.namedItem("myImage")=images["myImage"] //獲取的圖片
(3)getElementsByName()
4、特殊集合為了方便訪問(wèn)文檔的常用部分,document對(duì)象還提供了一些特殊的集合,這些集合都是HTMLCollection對(duì)象。
document.anchors:包含文檔中所有帶name特性的元素
document.forms:包含文檔中所有的
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/85093.html
摘要:由于計(jì)算機(jī)的國(guó)際化,組織的標(biāo)準(zhǔn)牽涉到很多其他國(guó)家,因此組織決定改名表明其國(guó)際性。規(guī)范由萬(wàn)維網(wǎng)聯(lián)盟制定。級(jí)標(biāo)準(zhǔn)級(jí)標(biāo)準(zhǔn)是不存在的,級(jí)一般指的是最初支持的。 這篇筆記的內(nèi)容對(duì)應(yīng)的是《JavaScript高級(jí)程序設(shè)計(jì)(第三版)》中的第一章。 1.ECMA 和 ECMA-262 ECMA 是歐洲計(jì)算機(jī)制造商協(xié)會(huì)的縮寫(xiě),全程是 European Computer Manufacturers Ass...
摘要:實(shí)現(xiàn)一個(gè)完整的實(shí)現(xiàn)應(yīng)該由下列三個(gè)不同的部分組成核心文檔對(duì)象模型瀏覽器對(duì)象模型文檔對(duì)象模型是針對(duì)但經(jīng)過(guò)擴(kuò)展用于的應(yīng)用程序編程接口。級(jí)別級(jí)由兩個(gè)模塊組成核心和。其中,核心規(guī)定是如何映射基于的文檔結(jié)構(gòu),以便簡(jiǎn)化對(duì)文檔中任意部分的訪問(wèn)和操作。 javascript從一個(gè)簡(jiǎn)單的輸入驗(yàn)證器發(fā)展成為一門(mén)強(qiáng)大的編程語(yǔ)言,完全出乎人們的意料。 javascript實(shí)現(xiàn)一個(gè)完整的javascript實(shí)現(xiàn)應(yīng)...
摘要:在上百種語(yǔ)言中算是命好的一個(gè),還有就是最近納入高考體系的。由以下三個(gè)部分構(gòu)成。就是對(duì)實(shí)現(xiàn)該標(biāo)準(zhǔn)規(guī)定的各個(gè)方面內(nèi)容的語(yǔ)言的描述。是針對(duì)但經(jīng)過(guò)擴(kuò)展的用于的應(yīng)用程序編程接口。將頁(yè)面映射為由節(jié)點(diǎn)構(gòu)成的樹(shù)狀結(jié)構(gòu)。 JavaScript的歷史這里就不再贅述了,當(dāng)然JavaScript的歷史還是比較有意思的。在上百種語(yǔ)言中JavaScript算是‘命’好的一個(gè),還有就是最近納入高考體系的python...
摘要:可以使用偵聽(tīng)器或處理程序來(lái)預(yù)訂事件,以便事件發(fā)生時(shí)執(zhí)行相應(yīng)的代碼。響應(yīng)某個(gè)事件的函數(shù)稱為事件處理程序或事件偵聽(tīng)器。可以刪除通過(guò)級(jí)方法指定的事件處理程序。 JavaScript和HTML之間的交互是通過(guò)事件實(shí)現(xiàn)的。 事件:文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互瞬間。 可以使用偵聽(tīng)器(或處理程序來(lái)預(yù)訂事件),以便事件發(fā)生時(shí)執(zhí)行相應(yīng)的代碼。 1. 事件流 事件流:從頁(yè)面中接收事件的順序。 ...
摘要:取得所有類中包含和的元素。類名的先后順序無(wú)所謂取得為的元素中帶有類名的所有元素焦點(diǎn)管理也添加了輔助管理焦點(diǎn)的功能。首先就是屬性,這個(gè)屬性始終會(huì)引用中當(dāng)前獲得了焦點(diǎn)的元素。另外就是新增了方法,這個(gè)方法用于確定文檔是否獲得了焦點(diǎn)。 選擇符API querySelector()方法 // 取得body元素 var tbody = document.querySelector(body); ...
閱讀 2668·2021-09-09 09:33
閱讀 2821·2019-08-30 15:54
閱讀 2880·2019-08-30 14:21
閱讀 2367·2019-08-29 17:15
閱讀 3591·2019-08-29 16:13
閱讀 2770·2019-08-29 14:21
閱讀 3436·2019-08-26 13:25
閱讀 2039·2019-08-26 12:14