JavaScript 學習筆記8

時間 2019-11-17

標籤 javascript 學習筆記欄目 JavaScript 简体版

原文原文鏈接

第十章 DOMcss

1.節點層次html

每一個節點有各自的特色，數據和方法，節點之間的關係構成了層次node

文檔節點是每一個文檔的根節點，HTML中文檔元素是最外層元素，文檔節點的惟一子節點數組

a.節點類型瀏覽器

每一個節點都有一個nodeType屬性，用於代表節點類型——IE無效app

對於元素節點，nodeName保存的始終是元素的標籤名，nodeValue值始終爲nulldom

每一個節點都有一個childNodes屬性，保存着一個NodeList對象，NodeList是一種類數組對象，用於保存一組有序的節點函數

var firstChild=someNode.childNodes[0];//訪問一個節點url

var secondChild=someNode.childNodes.item(1); //訪問第二個節點spa

每一個節點都有一個parentNode屬性，指向文檔樹中的父節點。nodeList中的節點互爲同胞節點，每一個節點的previousSibling和nextSibling可訪問同一列表的其餘節點

父節點的firstChild和lastChild分別指向孩子列表的第一和最後一個節點

節點的ownerDocument屬性指向整個文檔的文檔節點

操做節點：appendChild（newNode）；——在childNodes列表末尾新增節點並返回該節點

insertBefore（要插入的節點，參考節點）——把節點放到參考節點以前並返回被插入的節點

replaceChild（要插入的節點，要替換的節點）——返回要替換的節點並刪除，插入新節點

removeChild（要移除的節點）

cloneNode（true）//深複製，複製節點和整個子節點樹

cloneNode（false）；//淺複製，複製後的節點屬文檔全部，是孤兒節點

normalize（）//處理文本節點，刪除空文本節點、合併相鄰文本節點

b.Document類型

表示文檔，document對象是window對象的屬性，可將其做爲全局對象來訪問。特徵：

nodeType=9

nodeName=「#document」

nodeValue=null

parentNode=null

ownerDocument=null

子節點但是是DocumnetType（最多一個），Element（最多一個），ProcessingInstruction或Comment

訪問子節點的快捷方式：1）document.documentElement//始終指向HTML頁面的<html>元素

2）經過childNodes列表訪問文檔元素

var body=document.body; //取得對<body>的引用

文檔信息：document.title——取得當前頁面的標題

document.URL——包含頁面完整的url

document.domain——只包含頁面的域名，可修改值，但不能夠是任何值；域名一開始是鬆散的不能設置爲緊繃的

document.referer——保存着連接到當前頁面的那個頁面的url

查找元素：取得元素的操做——getElementById（要取得元素的ID）

getElemnetByTagname(要取得元素的標籤名)，返回NodeList列表，傳入參數「*」會取得文檔中的全部元素

getElementByName（）——只有HTMLDocument具備，返回帶有給定name特性的全部元素

一致性檢測：document.implementation——爲檢測瀏覽器實現了DOM的哪些部分提供相應信息和功能的對象

document.implementation.hasFeature（DOM名稱和版本號）——支持則返回true

文檔寫入： write（寫入到輸出流的文本）——原樣寫入

writeln（寫入到輸出流的文本）——末尾添一個換行符

open（），close（）——打開和關閉網頁的輸出流

c.Element類型

取得特性：getAttribute（「特性名」）

setAttribute（特性名，值），removeAttribute（）

attributes屬性：該屬性包含一個NameNodeMap，是一個動態的集合，元素的每個特性都由一個Attr節點表示，每一個節點都包含在NameNodeMap對象中，該對象擁有如下方法：

getNamedItem（name）......

經過該屬性可遍歷元素的特性

建立元素：document.createElement（標籤名）

取得後代節點：getElementById（），getElemnetByTagname（）

d.text類型

可經過nodeValue屬性或者data屬性訪問Text節點中包含的文本

appendData（text）：將text添加到節點的末尾

deleteData（offset，count）

insertData（offset，text）

replaceData（offset，count，text）

spliteText（offset）：分割成兩個文本節點，原節點是指定位置前內容，新節點是以後的內容，返回新節點

substringData（offset，count）：提取字符串

每一個能夠包含內容的元素最多隻能有一個文本節點

建立文本節點：document.createTextNode（要插入節點的文本）

規範化文本節點：在文本節點的父元素上調用normalize（）

e.comment類型

註釋，沒有子節點

和text相似，擁有除spliteText（）以外的全部字符串操做方法

建立——document.createComment()

f.documentType類型、

包含着與文檔的doctype有關的信息

3個屬性：name（表示文檔類型的名稱），entities，notations

第12章 DOM2和DOM3

12.1DOM的變化

