1. 程式人生 > >【JavaScript】DOM—對節點的操作

【JavaScript】DOM—對節點的操作

1、獲得節點

(1)獲得頁面中指定id的節點物件

document.getElementById("id的字串");

(2)獲得頁面中所有標籤名符合要求的標籤

document.getElementsByTagName("標籤名");

(3)獲得指定父節點下的所有名字符合要求的節點

父節點.getElementsByTagName("標籤名");

(4)獲得節點下的所有子節點,首節點,尾節點

<node>.childNodes         //獲得節點下的所有子節點
<node>.firstChild  或   <node>.childNodes[0]           //獲得節點下的首節點
<node>.lastChild  或   <node>.childNodes[<node>.childNodes.length-1]     //獲得節點下的尾節點

2、修改節點

修改節點就是修改節點的屬性和包含的文字,有倆種方式

第一種方法

//新增屬性
<node>.setAttribute("屬性名","值");
//獲取屬性
文字 <node>.getAttribute("屬性名");

第二種方法

//設定
<node>.屬性名=值;
//獲取
var v=<node>.屬性名;

3、新增節點

(1)建立節點

//元素節點
var node=document.createElement("標籤名");
//文字節點
var textNode=document.createTextNode("文字");
//屬性節點
<節點>.setAttribute("屬性名","值")
//設定文字節點中的文字內容
<節點>.innerHTML="文字"
<節點>.innerText="文字"

(2)追加節點

//追加到尾部
父節點.appendChild(子節點);
//插入到中間
父節點.insertBefore(新元素,舊元素);

4、刪除節點

節點一般最好不要刪除,要用隱藏。因為刪除太消耗CPU,

//刪除
父節點.removeChild(“節點”);
//隱藏
節點.style.display="none";