目錄

?

一.DOM操作

(一).DOM操作分類

(二).節點和節點的關系

(三).訪問節點

?(四).節點信息

二.操作節點

(一)操作節點的屬性

(二).創建和插入節點

(三).刪除和替換節點

(四).操作節點樣式

---

一.DOM操作

dom是Document Object Model的縮寫，即文檔對象模型，是基于文檔編程的一套API接口，1998年，W3C發布了第一級的DOM規范，規范允許訪問和操作HTML頁面中的每個單獨元素，如網頁的表格，圖片，文本，表單元素等，由于大部分主流的瀏覽器都執行了這個標準，因此基本解決了瀏覽器的兼容問題。

使用javascript操作DOM時分為三個方面，DOMCore（核心），HTML——DOM和CSS-Dom.通過這些標準，開發人員可以讓網頁真正拖動起來，動態的增加，修改，刪除數據，使用戶與計算機的交互更加便捷，交互也更加豐富。

(一).DOM操作分類

使用Javascript操作DOM時通常分為三類，DOM Core（核心）,HTML-DOM 和Css-DOM

(二).節點和節點的關系

DOM是以樹狀結構組織的HTML文檔，HTML文檔中的每個標簽或元素都是一個節點。

--整個文檔是一個文檔節點

--每個HTML標簽是一個元素節點

--包含在HTML元素中的文本是文本節點

--每個HTML屬性是一個屬性節點

--注釋屬于注釋節點

文檔節點結構圖

1.使用父（parent）,子(child)和同胞(sibing)等術語來描述這些節點的層級關系.父節點擁有子節點，同級子節點被稱為同胞或兄弟節點。

--在節點樹中，頂部節點被稱為根（root）。

--每個節點都有父節點，除了根（它沒有父節點）。

-- 一個節點可以擁有任意數量的子節點。

-- 同胞節點是擁有相同父節點的節點。

(三).訪問節點

使用DOM Core訪問HTML文檔的節點主要有兩種方式：
--使用getElement系列方法訪問指定節點，
--根據節點的層次關系訪問節點。

1.使用getElement系列方法訪問指定節點：

訪問節點的標準方法就是用getElement 系列，

--getElementById():返回按id屬性查找的第一個對象的引用。

--getElementsByName():返回按帶有指定名稱name查找的對象的集合，返回的是元素數組。

--getElementsByTagName():返回帶有指定標簽名Tag Name查找的對象的集合，返回的是元素數組。

2.根據層次關系訪問節點

節點屬性(節點[包含元素，文本，屬性，注釋])屬性名稱描述

parentNode	返回節點的父節點
chiildNodes	返回子節點集合 childNoeds[i]
fistChild	返回節點的第一個子節點，最普遍的用法是訪問該元素的文本信息
lastChild	返回節點的最后一個子節點
nextSibing	下一個節點
previousSibling	上一個節點

在Javascript中有一組可兼容不同瀏覽器的element屬性

element屬性(節點<標簽元素>)屬性名稱描述

fistChildElementChild	返回節點的第一個子節點，最普遍的用法是訪問該元素的文本信息
lastElementChild	返回節點的最后一個子節點
nextElementSibing	下一個節點
previousElementSibing	上一個節點

?(四).節點信息

節點是DOM層級中的任何類型的對象的通用名稱，每個節點都擁有包含著關于節點某些信息的屬性

--nodeName（節點名稱）

--nodeValue（節點屬性）

--nodeType? ?(節點類型)

節點類型節點類型NodeType值

元素element	1
屬性attr	2
文本text	3
注釋comments	8
文檔document	9

二.操作節點

(一)操作節點的屬性

--getAttribute(“屬性名”) 用來獲取屬性的值 ,當屬性不存在則getAttribute（）返回null。

--setAttribute(“屬性名，屬性值”) 用來設置屬性的值 。

(二).創建和插入節點

使用javascript 操作DOM有很多方法可以創建或增加一個新節點

創建和插入節點名稱描述

createElement(tagName)	創建一個標簽名為tagName的新元素節點
A.appendChild(B)	把B節點追加至A節點的末尾
inserBefore(A,B)?//使用父節點插入	把A節點插入B節點之前
cloneNode(deep)	復制某個指定的節點

(三).刪除和替換節點

名稱描述

removeChild(node)	刪除指定的節點
replaceChild(newNode,oldNode)	用其他的節點替換指定的節點

方法replaceChild(newNode,oldNode)中的兩個參數，newNode是替換的新節點,oldNode是要被替換的節點

(四).操作節點樣式

在javascript中，有兩種方式可以動態的改變樣式的屬性

--使用style屬性

style是一個對象，代表一個單獨的樣式聲明，可通過應用樣式的文檔或元素訪問Style對象，

1.style語法HTML元素.style.樣式屬性=“值” style屬性的常用屬性類別屬性描述

background（背景）	backgroundColor	設置元素的背景色
	backgroundImage	設置元素的背景圖像
	backgroundRepeat	設置元素的背景圖像是否重復
text(文本)	fontSize	字體的大小
	fontWeight	字體的粗細
	textAlign	排列文本
	textDecotation	文本的修飾
	font	設置同一行字體的屬性
	color	設置文本的顏色
padding(邊距)	padding?	內邊距
邊框	border	邊框屬性

?

?

?

?

?

?

?

?

?

?

?

?

?

--使用className屬性

1.語法HTML元素.className="樣式名稱"

獲取元素的樣式

在javascript中可以使用style屬性獲取樣式的屬性值

1.語法HTML元素.style。樣式屬性;(獲取內聯樣式)

事件

常用的事件

名稱	描述
onclick	點擊事件
onmouseover	鼠標移動到某元素之上
onmouseout	鼠標從某元素之上移開
onmousedown	鼠標按鈕被按下

?

總結

以上是生活随笔為你收集整理的JavaScript操作DOM对象的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。