今天学到的是关于如果使用函数来实现对节点的增删改查，主要是增删改
增加标签：
creatElement（name） 创建元素
appenChild（） 进行元素添加
删除标签：
removeChild（）
上面说到的这三个方法，调用方法的对象都是父集节点标签
先直接写一个案例吧，设定两个div标签，通过设定两个button，一个进行增加，一个进行删除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ width:2000px; height: 200px; background-color: darkmagenta; } .div2{ width: 2000px; height: 200px; background-color: aqua; } </style> </head> <body> <div class="div1"> <button onclick="add()">add</button> </div> <div class="div2"> <button onclick="del()">del</button> </div> <script> var father = document.getElementsByClassName('div1')[0] function add() { var ele = document.createElement('p'); ele.innerHTML="<h1>hello p</h1>"; father.appendChild(ele); } function del() { var ele = document.getElementsByTagName('p')[0] if (ele){father.removeChild(ele)} } </script> </body> </html>
接着是关于属性的修改问题，有两种方法：
第一种方式:
使用上面增和删结合完成修改
第二中方式:
使用setAttribute();方法修改属性
使用innerHTML属性修改元素的内容
拿刚才增加过程中为例，我们对增加的标签进行css属性设置，标签属性设置
function add() { var ele=document.createElement("p");//<p></p> ele.innerHTML="<h1>hello p</h1>"; 常用的，但不属于DOM语言，不正统 //ele.innerText="<h1>hello p</h1>"; ele.style.color="red"; ele.style.fontSize="10px"; var father=document.getElementsByClassName("div1")[0]; father.appendChild(ele) }
下面是一个比较详细的介绍：
<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属性的一些方法吧
改变 HTML 内容
改变元素内容的最简答的方法是使用 innerHTML ，innerText。
innerHTML可以识别引号内的<p>这一类的标签内容
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
classList.add( newClassName )；
添加新的类名，如已经存在，取消添加
classList.contains( oldClassName );
确定元素中是否包含指定的类名，返回值为true 、false；
classList.remove( oldClassName )；
移除已经存在的类名;
classList.toggle( className )；
如果classList中存在给定的值，删除它，否则，添加它；
classList.replace( oldClassName，newClassName )；
类名替换
然后下面是一个习题，我们通过对标签的增删改查，实现我们经常在登录网页时，点击登录，中间会出现悬浮框的效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .content{ height: 1800px; background-color: white; } .shade{ position: fixed; top:0; left: 0; right: 0; bottom: 0; background-color: gray; opacity: 0.7; } .model{ width: 200px; height: 200px; background-color: bisque; position: absolute; top:50%; left: 50%; margin-top: -100px; margin-left: -100px; } .hide{ display: none; } </style> </head> <body> <div class="content"> <button onclick="show()">show</button> </div> <div class="shade hide"></div> <div class="model hide"> <button onclick="cancel()">cancel</button> </div> <script> function show() { var ele_shade=document.getElementsByClassName("shade")[0]; var ele_model=document.getElementsByClassName("model")[0]; ele_model.classList.remove("hide"); ele_shade.classList.remove("hide"); } </script> </body> </html>
下面这个悬浮框还缺少取消的功能，明天实现。