(一）針對XML命名空間的變化

a.Node類型的變化

DOM2增添屬性：localName——不帶命名空間前綴的節點名稱

namespaceURI——命名空間URI或者null

prefix——命名空間前綴或null

相關方法：isDefaultNamespace（namespaceURL）——返回布爾值

lookupNamespaceURL（prefix）

lookupPrefix（NamespaceURL）

b。document的變化

c。element的變化

（二）其餘方面的變化

a.DocumentType類型的變化

DOM2新增了3個屬性：publicId和systemId——表示文檔類型聲明中的兩個信息段

internalSubset——用於訪問包含在文檔類型聲明中的額外定義

b.document的變化

importNode（）——從文檔中取得一個節點並將其導入另外一個文檔

eg：var newNode=document.importNode（oldNode,true）//導入節點和其子節點，返回原來節點的副本

defaultView：保存着一個指向擁有給定文檔窗口的指針

爲document.implementation對象增添的方法：

建立一個新的documentType節點——document.implementaion.createDocumentType（文檔類型名稱，publicId，systemId）

建立新文檔——document.implementation.createDocument(針對文檔中元素的namespaceURL，文檔元素的標籤名，新文檔的文檔類型)

建立一個完整的html文檔——document.implementation.createHTMLDocument(新建立文檔的標題)

c.node類型的變化

isSupported（特性名，特性版本號）——用於肯定當前節點具備什麼能力，返回布爾值

DOM3:issameNode(),isEqualNode（），比較相同和相等，返回布爾值

setUserData（要設置的鍵，實際的數據，處理函數）——講數理指定給節點

getUserData（）

12.2樣式

a.訪問元素的樣式

在style特性中制定的任何css屬性都將表現爲這個css對象的相應屬性

DOM2新增：cssText，getPropertyCSSValue（propertyName）。。。。。。

計算的樣式：document.defaultView.getComputedStyle（要取得樣式的元素，爲元素字符串或null），

返回包含當前元素全部計算樣式的對象

IE不支持這個方法，用currentStyle屬性代替

b.操做樣式表

CSSStyleSheet類型表示的是樣式表

應用於文檔的全部樣式表都是經過document.styleSheets集合來表示的

document.styleSheets[i]

或者element.sheet||element.styleSheet（IE）取得樣式表對象

CSS規則：CSSRule對象表示樣式表中的每一條規則

CSSStyleRule對象的屬性：cssText，selectorStyleSheet（返回當前規則的選擇符文本），

style（設置和取得當前規則的特定的樣式值）

建立規則：insertRule（規則文本，索引位置）

IE8及以前版本addRule（選擇符文本，樣式信息，插入位置）

刪除規則：deleteRule（要刪除規則的位置）

removeRule（）//IE

c.元素大小

偏移量：offsetHeight，offsetWidth，offsetLeft，offsetTop

包含元素的引用保存在offsetParent屬性中

客戶區大小：clientHeight，clientWidth

滾動大小：scrollHeight，scrollWidth（用於肯定元素的實際大小）

scrollLeft，scrollTop（隱藏區域大小）

12.3遍歷

a.NodeIterator類型

建立：document.createNodeIterator(root,whattoshow,fliter,布爾值一般爲FALSE)

fliter參數用來指定NodeFliter對象，每一個對象只有一個方法，acceptNode（）

eg：var fliter={

acceptNode:function（node）{

return node.tagName.toLowerCase（）==「P」？NodeFliter.FLITER_ACCEPT:NodeFliter.FLITER_SKIP;

}

}；

previousNode（），nextNode（）

b.TreeWalker

除了previousNode（），nextNode（）以外，

parentNode（），firstChild（），lastChild（），nextSibling(），previousSibling（）

建立：doucnment.createTreeWalker（參數同NodeIterator）

在fliter參數中，NodeFliter.FILTER_REJECT跳過相應街道和節點子樹

curentNode屬性：表示任何遍歷方法在上一次遍歷中返回的的節點

12.4範圍

建立DOM範圍：document.createRange（）

每一個範圍由一個Range類型的實例表示，屬性以下

startContainer：包含範圍起點的節點

startOffset，endContainer，endOffset，

簡單選擇，使用該節點的信息來填充範圍：selectNode（DOM節點）——選擇整個節點

selectNodeContents（）——只選擇節點的子節點

複雜選擇：setStart（參照節點，偏移量值）

setEnd（參照節點，偏移量值）

操做DOM範圍的內容：deleteContents（）

extractContents（）：也是移除範圍選區，返回範圍的文檔片斷，可將範圍的內容插入其餘地方

cloneContents（）——建立範圍對象的一個副本

插入DOM範圍的內容：insertNode（）——向範圍選區的開始出插入一個節點

surroundContents（節點）—插入環繞範圍內容的節點

摺疊DOM範圍：摺疊範圍，指範圍中未選擇文檔的任何部分

collapse（布爾值，true表示起點）

比較範圍：compareBoundaryPoints（比較方式的常量值，要比較的範圍）——肯定範圍是否有公共的邊界

複製範圍：cloneRange（）

清理範圍：detach（）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。