JS的DOM操作（增删改查）

一、查询

• 获取元素节点，通过document对象调用

// 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的子节点
targetLi.appendChild(targetText );

/**
 * 1.插入节点：
 * 		把子节点添加到父节点下
 * 		语法：父节点.appendChild(子节点)
 */
var oldUl = document.getElementById('ul1');
oldUl.appendChild(targetLi);
		
/**
 * 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);