1.操作节点属性

? ? ? ??1.1获取节点属性

语法：

getAttribute("属性名");

????????1.2设置节点属性

语法：

setAttribute("属性名","属性值");

示例：

//设置节点属性
function changeImage(){
    document.getElementById("phoneimg").setAttribute("src","images/pro1.jpg");
    document.getElementById("phoneimg").setAttribute("alt","5G");
}
//获取节点属性
function changeImage(){
   var imagesrc=document.getElementById("phoneimg").getAttribute("src");
    alert(imagesrc);
}

2.创建和插入节点

? ? ? ? 2.1创建节点

语法：

document.createElement("元素名称");
//示例：创建一个图片标签
document.createElement("img");

? ? ? ? 2.2插入节点

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 克隆和插入节点

名称	描述
element.appendChild(childNode)	为元素添加一个新的子元素(到元素的末尾)追加
element.insertBefore(A,B)	把A节点插入到B节点之前指定位置
element.cloneNode(deep)	克隆某个指定的节点

//追加一个节点
var i=4;
function aaa(){
	var node=document.createElement("li");
	node.innerHTML="第"+i+"个";
	document.getElementById("fu").appendChild(node);
	i++;
}
//删除一个节点
function del (event) {
	//event.target可以获取到事件源
	var node=event.target;
	node.parentElement.parentElement.removeChild(node.parentElement);
}
//克隆一个节点并追加
function bbb(){
	var array=document.getElementsByTagName("li");
	var newnode=array[0].cloneNode(true);
	document.getElementById("fu").appendChild(newnode);
}

? ? ? ? 注意：

插入节点时必须找到要插入位置的父节点。
cloneNode(deep)中参数deep为布尔类型。若deep的值为true，则递归复制当前节点及该节点的所有子节点及内容；若deep值为false，则只复制当前节点。

3.删除和替换节点

? ? ? ? 3.1删除节点

语法：

node.removeChild(childNode);

示例：

//删除一个节点
function del (event) {
	//event.target可以获取到事件源
	var node=event.target;
	node.parentElement.parentElement.removeChild(node.parentElement);
}

? ? ? ? 3.2替换节点

语法：

node.replaceChild(newnode,oldnode)
//第一个参数为新节点
//第二个参数为要替换的节点

示例：

//替换一个节点
function replacePhoneImg(){
    var content=document.getElementByClassName("content")[0];    //获取父元素
    var phoneImg=document.getElementById("phoneimg");    //获取被替换的元素
    var img=document.createElement('img');    //创建要替换的元素
    img.setAttribute("src","images/pro1.jpg");    //设置创建好元素的属性
    img.setAttribute("alt","8 Plus");    //设置创建好元素的属性
    content.replaceChild(img,phoneImg);    //替换节点
}

????????注意：