DOM_Element元素对象和Node节点对象
Element元素对象
1.获取/创建:通过document来获取和创建
2.方法:
- removeAttribute():删除属性
- setAttribute():设置属性
HTML代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Element元素对象</title> </head> <body> <a>点我试一试</a> <input type="button" id="btn_set" value="设置属性"> <input type="button" id="btn_remver" value="删除属性"> <script> var btn_set = document.getElementById("btn_set"); btn_set.onclick=function(){ var element_a=document.getElementsByTagName("a")[0]; element_a.setAttribute("href","https://www.cnblogs.com/"); } var btn_remver = document.getElementById("btn_remver"); btn_remver.onclick=function(){ var element_a=document.getElementsByTagName("a")[0]; element_a.removeAttribute("href"); } </script> </body> </html>
运行结果
Node节点对象
特点:所有dom对象都可以被认为是一个节点
方法:
- CRUD dom树
- appendChild():向节点的子节点列表的结尾添加新的子节点
- removeChild():删除(并返回)当前节点的指定子节点
- replaceChild():用新节点替换一个子节点
属性
- parentNode 返回节点的父节点
HTML代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Node节点对象</title> <style type="text/css"> div{ border:1px solid red; } #div1{ width:200px; height:200px; } #div2{ width:100px; height:100px; } #div3{ width:100px; height:100px; border:1px solid red; } </style> </head> <body> <div id="div1"> <div id="div2">div2</div> div1 </div> <a href="javascript:void(0);" id="del">删除子节点</a> <a href="javascript:void(0);" id="add">添加子节点</a> <!-- <input type="button" id="del" value="删除字节点"> --> <script> var element_a = document.getElementById("del"); element_a.onclick=function(){ var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); div1.removeChild(div2); } var element_add = document.getElementById("add"); element_add.onclick=function(){ var div1 = document.getElementById("div1"); var div3 = document.createElement("div"); div3.setAttribute("id","div3"); div1.appendChild(div3); } </script> </body> </html>
运行结果
案例-动态表格-添加
分析:
1.给添加按钮绑定单击事件
2.获取文本框的内容
3.创建td 设置td的文本为文本框的内容
4.创建tr
5.将td添加到tr中
6.获取table 将tr添加到table中
HTML代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态表格</title> <style> table{ border:1px solid; margin:auto; width:500px; } td,th{ text-align:center; border:1px solid; } div{ text-align:center; margin:50px; } </style> </head> <body> <div> <input type="text" id="id" placeholder="请输入编号"> <input type="text" id="name" placeholder="请输入姓名"> <input type="text" id="gender" placeholder="请输入性别"> <input type="button" value="添加" id="btn_add"> </div> <table> <caption>学生信息表</caption> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <tr> <td>1</td> <td>令狐冲</td> <td>男</td> <td><a href="javascript:void(0);">删除</td> </tr> <tr> <td>2</td> <td>任我行</td> <td>男</td> <td><a href="javascript:void(0)">删除</td> </tr> <tr> <td>3</td> <td>岳不群</td> <td>?</td> <td><a href="javascript:void(0)">删除</td> </tr> </table> <script> document.getElementById("btn_add").onclick=function(){ //获取文本框的内容 var id = document.getElementById("id").value; var name=document.getElementById("name").value; var gender=document.getElementById("gender").value; //创建td 赋值td的标签体 //id的td var td_id = document.createElement("td"); var text_id =document.createTextNode(id); td_id.appendChild(text_id); //name 的td var td_name = document.createElement("td"); var text_name=document.createTextNode(name); td_name.appendChild(text_name); //gender的td var td_gender = document.createElement("td"); var text_gender = document.createTextNode(gender); td_gender.appendChild(text_gender) //a标签的td var td_a = document.createElement("td"); var ele_a = document.createElement("a"); ele_a.setAttribute("href","javascript:void(0);") var text_a = document.createTextNode("删除"); ele_a.appendChild(text_a); td_a.appendChild(ele_a); //创建tr var tr = document.createElement("tr"); //添加td到tr中 tr.appendChild(td_id); tr.appendChild(td_name); tr.appendChild(td_gender); tr.appendChild(td_a); //获取table var table = document.getElementsByTagName("table")[0]; table.appendChild(tr); } </script> </body> </html>
运行结果
案例-动态表格-删除
分析
1.确定点击的是哪一个超链接
- <a href="javascript:void(0);" onclick="delTr(this)">删除</td>
2.这么删除
- remove():通过父节点删除子节点
HTML代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态表格</title> <style> table{ border:1px solid; margin:auto; width:500px; } td,th{ text-align:center; border:1px solid; } div{ text-align:center; margin:50px; } </style> </head> <body> <div> <input type="text" id="id" placeholder="请输入编号"> <input type="text" id="name" placeholder="请输入姓名"> <input type="text" id="gender" placeholder="请输入性别"> <input type="button" value="添加" id="btn_add"> </div> <table> <caption>学生信息表</caption> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <tr> <td>1</td> <td>令狐冲</td> <td>男</td> <td><a href="javascript:void(0);" onclick="delTr(this)">删除</td> </tr> <tr> <td>2</td> <td>任我行</td> <td>男</td> <td><a href="javascript:void(0)" onclick="delTr(this)">删除</td> </tr> <tr> <td>3</td> <td>岳不群</td> <td>?</td> <td><a href="javascript:void(0)" onclick="delTr(this)">删除</td> </tr> </table> <script> //删除方法 function delTr(obj){ var table = obj.parentNode.parentNode.parentNode; var tr=obj.parentNode.parentNode; table.removeChild(tr); } </script> </body> </html>
运行结果
添加和删除动态表格HTML代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态表格</title> <style> table{ border:1px solid; margin:auto; width:500px; } td,th{ text-align:center; border:1px solid; } div{ text-align:center; margin:50px; } </style> </head> <body> <div> <input type="text" id="id" placeholder="请输入编号"> <input type="text" id="name" placeholder="请输入姓名"> <input type="text" id="gender" placeholder="请输入性别"> <input type="button" value="添加" id="btn_add"> </div> <table> <caption>学生信息表</caption> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <tr> <td>1</td> <td>令狐冲</td> <td>男</td> <td><a href="javascript:void(0);" onclick="delTr(this)">删除</td> </tr> <tr> <td>2</td> <td>任我行</td> <td>男</td> <td><a href="javascript:void(0)" onclick="delTr(this)">删除</td> </tr> <tr> <td>3</td> <td>岳不群</td> <td>?</td> <td><a href="javascript:void(0)" onclick="delTr(this)">删除</td> </tr> </table> <script> document.getElementById("btn_add").onclick=function(){ //获取文本框的内容 var id = document.getElementById("id").value; var name=document.getElementById("name").value; var gender=document.getElementById("gender").value; //创建td 赋值td的标签体 //id的td var td_id = document.createElement("td"); var text_id =document.createTextNode(id); td_id.appendChild(text_id); //name 的td var td_name = document.createElement("td"); var text_name=document.createTextNode(name); td_name.appendChild(text_name); //gender的td var td_gender = document.createElement("td"); var text_gender = document.createTextNode(gender); td_gender.appendChild(text_gender) //a标签的td var td_a = document.createElement("td"); var ele_a = document.createElement("a"); ele_a.setAttribute("href","javascript:void(0);") var text_a = document.createTextNode("删除"); ele_a.appendChild(text_a); td_a.appendChild(ele_a); //创建tr var tr = document.createElement("tr"); //添加td到tr中 tr.appendChild(td_id); tr.appendChild(td_name); tr.appendChild(td_gender); tr.appendChild(td_a); //获取table var table = document.getElementsByTagName("table")[0]; table.appendChild(tr); } //删除方法 function delTr(obj){ var table = obj.parentNode.parentNode.parentNode; var tr=obj.parentNode.parentNode; table.removeChild(tr); } </script> </body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~