增删改查演示
增:
''' createElement(name)创建元素 appendChild();将元素添加 '''
删:
''' 获得要删除的元素 获得它的父元素 使用removeChild()方法删除 '''
改:
第一种方式:
使用上面增和删结合完成修改
第二种方式:
使用setAttribute();方法修改属性
使用innerHTML属性修改元素的内容
查: 使用之前介绍的方法.
<script type="text/javascript"> //在第一个div中动态增加一个a标签. 该a标签点击之后跳转到百度首页. function addNode(){ //1.获得 第一个div var div = document.getElementById("div_1"); //2.创建a标签 createElement==>创建一个a标签 <a></a> var eleA = document.createElement("a"); //3.为a标签添加属性 <a href="http://www.baidu.com"></a> eleA.setAttribute("href", "http://www.baidu.com"); //4.为a标签添加内容 <a href="http://www.baidu.com">百度</a> eleA.innerHTML = "百度"; //5.将a标签添加到div中 div.appendChild(eleA); } //点击后 删除div区域2 function deleteNode(){ //1 获得要删除的div区域 var div = document.getElementById("div_2"); //2.获得父亲 var parent = div.parentNode; //3 由父亲操刀 parent.removeChild(div); } //点击后 替换div区域3 为一个美女 function updateNode(){ //1 获得要替换的div区域3 var div = document.getElementById("div_3"); //2创建img标签对象 <img /> var img = document.createElement("img"); //3添加属性 <img src="001.jpg" /> img.setAttribute("src", "001.JPG"); //4.获得父节点 var parent = div.parentNode; //5.替换 parent.replaceChild(img, div); } //点击后 将div区域4 克隆一份 添加到页面底部 function copyNode(){ //1.获取要克隆的div var div = document.getElementById("div_4"); //2.克隆 参数为true 那么克隆时克隆所有子元素. false 只克隆自己 var div_copy = div.cloneNode(true); //3.获得父亲 var parent = div.parentNode; //4.添加 parent.appendChild(div_copy); } </script>
修改 HTML DOM
- 改变 HTML 内容
改变元素内容的最简答的方法是使用 innerHTML ，innerText。
- 改变 CSS 样式
''' <p id="p2">Hello world!</p> document.getElementById("p2").style.color="blue";<br> .style.fontSize=48px '''
- 改变 HTML 属性
elementNode.setAttribute(name,value)
elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)
- 创建新的 HTML 元素
createElement(name)
- 删除已有的 HTML 元素
elementNode.removeChild(node)
- 关于class的操作
elementNode.className
elementNode.classList.add
elementNode.classList.remove
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1,.div2,.div3,.div4{ width:300px; height:100px; } .div1{ background-color: green; } .div2{ background-color: #d900ff; } .div3{ background-color: rebeccapurple; } .div4{ background-color: yellow; } </style> </head> <body> <div class="div1"> <button onclick="add()">添加</button> hello div1 </div> <div class="div2"> <button onclick="del()">删除</button> hello div2 </div> <div class="div3"> <button onclick="change()">修改</button> <p>hello div3</p> </div> <div class="div4 div5">hello div4</div> <script> // node的CURD function add() { var ele=document.createElement('p'); // 创建元素 ele.innerHTML='<h6>hello p<h6>'; // 为所创建元素添加文本 // ele.innerText='<h6>hello p<h6>'; // 和innerHTML有区别 var ele1=document.getElementsByClassName('div1')[0]; // 找到其父元素 ele1.appendChild(ele); // 将元素添加，必须是父节点进行操作 }; function del() { var ele1=document.getElementsByClassName('div1')[0]; // 获得要删除的元素的父元素 var ele=ele1.getElementsByTagName('p')[0]; // 获得要删除的元素 ele1.removeChild(ele); // 删除元素，必须是其父元素进行操作 }; function change() { var img=document.createElement('img'); // 创建元素 // img.setAttribute('src', 'icon.jpg'); 和下面一样的功能 img.src='icon.jpg'; // 找到img标签的图片路径 img.style.width='50px'; img.style.height='50px'; var ele1=document.getElementsByClassName('div3')[0]; // 找到要修改元素的父元素 ele=ele1.getElementsByTagName('p')[0]; // 找到要修改的元素 ele1.replaceChild(img,ele); // 修改元素，必须是其父元素进行操作 }; // 关于class的操作(可用于对标签的隐藏及显现的操作) var div=document.getElementsByClassName('div4')[0]; console.log(div.className); // div4 div5获取标签所有的class值 console.log(div.classList); // ["div4", "div5", value: "div4 div5"]获取标签所有class值并返回一个数组 console.log(div.classList[0]); // div4 div.classList.add('hide'); // 添加标签的一个class值 console.log(div.className); // div4 div5 hide div.classList.remove('hide'); // 删除标签的一个class值 console.log(div.className); // div4 div5 </script> </body> </html>