节点NODE

1、整个文档是一个文档节点 * 每个 XML 标签是一个元素节点 * 包含在 XML 元素中的文本是文本节点 * 每一个 XML 属性是一个属性节点 * 注释属于注释节点
2. 获取NODE的方式
2.1 通过获取元素的方式获取NODE -
document.getElementById("elementID"); //最重要
document.getElementsByTagName("tagname");
document.getElementsByName("name");
document.getElementsByClassName("classname");
2.2 通过NODE关系属性获得引用
* object.parentNode: 获取该元素父节点
* object.childNodes: 获取对象所有的子节点,只包含次级节点
* object.firstChild: 获取该元素第一个子节点
* object.lastChild: 获取该元素最后一个子节点
* object.nextSibling: 获取该下一个兄弟节点
* object.previousSibling: 获取该元素上一个兄弟节点
3. NODE属性

节点中文 nodeType(节点类型) nodeName(节点名) nodeValue(节点值)

元素 1 TagName null
属性 2 attr 属性值
文本 3 #text 文本值
注释 8 #comment 注释文字
文档 9 #document null

4. NODE 增, 删, 查, 改
4.1 创建NODE

创建元素节点 - document.creatElement(TagName);

创建属性节点 - document.createAttribute(attr);
- object.attr = val;
- object.setAttribute(attr, val);

创建文本节点 - object.innerText = val;
- document.createTextNode(text);
4.2 添加NODE - parentNode.appendChild(newNode); 说明: 向节点的子节点列表的末尾添加新的子节点。如果文档树中已经存在了 newNode，它将从文档树中删除，然后重新插入它的新位置。可以使用 appendChild() 方法移除元素到另外一个元素。

第一步：新建元素：createElement
第二步：新建文本：createTextNode
第三步：获取已有的元素：parentNode
第四步：新增标签：appendChild
4.3 插入NODE - parentNode.insertBefore(newNode,existingNode); 说明: 如果文档树中已经存在了 newNode，它将从文档树中删除，然后重新插入它的新位置。
4.4 替换NODE - parentNode.replaceChild(newNode,oldNode) 说明: 如果文档树中已经存在了 newNode，它将从文档树中删除，然后重新插入它的新位置。
4.3 删除NODE - parentNode.removeChild(node); 说明: 从子节点列表中删除某个节点
第一步：找到元素节点：a
第二步：找到要删除的元素：b
第三步：执行删除：c
b.parentNode.removed(b);

5、cloneNode（deep）：创建节点的拷贝，它会克隆所有的属性和值
6、inserBefore（）：在指定的已有子节点之前插入新的子节点

eg：//节点操作
// console.log(document.getElementById("li2").parentNode);//父节点
// console.log(document.getElementById("ul").childNodes.length);//所有子节点
// console.log(document.getElementById("ul").firstElementChild);//第一个元素节点
// console.log(document.getElementById("ul").firstChild);//第一个子节点
// console.log(document.getElementById("ul").lastChild.textContent);//最后一个子节点
// console.log(document.getElementById("li2").nextSibling);//下一个兄弟子节点
// console.log(document.getElementById("li2").previousSibling);//上一个兄弟节点

//节点类型判断
// var li2=document.getElementById("li2");
// console.log(document.getElementById("li2").nodeType);//1元素
// console.log(document.getElementById("li2").childNodes[0].nodeType);//3文本
// console.log(li2.nodeName);//节点名称
// console.log(li2.nodeValue);//节点值,元素节点值
// console.log(li2.textContent);//元素的文本节点值
//
// console.log(document.getElementById("input1").nodeValue);//input输入框测试

//创建节点
// var li2=document.getElementById("li2");
// var ul=document.getElementById("ul");
//
// console.log(document.createElement("p"));//创建元素
//
// document.createAttribute("class");//创建属性
// li2.className="li222";
// console.log(li2);

// li2.setAttribute("class","li2");//创建,更改属性
// console.log(li2);
// document.getElementById("li2").setAttribute("style","fontSize:20px;color:red");//内嵌

// console.log(document.createTextNode("我是新创建的文本节点"));//创建文本

//增加节点
// var div=document.createElement("div");//创建元素
// var tet=document.createTextNode("我是新创建的div");//创建文本
// div.appendChild(tet);//元素中新增文本
// var add=document.getElementById("li2");//找到一个已有元素
// add.appendChild(div);//在已有元素中新增元素文本

//删除节点
// var ul=document.getElementById("ul");
// var li2=document.getElementById("li2");
// ul.removeChild(li2);//找到父元素再删除

// li2.parentNode.removeChild(li2);//直接找到父元素删除

//替换节点
// var ul=document.getElementById("ul");
// var li2=document.getElementById("li2");
// var li5=document.getElementById("li5");
// ul.replaceChild(li2,li5);//li2替换li5,li2原位置内容彻底消失

//克隆节点
// var li2=document.getElementById("li2");
//// li2.cloneNode("我是复制的li3");
// li2.appendChild(li2.cloneNode("我是复制的li3"));//克隆的是所有属性及其值,通过新增节点显示

//插入节点
var div=document.createElement("div");//创建元素
var tet=document.createTextNode("我是新创建的div");//创建文本
div.appendChild(tet);//元素中新增文本
var li2=document.getElementById("li2");//找到一个已有元素
li2.insertBefore(div,li2.childNodes[0]);//找到这个已有元素的首个子节点,在这个已有元素之前,插入这个新增元素文本