紧接上文===============gogogo
接着来讲操作节点的属性：
语法：
getAttribute(“属性名”)
setAttribute(“属性名”,“属性值”)
注意：这个在做项目时经常用到
直接来看代码:
里面src的图片就自己去选择吧；
<body>
<div>请选择类型：
<input type="radio" id="img1" name="type" onclick="changimg(this)"/>1、坏人
<input type="radio" id="img2" name="type" onclick="changimg(this)"/>2、好人
</div>
<div>
<img id="demo1" width="500px" height="300px" src="xxx">
</div>
</body>
<script>
function changimg(obj){
//首先获取需要改变的img标签对象
var s1 = document.getElementById("demo1");
//判断需要更换的类型图片
if(obj.getAttribute("id")=='img1') {
s1.setAttribute("src","xxx")
}else{
s1.setAttribute("src","xxx");
}
}
</script>
操作元素:
DOM常用的增删改查节点的属性与方法：
| 属性/方法 | 描述 |
|---|---|
| createElement( tagName) | 创建一个标签名为tagName的新元素节点 |
| A.appendChild( B) | 把B节点追加至A节点的末尾 |
| insertBefore( A,B ) | 把A节点插入到B节点之前 |
| cloneNode(deep) | 复制某个指定的节点 |
| removeChild( node) | 删除指定的节点（父节点才能调用removeChild( )） |
| replaceChild( newNode, oldNode) | 用其他的节点替换指定的节点（前边的替换后面的） |
| 。。。。。。 | 更多请参考官方文档 |
在js中使用appendChild()在dom中追加元素
代码示例：
一、
//DOM中创建button新元素
var btn=document.createElement("button");
//文本内容
var Context=document.createTextNode("我爱你，中国！");
//将内容追加到button标签中
btn.appendChild(Context);
//在html中指定的元素中追加新元素
document.getElementById("div1").appendChild(btn);
二、
扫描二维码关注公众号，回复：
12438462 查看本文章
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>
在js中使用removeChild()在dom中删除元素
代码示例：
一、
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
二、
//获取父节点
var pare=document.getElementById("context");
//获取子节点
var p=document.getElementsByTagName("font")[0];
//删除父节点下面的子节点，如果不获取父节点直接来删除子节点就无法删除
pare.removeChild(p)
在js中使用replaceChild() 方法在dom中替换元素
代码示例：
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>
在js中使用 insertBefore()方法在dom中替换元素
代码示例：
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
再来看一个小案例：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script >
function appendImge(obj){
//目标：添加一个新的img到div
//1.创建img节点
var imgObj = document.createElement("img");
imgObj.setAttribute("src","xxx");
//2.将img节点插入div
var divObjs = document.getElementsByTagName("div");
//divObjs[1].appendChild(imgObj);
// .insertBefore(imgObj);
var afterImg = document.getElementById("wife");
//divObjs.insertBefore(imgObj,afterImg);
divObjs[1].insertBefore(imgObj,afterImg);
}
function cloneImge(){
//浅克隆
//var cloneImg = document.getElementById("wife").cloneNode(false);
// document.getElementsByTagName("div")[1].appendChild(cloneImg);
//深克隆
var cloneLi = document.getElementById("l01").cloneNode(true);
document.getElementsByTagName("div")[1].appendChild(cloneLi);
}
function removeImge(){
//目标：删除id="wife"的img标签
//1.获取img的父节点
var parentDiv = document.getElementById("l01");
//2.获取所有img
var imgArray= document.getElementsByTagName("img");
for(var i in imgArray){
if(imgArray[i].getAttribute("id") == 'wife'){
parentDiv.removeChild(imgArray[i]);
break;
}
}
}
</script>
</head>
<body>
<div >你未来媳妇的类型：<input id="r01" type="radio" name="type" onclick="appendImge(this)"/>1.漂亮，有钱
<input type="radio" id="r02" name="type" onclick="cloneImge(this)" />2.贤惠、温柔</div>
<input type="radio" id="r02" name="type" onclick="removeImge(this)" />2.删除贤惠、温柔的类型</div>
<div >
<ul>
<li id="l01">
<img width="500px" height="300px" id="wife" src="xxx/>
</li>
</ul>
</div>
</body>
希望对大家有用！！！！