js高程筆記10-12章

時間 2019-11-17

標籤高程筆記欄目 JavaScript 简体版

原文原文鏈接

第10章 DOMcss

1.文檔節點是每一個文檔的根節點。<html>爲文檔元素，爲文檔最外層元素。HTML元素——元素節點，特性——特性節點，文檔類型——文檔類型節點，註釋——註釋節點html

2.Node類型：全部節點類型都繼承自Node類型，共享基本的屬性和方法。node

　　基本屬性：nodeType，nodeName，nodeValue瀏覽器

　　節點關係：childNodes，parentNode，previousSibling，nextSibling，firstChild，lastChild，hasChildNodes()，ownerDocumentapp

　　操做節點：appendChild()，insertBefore()，replaceChild()，removeChild()，cloneNode(深複製/淺複製)，normalize()dom

3.Document類型：document對象是HTMLDocument(繼承自Document類型)的一個實例，並且仍是window對象的一個屬性。性能

　　子節點：Document節點（文檔節點）的子節點可能有DocumentType、Element、ProcessingInstruction、Comment。orm

　　　　　　document.documentElement，始終指向<html>元素htm

　　　　　　document.body，指向<body>元素對象

　　　　　　document.doctype，取得對<!DOCTYPE>的引用

　　文檔信息：document.title、document.URL、document.referrer、document.domain

　　查找元素：getElementById()、getElementsByTagName()、namedItem()、getElementsByName()、

　　特殊集合：document.anchors、document.forms、document.images、document.links

　　一致性檢測：document.implementation.hasFeature()

　　文檔寫入：write()、writeln()、open()、close()

4.Element類型：表現HTML元素，提供對元素標籤名、子節點、特性的訪問。

　　標籤名：nodeName/tagName

　　html元素：由HTMLElement的子類型來表示，每一個html元素都有的屬性：id、title、lang、dir、className（特性爲class）。

　　　　全部標籤的公認特性都有相應屬性。而且可讀可寫。

　　取得特性：getAttribute()，setAttribute()，removeAttribute()

　　　　自定義特性能夠經過getAttribute()取得，可是不能經過訪問屬性取得。

　　　　兩個特殊特性：style和onclick。它們用getAttribute()和屬性訪問返回的值不一樣。

　　attribute屬性：在DOM層面上針對元素節點裏的特性節點來訪問和操做。

　　　　方法：getNamedItem()，removeNamedItem()，setNamedItem()，item(pos)。這些方法不如getAttribute()等方便。

　　　　可使用這些遍歷元素特性。P267

　　建立元素：document.createElement()。

　　元素子節點：有的瀏覽器使用childNodes屬性會將文本節點註釋節點算進去，因此遍歷的時候要檢測nodeType屬性。

　　　　取得某元素節點的某標籤名的全部後代節點：元素節點.getElementsByTagName()。

5.Text類型：由Text類型表示

　　使用div.firstNode.(nodeValue/data)訪問和修改文本節點內容

　　創造文本節點：document.createTextNode()

　　合併相鄰文本節點：normalize()

　　分割文本節點：splitText()

6.comment類型：表示註釋

　　建立註釋節點：document.createComment()

7.CDATASection類型：針對XML文檔的CDATA區域。

8.DocumentType類型：包含與文檔的doctype有關的全部信息。

9.DocumentFragment類型：做爲倉庫保存未來可能添加到文檔的節點。

　　建立文檔片斷：document.createDocumentFragment()。

　　文檔片斷是將裏面的全部子節點轉移到文檔指定位置上，文檔片斷自己不會成爲文檔樹的一部分。

10.建立動態腳本：指在自己不存在於HTML文檔中，但經過js動態建立<script>標籤加進HTML文檔中。

11.動態樣式：經過js動態建立<link>和<style>標籤加進HTML文檔中

12.操做表格：提供專門的一些方法來建立表格的標籤。P282

13.動態集合：文檔結構發生變化時動態集合都會更新。

　　NodeList：保存節點的集合——使用childNodes返回P249

　　NamedNodeMap：保存特性的集合——使用attribute屬性P266

　 HTMLCollection：保存節點集合——使用getElementsByTagName()返回P257

第11章 DOM拓展

1.選擇符API：(level 1)querySelector()和querySelectorAll()

　　　　　　 (level 2)element.matchesSelector()

2.元素遍歷：previousElementSibling，nextElementSibling，firstElementChild，lastElementChild，childElementCount返回的都是元素節點，避免了文本、註釋等混淆

3.HTML5：

　　類拓展：getElementsByClassName()，classList屬性

　　焦點管理：document.activeElement，document.hasFocus()

　　HTMLDocument拓展：document.readyState屬性，document.compatMode屬性，document.head屬性

　　字符集屬性：document.charset和document.defaultCharset

　　自定義數據屬性：element.dataset屬性，經過屬性訪問自定義特性，自定義特性前要加「data-」。

　　插入標記：innerHTML屬性，outerHTML屬性，insertAdjacentHTML()

　　　　在使用上述屬性和方法前最好先手動解除被替換節點和事件的關係，不然容易形成性能問題。

　　　　不要頻繁使用innerHTML和outerHTML

　　scrollIntoView()調用的時候讓調用元素出如今視口中。

第12章 DOM2和DOM3

1.DOM2級樣式：

　　訪問特性樣式：style對象的屬性對應着style特性中的css屬性（css的float對應着style.cssFloat）

　　　　一些屬性和方法：style.cssText，getPropertyValue()，removePropery()，document.defaultView.getComputedStyle()（只讀）

　　操做樣式表：document.stylesheets返回樣式表集合，cssRules返回規則列表，insertRule()建立規則，deleteRule()刪除規則

　　元素大小：offsetHeight，offsetWidth，offsetLeft，offsetTop

　　　　　　　clientWidth，clientHeight

　　　　　　　scrollHeight，scrollWidth，scrollLeft，scrollTop

2.遍歷：document.createNodeIterator()，document.createTreeWalker()

3.範圍：

　　設置：createRange()，selectNode()，selectNodeContents()，setStart()，setEnd()

　　操做：deleteContents()，extractContents()，cloneContents()

　　在範圍裏插入：。。。

　　摺疊：。。。

　　比較：。。。

　　複製：。。。

　　清理：。。。

相關標籤/搜索

每日一句

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