【JavaScript】常用dom节点的获取与操作

　　常用Dom节点操作

• 获取dom节点

//id选择
document.getElementById(); // 根据id属性获取节点
document.getElementById('input'); // 获取id属性为input的节点
 
//name属性选择
document.getElementsByName(); // 根据name属性获取节点
document.getELementsByName('form'); // 获取name属性为form的节点
 
//标签名选取
document.getElementsByTagName(); // 根据标签名获取节点
element.getElementsByName(); // 根据标签名获取element下的节点
document.getElementsByTagName('p'); // 获取所有p标签节点
 
//类名选择
document.getELementsByClassName(); // 根据类名获取节点，不兼容IE8及以下
element.getElementsByName(); // 根据类名获取element下的节点，不兼容IE8及以下
document.getELementsByClassName('header'); // 获取class为header的节点

//CSS选择
document.querySelector(); // 根据指定css选择器，获取匹配到的第一个节点，不兼容IE8及以下
document.querySelectorAll(); // 根据指定css选择器，获取匹配到的所有节点，不兼容IE8及以下
element.querySelector(); // 根据指定css选择器，获取element节点下匹配到的第一个节点，不兼容IE8及以下
element.querySelectorAll(); // 根据指定css选择器，获取获取element节点下匹配到的所有节点，不兼容IE8及以下

//根据('名')选取
document.querySelectorAll('#input'); // 获取id为input的节点
document.querySelectorAll('.header'); // 获取class为header的节点
document.querySelectorAll('p'); // 获取所有p标签节点
document.querySelectorAll('.header div'); // 获取id为header下的所有div节点

• 操作dom节点

//创建
document.createTextNode(text);  //创建一个文本节点:
document.createTextNode('123');  //创建一个123节点

document.createElement(label); // 创建一个新节点
const divDom = document.createElement('div'); // 创建一个div节点

//复制
element.cloneNode(deep); // 克隆节点，deep为true时递归克隆该节点及其子节点，否则只克隆该节点
const cloneBtn = buttonDom.cloneNode(true); // 克隆buttonDOm节点

//添加
element.appendChild(node); // 向节点添加一个子节点
divDom.appendChild(buttonDom); // 向divDom节点添加一个buttonDom子节点

//插入
element.insertBefore(newNode, existingnode); // 向某个子节点之前插入一个新的子节点
divDom.insertBefore(cloneBtn, divDom.firstChild); // 向divDom的第一个子节点之前插入cloneBtn节点

//删除
element.removeChild(node); // 删除某一个子节点
divDom.removeChild(buttonDom); // 删除divDom下的buttonDom节点

//替换
element.replaceChild(newNode, oldNode); // 替换某一个子节点
divDom.replaceChild(buttonDom, cloneBtn); // cloneBtn节点替换成buttonDom节点

• eg：

const divDom = document.createElement('div'); // 创建一个div节点
const buttonDom = document.createElement('button'); // 创建一个button节点
const cloneBtn = buttonDom.cloneNode(true); // 克隆buttonDOM节点

divDom.appendChild(buttonDom); // 向divDom节点添加一个buttonDom子节点
divDom.insertBefore(cloneBtn, divDom.firstChild); // 向divDom的第一个子节点之前插入cloneBtn节点
divDom.removeChild(buttonDom); // 删除divDom下的buttonDom节点
divDom.replaceChild(buttonDom, cloneBtn); // cloneBtn节点替换成buttonDom节点
buttonDom.parentNode.appendChild(cloneBtn); // buttonDom节点同级添加cloneBtn节点