JavaScript中的节点操作

节点

一般情况下，节点至少拥有三个基本属性

1. nodeType：节点类型，这里的类型是标签的名称
2. nodeName：节点名称，这里的名称是js中给这个节点起的一个名字
3. nodeValue：节点值

获取节点

1：用 getElement 方法获取

//通过ID来查看元素属性
var li = document.getElementById("first"); 
//通过类名来查看元素属性，返回元素数组
var lis1 = document.getElementsByClassName("cls");
//通过名字来查看元素属性，返回数组
var lis2 = document.getElementsByName("name");
//通过标签名来查看元素属性，返回数组
var lis3 = document.getElementsByTagName("li");

2：用 querySelector 方法获取

// querySelector() 方法仅仅返回匹配指定选择器的第一个元素。
var dq1 = document.querySelector("#id");　
//querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。
var dqs1 = document.querySelectorAll("#div li");

获取属性

1. 元素对象.属性名 获取属性值
2. 元素对象.getAttribute(属性名) 获取属性值

//通过getAttribute获取属性值，返回的结果是以字符串体现，可以获取到自定义属性的值
document.getElementsByTagName("a")[0].getAttribute("target");

设置属性

1. 元素对象.属性名=属性值
2. 元素对象.setAttribute(属性名,属性值);//属性名完全按照元素原本的属性名设置，否则将是自定义属性

document.getElementsByTagName("INPUT")0].setAttribute("type","button");

关于子节点的操作

childNodes： 获取当前节点的所有子节点（包括元素节点和文本节点）。

children： 获取当前节点的所有元素子节点（不包含文本节点）。

firstChild： 获取第一个子节点，包括回车等文本节点；

firstElementChild： 获取第一个元素节点。 不含文本节点；

lastChild： 获取最后一个子节点，包括回车等文本节点；

lastElementChild： 获取最后一个子节点，不含文本节点；

关于父节点的操作

parentNode: 获取当前节点的父节点。

关于同胞节点的操作

previousSibling： 获取当前节点的前一个兄弟节点，包括文本节点；

previousElementSibling： 获取当前节点的前一个元素兄弟节点；

nextSibling：获取当前节点的后一个兄弟节点，包括文本节点；

nextElementSibling：获取当前节点的后一个元素兄弟节点；

创建元素节点

document.createElement("div"); 　　//创建元素节点

创建文本节点

document.createTextNode(text)
var btn=document.createTextNode("Hello World");

添加节点

document.getElementById("myList").appendChild(newItem);  　　　　　　　　　　//在父节点的末尾添加子节点
document.getElementById("myList").insertBefore(newItem,existingItem);   　//在父节点中的某一已存子节点前面添加节点　　existingItem 是指父节点中已经存在的子节点，插入的新节点就插在这个子节点的位置

删除节点

父节点.removeChild(子节点)： 从父节点中，删除指定子节点。

父节点.replaceChild(新节点,老节点)： 从父节点中，用新节点替换老节点。