JavaScript个人学习笔记（六）

最新推荐文章于 2024-04-28 17:32:11 发布

Roxannekkk

最新推荐文章于 2024-04-28 17:32:11 发布

阅读量104

点赞数

分类专栏：知识点总结

本文链接：https://blog.csdn.net/weixin_44774255/article/details/109562519

版权

知识点总结专栏收录该内容

64 篇文章 0 订阅

订阅专栏

HtmlDOM（HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准）

1.标签体的设置和获取：innerHTML
2.使用html元素对象的属性
3.控制元素样式
	1.使用元素的style属性来设置
	如：（每一个元素都有style属性）
		 //修改样式方式1
        div1.style.border="1px solid pink";
        div1.style.width="100px";
        div1.style.height="100px";
        div1.style.textAlign="center";

        
        //font-size-->fontSize
        div1.style.fontSize="20px";
    2.提前定义好类选择器的样式，通过元素的className属性来设置其class属性值（更常用，阅读性高）

利用innerhtml来实现动态表格中的添加操作，与之前对于对象的操作相比，简化许多。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border: 1px solid rgb(45, 43, 201);
            margin:auto;
            width: 500px;
        }
        td,tr{
           text-align: center;
           border:1px solid; 
        }
        div{
            color: skyblue;
            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="btnadd">

    </div>
    <table>
        <caption>学生信息表</caption>
        <tr>
            <td><b>编号</b></td>
            <td><b>姓名</b></td>
            <td><b>性别</b></td>
            <td><b>操作</b></td>
        </tr>
        <tr>
            <td>1</td>
            <td>Roxanne</td>
            <td>女</td>
            <td><a href="javascript:void(0);"οnclick="deltr(this)">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>Charles</td>
            <td>女</td>
            <td><a href="javascript:void(0); " onclick="deltr(this)">删除</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>Xanax</td>
            <td>男</td>
            <td><a href="javascript:void(0);"οnclick="deltr(this)">删除</a></td>
        </tr>
    </table>
    <script>
        /*
            分析：
            1.添加；
                1.给添加按钮绑定单击事件
                2.获取文本提取内容
                3.创建td 设置td的文本为文本框的内容
                4.创建tr
                5.将td添加到tr中
                6.获取table，将tr添加到table中
            2.删除：
                1.确定点击的是哪一个超链接
                    <a href="javascript:void(0); " οnclick="deltr(this)"></a>
                2.删除
                removeChild() 通过父节点删除子节点
        
        */
        //使用innerhtml来添加
        var btnadd=document.getElementById("btnadd");
        btnadd.onclick=function(){
            
            //2.获取文本提取内容
            var id=document.getElementById("id").value;
            var name=document.getElementById("name").value;
            var gender=document.getElementById("gender").value;
            //获取table
            var table=document.getElementsByTagName("table")[0];
            //追加一行
            table.innerHTML+="<tr>\n"+
            "<td>"+id+"</td>"+
            "<td>"+name+"</td>"+
            "<td>"+gender+"</td>"+
            "<td><a href='javascript:void(0);'οnclick='deltr(this)'>删除</a></td>"+
            "</tr>"
        }

        

        //删除方法
        function deltr(obj){//形式参数obj（随便定义的）用来接收传递的this，this代表当前超链接的对象
            
            //alert(obj);
            var table=obj.parentNode.parentNode.parentNode;
            var tr=obj.parentNode.parentNode;
            table.removeChild(tr);
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div1">
        div
    </div>
    <script>
        var div=document.getElementById("div1");
        var innerhtmml=div.innerHTML;
        //alert(innerhtmml);
        //div标签中替换一个文本输入框
        //div.innerHTML="<input type='text'>";
        //div标签中追加一个文本输入框
        div.innerHTML+="<input type='text'>";
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
       .d1{
           border:1px solid springgreen;
           width: 100px;
           height: 100px;
       } 
      .d2{
           border:1px solid red;
           width: 200px;
           height: 200px;
           text-align: right;
       }
    </style>
</head>
<body>
    <div id="div1">
        div1
    </div>
    <div id="div2">
        div2
    </div>
<script>
    var div1=document.getElementById("div1");
    div1.onclick=function(){
        //修改样式方式1
        div1.style.border="1px solid pink";
        div1.style.width="100px";
        div1.style.height="100px";
        div1.style.textAlign="center";

        
        //font-size-->fontSize
        div1.style.fontSize="20px";
    }
    var div2=document.getElementById("div2");
    div2.onclick=function(){
        //修改样式方式2
        div2.className="d1";
    }
</script>
</body>
</html>

Roxannekkk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript个人学习笔记（六）

HtmlDOM（HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准）1.标签体的设置和获取：innerHTML2.使用html元素对象的属性3.控制元素样式 1.使用元素的style属性来设置如：（每一个元素都有style属性） //修改样式方式1 div1.style.border="1px solid pink"; div1.style.width="100px"; div1.style.height="100px"
复制链接

扫一扫