JS的DOM操作（增刪改查）

// 1.通過id屬性獲取乙個元素節點物件

document.getelementbyid('id1');
// 2.通過name屬性獲取一組元素節點物件
document.getelementsbyname('name1');
// 3.通過標籤名獲取一組元素節點物件
document.getelementsbytagname('li'); 
// 4.通過class值獲取一組元素節點物件
document.getelementsbyclassname('class1');
// 5.根據選擇器查詢獲取元素節點物件
document.queryselector('div'); //返回唯一元素
document.queryselectorall('div'); //返回元素陣列
// 6.直接使用document屬性獲取元素節點物件
document.body;

// 1.獲取當前節點的指定標籤名後代節點

document.getelementbyid('id1').getelementsbytagname('li'); //查詢id為id1下的所有li標籤
// 2.獲得當前節點的子節點 (包括空白的文字)
document.getelementbyid('id1').childnodes;
// 3.獲得當前元素的子元素
document.getelementbyid('id1').children;
// 4.獲取當前節點的第乙個子節點
document.getelementbyid('id1').firstchild;
// 5.當前元素的第乙個子元素
document.getelementbyid('id1').firstelementchild;
// 6.獲取當前節點的最後乙個子節點
document.getelementbyid('id1').lastchild;
// 7.獲取當前節點的最後乙個子元素
document.getelementbyid('id1').lastelementchild;

// 1.獲取當前節點的父節點

document.getelementbyid('id1').parentnode;
// 2.獲得當前節點的前乙個兄弟節點
document.getelementbyid('id1').previoussibling; //也可能獲取到空白的文字
document.getelementbyid('id1').previouselementsibling;
// 3.獲得當前節點的後乙個兄弟節點
document.getelementbyid('id1').nextsibling; //也可能獲取到空白的文字
document.getelementbyid('id1').nextelementsibling;

// 建立li節點

var targetli = document.createelement('li');
// 建立文字節點
var targettext = document.createtextnode('this is text');
// 將text設定為li的子節點
/** * 1.插入節點：
* 把子節點新增到父節點下
*/var oldul = document.getelementbyid('ul1');
/*** 2.插入節點
* 將目標節點插入到指定節點的前面
* 語法：父節點.insertbefore(目標節點, 指定節點)
*/var oldul = document.getelementbyid('ul1');
var oldli = document.getelementbyid('li1');
oldul.insertbefore(targetli, oldli );
/** * 3.替換節點
* 語法：父節點.replacechild(目標節點, 指定節點)
*/var oldul = document.getelementbyid('ul1');
var oldli = document.getelementbyid('li1');
oldul.replacechild(targetli, oldli );
/*** 4.刪除節點
* 語法：父節點.removechild(子節點);
*/var oldli = document.getelementbyid('li1');
oldul.removechild(oldli);

DOM操作 JS事件 節點增刪改查

習慣是社會的巨大的飛輪和最可貴的維護者。威 詹姆斯 day 49 value屬性操作 節點的增刪改查 一 展示 刪除節點 歡迎刪除,聖誕快樂 替換節點 p.innerhtml 深圳歡迎您 舊節點 let title document.getelementsbyclassname title 0 pe...

dom增刪改查

一 建立節點 document.createelement tag tag必須是合法的 html 元素二 dom新增 刪除節點的方法 將newnode新增成當前節點的最後乙個子節點 insertbefore newnode,refnode 將refnode 節點之前插入 newnode 節點repl...

DOM的增刪改查

1 建立li元素 var li document.createelement li 2 建立文字節點 var guangzhou document.createtextnode 廣州 3 將li元素與文字繫結在一起 li.guangzhou 4 獲取id為city的節點 var city docum...