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>
复制代码
posted @   baimingze  阅读(64)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
点击右上角即可分享
微信分享提示