常見的dom操作

2021-08-21 19:01:06 字數 2168 閱讀 1843

p標籤// 查--查詢dom節點

//查詢元素節點p的屬性返回屬性名稱對應的屬性值$("#ipt").attr("title"),返回p的屬性title的值。

var ipt=$('#ipt').attr('title');

console.log(ipt) //20

//建--新建dom節點

//建立元素節點並且把節點作為元素的子節點新增到dom節點樹上。先建立元素點,建立元素節點使用jquery的工廠函式$()來完成,格式如下:

// $(html),該方法會根據傳入的html字串返回乙個dom物件,並將dom物件包裝成乙個jquery物件後返回。建立乙個元素節點jquery**如下:

li=$("建立的li");

//增--新增dom節點

//動態新建元素不新增到文件中沒有實際意義,將新建的節點插入到文件中有多個方法,

//該方法查詢ul元素,然後向ul中新增新建的li元素。

// 該方法新建元素li,然後把li新增到查詢到的ul元素中。

//3、prepend()方法

//prepend()方法將每匹配的元素內部前置要新增的元素,

//該方法將查詢元素ul然後將新建的li元素作為ul子節點,且作為ul的第乙個子節點插入到ul中

$("ul").prepend("芒果");

//5、after()方法

//after()方法向匹配的元素後面新增元素,新新增的元素做為目標元素後的緊鄰的兄弟元素。

// 方法將查詢節點p,然後把新建的元素新增到span節點後面做為p的兄弟節點。

$("p").after("新加段新加段新加段新加段新加段");

//6、insertafter()方法

//insertafter()方法將新建的元素插入到查詢到的目標元素後,做為目標元素的兄弟節點。

$("insertafter操作

").insertafter("p");

//7、before()方法

//before()方法在每乙個匹配的元素之前插入,做為匹配元素的前乙個兄弟節點。

//before方法查詢每個元素p,將新建的span元素插入到元素p之前做為p的前乙個兄弟節點。

$("#span").before("下面是個段落");

//8、insertbefore()方法

//insertbefore()方法將新建元素新增到目標元素前,做為目標元素的前乙個兄弟節點,

// insertbefore()新建a元素,將新建的a元素新增到元素ul前,做為ul的前乙個兄弟節點。

$("錨").insertbefore("ul");

//刪--刪除dom節點操作

// 1、remove()方法

//remove()方法刪除所有匹配的元素,傳入的引數用於篩選元素,

$("#span").remove();

//2、empty()方法。

//empty()方法嚴格來講並不是刪除元素,該方法只是清空節點,它能清空元素中的所有子節點。

//該示例使用empty方法清空ul中第乙個li的文字值。只能下li標籤預設符號」·「。

$("ul li").empty();

//dom元素的其他操作:屬性操作、樣式操作、設定和獲取html,文字和值、遍歷節點操作、css-dom操作。

//1、屬性操作attr()和removeattr()

//attr()方法能夠獲取元素屬性,也能能夠設定元素屬性。方法如下,當attr(para1)方法有個引數時候用於獲得當前元素的para1的屬性值,

// 當attr(para1,attrvalue)有兩個引數時候設定當前元素的屬性名為para1的屬性值為attrvalue;例:

$("p").attr("title");//該示例用於獲得p元素的title屬性值。

$("p").attr("title","你最喜歡的水果");//該示例設定p元素的title屬性值為"你最喜歡的水果";

//如果一次設定多個屬性值可以使用「名/值」對形式,例:

$("p").attr();//。該示例一次設定兩個屬性值。

//removeattr()方法用於刪除特定的屬性,方法是在引數中指定屬性名。例:

$("p").removeattr("name");//該方法就是移除p元素的name屬性。

常見DOM操作

建立元素節點 var odiv document.createelement div 建立乙個div var op document.createelement p 建立乙個p標籤建立文字節點 var otext document.createtextnode 文字資訊 把建立的節點追加到方法呼叫者...

常見dom樹操作

js操作dom節點 1.訪問節點 document.getelementbyid id 返回對擁有指定id的第乙個物件進行訪問 document.getelementsbyname name 返回帶有指定名稱的節點集合 注意 element sdocument.getelementsbytagnam...

JS常見的DOM操作API

目錄 幾種物件 node nodelist htmlcollection 節點查詢api 節點建立api createelement createtextnode clonenode createdocumentfragment 節點修改api insertbefore removechild re...