js怎样添加、移除、移动、复制、创建和查找节点

（1）创建新节点

var para=document.createElement("p"); //创建新的 <p> 元素
var node=document.createTextNode("这是新段落。"); //创建了一个文本节点
para.appendChild(node); //向 <p> 元素追加这个文本节点

var element=document.getElementById("div1");//向一个已有的元素追加这个新元素
element.appendChild(para); //向这个已有的元素追加新元素

（2）添加、移除、替换、之前插入、之后插入、复制

appendChild()

removeChild()

replaceChild() //replaceChild(new_child,old_child)

insertBefore()

insertAfter()

cloneNode() //不是在父元素下操作 obj.cloneNode() //obj是指要克隆的元素 cloneNode() 传入boolean值 true代表克隆obj.innerHTML值

（3）查找

document.getElementsByTagName("") //通过标签名称

document.getElementsByName("") //通过元素的Name属性的值

document.getElementById("") //通过元素Id，唯一性

document.getElementsByClassName(""); //通过类查找

document.querySelector("")

<div class="box"></div>
<div id="box-one">
<p id="p1">p1p1p1p1</p>
</div>

<script type="text/javascript">
//创建节点
var parent=document.createElement("div");
var text=document.createTextNode("这是第一个使用createTexxtNote创建的文本");
parent.appendChild(text);
//console.log(parent)




//向元素中添加节点
var grandpa=document.querySelector(".box");
//console.log(grandpa)
grandpa.appendChild(parent);






//向元素后 添加节点
var p=document.createElement('p');
var html=document.createTextNode("在元素后边添加的代码");
p.appendChild(html)
insertAfter(p,grandpa);
function insertAfter( newElement, targetElement ){
// newElement是要追加的元素 targetElement 是指定元素的位置
var grandpa = targetElement.parentNode; // 找到指定元素的父节点
if( grandpa.lastChild == targetElement ){ // 判断指定元素的是否是节点中的最后一个位置 如果是的话就直接使用appendChild方法
grandpa.appendChild( newElement, targetElement );
}else{
grandpa.insertBefore( newElement, targetElement.nextSibling );
};
};






//向元素前 添加节点insertBefore
var h6=document.createElement("h6");
var htext=document.createTextNode("在元素之前添加h6");
h6.appendChild(htext);
//console.log(htext);
console.log(grandpa)
parent.parentNode.insertBefore(h6,parent);//运用同级的方法在同级元素之前插入







//元素内部的前面插入节点insertBefore
function inhoutEle() {
var oTest = document.getElementById("box-one");
var newNode = document.createElement("div");
var reforeNode = document.getElementById("p1");
newNode.innerHTML = " 元素内部的前面插入节点 ";
oTest.insertBefore(newNode,reforeNode); // 新建的元素节点插入到 id为p1的元素前面
} inhoutEle()


//元素内部的后面插入节点appendChild
function inqianEle() {
var oTest = document.getElementById("box-one");
var newNode = document.createElement("div");
var reforeNode = document.getElementById("p1");
newNode.innerHTML = " 元素内部的前面插入节点 ";
oTest.appendChild(newNode,reforeNode); // 新建的元素节点插入到 id为p1的元素前面
} inqianEle()
</script>

DOM含义：DOM是文档对象模型(Document Object Model，是基于浏览器编程的一套API接口，是W3C出台的推荐标准。其赋予了JS操作节点的能力。当网页被加载时，浏览器就会创建页面的文档对象模型。
节点：根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
1、整个文档时一个文档节点。
2、每个HTML元素是元素节点。
3、HTML元素内的文本是文本节点。
4、每个HTML属性是属性节点。
5、每个注释是注释节点。
所以HTML DOM 将 HTML 文档视作树结构，这种结构被称为节点树。通过 HTML DOM，节点树中的所有节点都可以通过 JS 进行访问。所有 HTML 元素（节点）均可被修改。


一、创建节点、追加节点
1、createElement（标签名）创建一个元素节点（具体的一个元素）。
2、appendChild（节点）追加一个节点。
3、createTextNode（节点文本内容）创建一个文本节点

二、插入节点
1、appendChild（节点）也是一种插入节点的方式，还可以添加已经存在的元素，会将其元素从原来的位置移到新的位置。
2、insertBefore（a,b）是参照节点，意思是a节点会插入b节点的前面。

三、删除、移除节点
1、removeChild(节点) 删除一个节点，用于移除删除一个参数（节点）。其返回的被移除的节点，被移除的节点仍在文档中，只是文档中已没有其位置了。

四、替换节点
1、replaceChild(插入的节点，被替换的节点) ，用于替换节点，接受两个参数，第一参数是要插入的节点，第二个是要被替换的节点。返回的是被替换的节点。

五、查找节点
1、childNodes 包含文本节点和元素节点的子节点。

2、A、children也可以获取子节点，而且兼容各种浏览器。包括IE6-8
B、parentNode：获取父节点

3、A、firstChild ; firstElementChild查找第一个子节点。此存在浏览器兼容问题：firstChild是IE兼容，firstElementChild是非IE兼容。

B、lastChild ; lastElementChild查找最后一个子节点。此存在浏览器兼容问题：lastChild 是IE兼容，lastElementChild是非IE兼容。

C、nextSibling ; nextElementSibling查找下一个兄弟节点。也是存在兼容性问题。

D、previousSibling ; previousElementSibling查找上一个兄弟节点。也是存在兼容性问题。