DOM總結(三)及綜合案例

2021-08-31 07:58:39 字數 3259 閱讀 5822

dom總結(三)及綜合案例

1,dom屬性-----replacechild()

replacechild()---替換節點:

把乙個給定父元素裡的乙個子節點替換為另外乙個子節點

var reference = element.replacechild(newchild,oldchild);

返回值是乙個指向已被替換的那個子節點的引用指標。

如果被插入的子節點還有子節點,則那些子節點也被插入到目標節點中

練習:   

問題:當單擊」北京」這個節點時,北京這個節點被」游泳」替換

html**:

個人所在城市:

個人愛好:

js解答:

window.onload = function()    

}

2,查詢屬性節點

getattribute()

返回乙個給定元素的乙個給定屬性節點的值

var attributevalue = element.getattribute(attributename);

給定屬性的名字必須以字串的形式傳遞給該方法。

給定屬性的值將以字串的形式返回,如果給定屬性不存在,getattribute() 將返回乙個 

空字串.

通過屬性獲取屬性節點。

getattributenode(屬性的名稱)--node

如:北京 獲取屬性值和文體

//通過屬性名獲取屬性的值

var bjelement=document.getelementbyid("bj");

var attributevalue=eduelement.getattribute("name");

alert("attributevalue "+attributevalue);

//通過屬性名獲取屬性的節點

var bjnode=eduelement.getattributenode("name");

alert(edunode.nodevalue);

alert(edunode.nodetype);

alert(edunode.nodename);

3,設定屬性節點

setattribute()

將給定元素節點新增乙個新的屬性值或改變它的現有屬性的值。

element.setattribute(attributename,attributevalue);

屬性的名字和值必須以字串的形式傳遞給此方法

如果這個屬性已經存在,它的值將被重新整理;

如果不存在,setattribute()方法將先建立它再為其賦值。

如:北京 

//獲取元素的引用

var bjelement=document.getelementbyid("bj");

//設定屬性值

bjelement.setattribute("name","beijing");

//獲取設定的屬性值

var namevalue=bjelement.getattribute("name");

alert("namevalue "+namevalue);

4,建立新文字節點 

createtextnode()

建立乙個包含著給定文字的新文字節點。這個方法的返回值是乙個指向新建文字節   

點引用指標。

var textnode = document.createtextnode(text);

方法只有乙個引數:新建文字節點所包含的文字字串

方法的返回值:是乙個指向新建節點的引用指標。它是乙個文字節點,所以它的     

nodetype 屬性等於 3.

新元素節點不會自動新增到文件裡,新節點沒有 nodeparent 屬性

如: var pelementtext=document.createelement("li");

var textelement=document.createtextnode("南京");

5,插入節點

5.1   

為給定元素增加乙個子節點:                                   

給定子節點 newchild 將成為給定元素節點 element 的最後乙個子節點。

方法的返回值是乙個指向新增子節點的引用指標。

該方法通常與 createelement() createtextnode() 配合使用

新節點可以被追加給文件中的任何乙個元素

5.2   

insertbefore()

把乙個給定節點插入到乙個給定元素節點的給定子節點的前面

var reference =  element.insertbefore(newnode,targetnode);

節點 newnode 將被插入到元素節點 element 中並出現在節點 targetnode 的前面.

節點 targetnode 必須是 element 元素的乙個子節點。

該方法通常與 createelement() 和 createtextnode() 配合使用

5.3    

insertafter() 方法(但是dom沒提供方此方法)*

可以通過dom的屬性方法來寫乙個:  

function insertafter(newelement,targetelement)else }

6,刪除節點

removechild()

從乙個給定元素裡刪除乙個子節點

var reference = element.removechild(node);

返回值是乙個指向已被刪除的子節點的引用指標。

7,獲取最後乙個子節點

lastchild:對應 firstchild 的乙個屬性。

nextsibling: 返回乙個給定節點的下乙個兄弟節點。

parentnode:返回乙個給定節點的父節點。

parentnode 屬性返回的節點永遠是乙個元素節點,因為只有元素節點才有可能包含子節點。

document 節點的沒有父節點。

previoussibling:返回乙個給定節點的上乙個兄弟節點  

8,innerhtml屬性  

瀏覽器幾乎都支援該屬性,但不是 dom 標準的組成部分。

innerhtml 屬性可以用來讀,寫某給定元素裡的 html 內容。

綜合案例

實現如圖js的增刪該

Python物件導向 三大特性 綜合案例

class animal 所用的知識 animal類的封裝 dog類,cat類,person類的繼承 多型 把所有的共同屬性和方法封裝在乙個公有類裡面讓子類繼承父類的方法來實現和資料 在建立乙個小狗例項的時候,給它設定幾個屬性 def init self,name,age 1 self.name n...

hadoop生態圈綜合簡介及架構案例

horntwork的官方部落格 what is hadoop 大資料盤點之spark篇 apache hbase 2015年發展回顧與未來展望 用zookeeper真的low嗎?上千個節點場景配置服務方案大討論 微博基於docker容器的混合雲遷移實戰 sql on hadoop綜合 盤點sql o...

ITIL介紹及應用案例 三

itil 並不是萬能的,他也有很多無法做到的事情。由於itil只是乙個流程框架,所以在使用itil時,你往往會陷入種種境況 itil不能做什麼 首先要明確一點 itil並不是乙個方法,而是一套通用框架體系,該框架體系可以指導我們規劃流程 定義角色 職責和各流程間的關係,以及應使用什麼樣的術語進行溝通...