讀dom程式設計藝術總結 操作dom元素

2021-06-22 06:44:00 字數 2026 閱讀 8923

一.獲取元素節點三種方法

document.getelementbyid(

'id1');

document.getelementsbytagname(「標籤的名字例如:ul」)——得到所有的標籤

html5新增的方法:

document.getelementbyclassname(

'id1');

可以這樣封裝:

function

tag(name, elem) 

二.獲取和設定樣式

這兩個方法只能對元素節點使用

obj.getattribute("樣式名")

obj.setattribute("樣式名","樣式值")

還有乙個簡單的方法obj.classname = "類名" 這樣可以直接命名字串;

可以這樣封裝:

function

hasattribute(elem, name) ;

樣式表有三種方式:

內嵌樣式(inline style) :是寫在html標籤裡面的。

內部樣式(internal style sheet):是寫在html的頭部。

外聯樣式表(external style sheet):是用link鏈結到外部css檔案。

js裡獲採樣式表的幾種語法: 用法

作用style

obj.style.att

只能獲取或修改內嵌樣式

注意:增改top、left等,ie裡直接寫數值,firefox等要加」px」

currentstyle

obj.currentstyle.att

obj.currentstyle[att]

當arr為字串傳參時,帶中括號 [ ] 的格式可以識別,而.arr格式不能識別。

能獲取(僅獲取)三種方式的樣式(僅ie),唯讀模式

getcomputedstyle

window.getcomputedstyle(obj, pseudoelt)[att]

window.getcomputedstyle(obj, pseudoelt).att

window.getcomputedstyle(obj, pseudoelt).getpropertyvalue(att)

window.getcomputedstyle(obj, pseudoelt).getpropertycssvalue(att)

document.defaultview.getcomputedstyle(obj,pseudoelt)[att]

document.defaultview.getcomputedstyle(obj,pseudoelt).att

document.defaultview.getcomputedstyle(obj,pseudoelt)

.getpropertyvalue(att)

document.defaultview.getcomputedstyle(obj,pseudoelt)

.getpropertycssvalue(att)

能獲取(僅獲取)三種方式的樣式(除ie)

要修改就直接用obj.style.arr

getcomputedstyle的語法可為以上八種,嚴格來說,帶上getpropertyvalue或getpropertycssvalue才算是標準吧。其中pseudoelt是指偽元素,如:after, :before, :marker, :line-marker之類的,如果不用偽類,則填null就可以了。getpropertyvalue和getpropertycssvalue有什麼區別呢,getpropertyvalue返回的是乙個string,而getpropertycssvalue返回的是乙個css2properties物件

復合樣式:background backgroundcolor

單一樣式:height

三. obj.childnodes 返回所有子元素(三種節點:元素節點,屬性節點,文字節點)

用obj.nodetype 判斷元素型別

四.建立插入刪除 dom節點

建立

DOM程式設計藝術(動畫)

1 實現方式 gif flash css3 js2 三要素 物件dom物件 屬性 定時器 setinterval settimeout requestanimationframe setinterval var intervalid setinterval func,delay param1,par...

DOM程式設計藝術 position屬性

position屬性的合法值有static fixed relative和absolue四種。static是position屬性的預設值,意思是有關元素將按照它們在標記裡出現的先後順序出現在瀏覽器視窗裡。relative的含義魚static相似,區別是position屬性等於relative的元素還...

《DOM程式設計藝術》中CSS DOM的總結(一)

前言 前面是純總結,後面實現了乙個用dom改變樣式的demo。開始 html文件中每個元素節點都有乙個style屬性,style屬性包含著元素的樣式,查詢這個這個屬性將會返回乙個物件,節點對應的樣式都存放在這個style屬性裡。乙個demo 可以彈出彈窗,返回標籤應用的css樣式 an exampl...