JavaScript DOM节点操作

目录：

一、DOM节点的获取。

    1、节点属性的设置

    2、指定节点的获取

    3、相对节点的获取

二、增加节点

    1、innerHTML方式或者 innerText

    2、节点的操作 【在后面增加、在前面增加、移除操作】

    3、动态事件编程

三、删除节点

    obj.removeChild(对象e.previousSibling);//删除e的上一个

内容：

一、DOM节点的获取。

    1、节点属性的设置

document.getElementById("mydiv").className="a22";
document.getElementById("mydiv").setAttribute("class","good");

    2、指定节点的获取

 (1)document.getElementById(elementId)
 (2)document.getElementsByClassName("class名")
 (3)document.getElementsByTagName(tagName)

    3、相对节点的获取

obj.previousSibling 获得obj相邻的上一个节点 [空格/换行]
obj.nextSibling  获得obj相邻的下一个节点
obj.parentNode 获得是obj父级节点

obj.childNodes  找对象下方的子节点 

obj.firstChild 快速的找到第一个子节点
obj.lastChild 快速的找到最后一个子节点

二、增加节点

    1、innerHTML方式或者 innerText

<div id="add"></div>
<script>
    document.getElementById("add").innerHTML="<span>这是增加的span</span>";
</script>

    2、节点的操作 【在后面增加、在前面增加、移除操作】

obj.appendChild(节点对象)//在后面增加
obj.insertBefore(obj2,obj[index]);//在前面增加
obj.removeChild(obj2);移除操作。

var node1 = document.getElementById("div_1");
var TextNode = document.createTextNode("这不就显示了吗");
node1.insertBefore(TextNode,node1.childNodes[0]);

    3、动态事件编程

<div id="photo"></div>
<script>
    var img1=document.createElement("img");		
    img1.src="https://www.itwenda.com/demo_files/demo1.jpg";	
    document.getElementById("photo").appendChild(img1);
</script>

三、删除节点

    obj.removeChild(对象e.previousSibling);//删除e的上一个