javaScript 高級程序設計筆記——DOM

時間 2019-11-09

標籤 javascript 高級程序設計筆記 dom 欄目 JavaScript 简体版

原文原文鏈接

DOM是針對HTML和XML文檔的一個API
DOM描繪了一個層次化的節點樹，容許開發人員輕鬆自如地添加、刪除、替換、修改頁面的某一部分javascript

1、節點層次

DOM將HTML文檔描繪成一個層次化的節點樹，HTML文檔中的任何內容均可以經過樹中的一個節點來表示：html

HTML元素表示成元素節點
HTML屬性表示成屬性節點
註釋表示成註釋節點
......

DOM中共有12種節點類型。java

（一） Node類型

在javascript中，全部的節點類型都繼承自Node類型。Node類型定義了節點類型的一些基本屬性和方法，這些屬性和方法被全部的節點共享。node

一、基本屬性

（1）nodeType：代表節點的類型瀏覽器

元素節點.nodeType = 1
文本節點.nodeType = 3

（2）nodeName：節點的名稱app

元素節點.nodeName = 元素的標籤名（大寫）

（3）nodeValue：節點的值dom

元素節點.nodeValue = null

二、節點關係

文檔中全部的節點之間存在着各類關係，節點間的關係能夠用傳統的家族關係來描述。
（1）childNodes屬性orm

做用：返回節點的全部子節點，這些子節點組成NodeList對象（NodeList對象並非Array實例）
語法：someNode.childNode
訪問保存在NodeList對象中的子節點htm
- someNode.childNodes[0];
- someNode.childNodes.item(0)

（2）parentNode屬性對象

做用：指向文檔樹中的父節點
包含在childNodes列表中的全部節點都有相同的父節點

（3）firstChild、lastChild屬性

分別指向childNodes列表中的第一個和最後一個節點

（4）previousSibling、nextSibling屬性

（5）ownerDocument屬性

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

（6）hasChildNodes()方法

當節點包含一個或多個子節點時返回true

三、操做節點

DOM提供了一些操做節點的方法：

（1）添加節點

appendChild()：向NodeList列表的末尾添加一個節點，並返回新增的節點
insertBefore(newNode,參照節點)：向參照節點的前面插入newNode，並返回新節點

（2）替換節點

replaceChild(新節點，要替換的節點)：要替換的節點被新節點替換，並被方法返回

（3）刪除節點

removeChild(要刪除的節點)：刪除要刪除的節點，並返回要刪除的節點

注意：上述四個方法操做的是某個節點的子節點，即這四個方法均須要先取得父節點（parentNode）

四、其餘方法

（1）cloneNode(true/false)

做用：複製調用該方法的節點
參數爲true時：執行深複製，即複製節點及其整個子節點樹
參數爲false時：執行淺複製，即只複製該節點自己
複製後的節點及其子節點屬於文檔，可是它沒用父節點

（2）normalize()

做用：處理文檔樹中的文本節點，該方法會刪除空文本節點/或者將相鄰的文本節點合併爲一個文本節點

（二） Document類型

Document類型能夠表示HTML頁面或者其餘基於XML的文檔，其中最多見的是做爲HTMLDocument 實例的document對象，該對象表示整個HTML頁面。Document節點具備下列特徵：

nodeType = 9
nodeName = "#document"
nodeValue = null
parentNode = null
ownerDocument = null

1.文檔的子節點

DOM規定Document節點的子節點能夠是如下幾種：
（1）DocumentType

一般<!DOCTYPE>標籤當作一個與文檔其餘部分不一樣的實體，能夠經過doctype屬性訪問該標籤
語法：var doctype = document.doctype
由於不一樣的瀏覽器對該屬性的支持差異很大，因此該屬性的用處不大

（2）Element
有兩個內置屬性能夠快速地訪問Document節點的子節點：

documentElement：訪問文檔的<html>元素 //var html = document.documentElement
body:訪問<body>元素 //var body = document.body

（3）Comment

按照定義，出如今<html>元素外部的註釋應該算是文檔的子節點，然而不一樣的瀏覽器對這些外部註釋的解析不一樣，故一般不在<html>元素外部使用註釋。

（4）ProcessingInstruction

二、文檔信息

document對象做爲HTMLDocument的一個實例，還有幾個標準Document對象沒有的屬性：

title：獲取<title>元素中的文本，即當前頁面的標題 //document.title
URL：返回地址欄中的URL
domain：頁面的域名
referrer：返回連接到當前頁面的URL

三、查找元素

（1）getElementById()

（2）getElementsByTagName()

該方法返回一個HTMLCollection對象，做爲一個「動態」集合，該對象與NodeList很類似
訪問HTMLCollection對象中元素的方法:
（假設, var images=document.getElementsByTagName("img");）
- images[0]
- images.item(0)
- images.namedItem("myImage")=images["myImage"] //獲取<img name="myImage"/>的圖片

（3）getElementsByName()