一、 建立節點:
節點是DOM結構的基礎,根據DOM規範,節點是一個很廣泛的概念,包含元素、屬性、文字、文件和註解。但在實際開發中,要動態創建內容,主要操作的節點包括元素、屬性和文字。
1、需求:建立一個h1 標籤,把它當作div元素的子節點加入DOM節點樹。
2、基本想法是:先建立一個h1元素對象,然後再加入文件中。
3、以下是兩種實作方式:
// jQuery方式 var $h1 = $("<h1 title='创建节点' class='head'>jQuery与JavaScript创建节点比较</h1>"); $("div").append($h1);
//JavaScript方式 var div = document.getElementById("div1"); var h1 = document.createElement("h1");//创建h1对象 h1.setAttribute("title","创建节点");//为h1对象创建属性节点,并设置属性值 h1.setAttribute("class","head");//为h1对象成交价属性节点class,并设置属性值 var txt = document.createTextNode("jQuery与JavaScript创建节点比较"); h1.appendChild(txt);//将文本增加到元素节点中 div.appendChild(h1);//把创建的h1对象添加到div中
rr可快速實現。 JavaScript實作比較麻煩,使用者需要分別建立元素節點和文字節點,然後再一步一步把文字節點加入元素節點中,最後才能夠加入DOM結構樹。 2)、從執行角度分析:在Safari瀏覽器中,JavaScript實現要比jQuery實現快80倍以上,而在執行速度最慢的IE瀏覽器,兩者差異也在10倍以上