JavaScript中操作节点
1、获取节点
1.1、用 getElement 方法获取
获取元素节点时，必须等到DOM树加载完成后才能获取。两种处理方式：（1）将JS写在文档最后；（2）将代码写入window.onload函数中；
//通过ID来查看元素属性 var li = document.getElementById("first"); //通过类名来查看元素属性，返回元素数组 var lis1 = document.getElementsByClassName("cls"); //通过名字来查看元素属性，返回数组 var lis2 = document.getElementsByName("name"); //通过标签名来查看元素属性，返回数组 var lis3 = document.getElementsByTagName("li");
这一系列方法，也可以先选中一个DOM节点，在从选中的DOM节点的子节点里，选择需要的节点：
document.getElementById("div1").getElementsByTagName("li")[0];
1.2、用 querySelector 方法获取
querySelector() 方法仅仅返回匹配指定选择器的第一个元素。
var dq1 = document.querySelector("#id");
querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。
var dqs1 = document.querySelectorAll("#div1 li");
2、查看设置属性（getAttribute、setAttribute）
attributes: 获取当前节点的所有属性节点。 返回数组格式。
document.getElementsByTagName("a")[0].getAttribute("target");
//element.setAttribute("属性名","属性值");
document.getElementsByTagName("INPUT")0].setAttribute("type","button");
3、设置样式
使用setAttribute设置class和style。
document.getElementById("first").setAttribute("class","class1");
document.getElementById("first").setAttribute("style","color:red;");
使用 className设置元素类名
document.getElementById("first").className = "class1";
使用 style 样式 直接修改单个样式。注意样式名必须使用驼峰命名法。
document.getElementById("first").style.fontSize = "18px";
使用 style 或 style.cssText 设置样式：
// IE不兼容 document.getElementById("first").style = "color:red;"; //cssText 属性用于设置或者返回元素声明的内联样式。 document.getElementById("first").style.cssText = "color:red;";
4、设置文本节点
innerHTML：取到或设置一个节点中的HTML代码。
innerText：取到或设置一个节点中的文本，会判断HTML标签样式，如果该标签隐藏，则该标签文本不会输出
<div class="container"> aaaa <h1 class="h1 h2">container里的标题1</h1> <h2 style="display: none">隐藏内容</h2> bbbb </div>
let cont = document.getElementsByClassName('container')[0];
console.log(cont.innerHTML);
//输出：
// aaaa
// <h1 class="h1 h2">container里的标题1</h1>
// <h2 style="display: none">隐藏内容</h2>
// bbbb
console.log(cont.innerText);
//输出：
//aaaa
//container里的标题1
//bbbb
console.log(cont.textContent);
//输出：
//aaaa
// container里的标题1
// 隐藏内容
// bbbb
5、父子同胞节点
5.1、关于子节点的操作
childNodes： 获取当前节点的所有子节点（包括元素节点和文本节点）。
children： 获取当前节点的所有元素子节点（不包含文本节点）。
firstChild： 获取第一个子节点，包括回车等文本节点；
firstElementChild： 获取第一个元素节点。 不含文本节点；
lastChild： 获取最后一个子节点，包括回车等文本节点；
lastElementChild： 获取最后一个子节点，不含文本节点；
5.2、关于父节点的操作
parentNode: 获取当前节点的父节点。
5.3、关于同胞节点的操作
previousSibling： 获取当前节点的前一个兄弟节点，包括文本节点；
previousElementSibling： 获取当前节点的前一个元素兄弟节点；
nextSibling：获取当前节点的后一个兄弟节点，包括文本节点；
nextElementSibling：获取当前节点的后一个元素兄弟节点；
6、创建新增、删除替换节点
6.1、创建元素节点
document.createElement("div"); //创建元素节点
6.2、创建文本节点
document.createTextNode(text)
var btn=document.createTextNode("Hello World");
6.3、添加节点
往父节点添加子节点
document.getElementById("myList").appendChild(newItem); //在父节点的末尾添加子节点
document.getElementById("myList").insertBefore(newItem,existingItem); //在父节点中的某一已存子节点前面添加节点 existingItem 是指父节点中已经存在的子节点，插入的新节点就插在这个子节点的位置
6.4、删除节点
父节点.removeChild(子节点)： 从父节点中，删除指定子节点。
父节点.replaceChild(新节点,老节点)： 从父节点中，用新节点替换老节点。
