07.【HTML DOM】

标签体的设置和获取:innerHTML

代码1:

<body>
    <img id="light" src="img/off.gif" alt="off">
    <script>
       // 1.通过id获取元素对象
        var light = document.getElementById("light");
        alert("我要换图片了。。。");
        // 设置属性值
        light.src = "img/on.gif";        
    </script>
</body>

代码2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTMLDOM</title>
</head>
<body>
 <div id="div1">
     div
 </div>
 <script>
    var div = document.getElementById("div1");
    var view = div.innerHTML;
    // alert(view);
    // div 中替换一个文本输入框
    // div.innerHTML = "<input type='text'>";
    // div 中追加一个文本为输入框
    div.innerHTML += "<input type='text'>";
 </script>
</body>
</html>

使用html元素对象的属性控制元素样式

  1. 用元素的style属性来设置,适用于样式较少的情况
<body>
    <div id="div1">
        div
    </div>
    <script>
        var div1 = document.getElementById("div1");
        div1.onclick =  function () {
            // 设置样式方式1
            div1.style.border = "1px solid red";

            div1.style.width = "200px";

            // font-size ---> fontSize
            div1.style.fontSize = "50px";
        }       
    </script>
</body>
  1. 提前定义好类选择器的样式,通过元素的className属性来设置其class属性值,适用于样式较多的情况
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制样式</title>

    <style>
        .d1{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .d2{
            border: 1px solid blue;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="div2">
        div
    </div>
    <script>        
        var div2 = document.getElementById("div2");
        div2.onclick =  function () {
            // 设置样式方式2
            div2.className = "d1";
        }
    </script>
</body>
</html>

案例:动态表格

<!DOCTYPE html>
<html lang="en">
<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);">删除</a></td>
    </tr>

    <tr>
        <td>2</td>
        <td>任我行</td>
        <td></td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>

    <tr>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);" >删除</a></td>
    </tr>
</table>
<script>
	/*
     删除方法
     1. 确定点击的是哪一个超链接
     2.怎么删除?
     	removeChild():通过父节点删除子节点
    */
    function delTr(obj) { // this代表当前超链接的对象obj
        //alert(obj);
        // table -- tr -- td -- a
        var table = obj.parentNode.parentNode.parentNode; 
        // tr -- td -- a
        var tr = obj.parentNode.parentNode;

        table.removeChild(tr);
    }
</script>
</body>
</html>

添加方法

  1. 给添加按钮绑定单击事件
  2. 创建td,设置td的文本为文本框的内容。
  3. 将td添加到tr中,tr添加到table中

第一种方法:通过dom操作完成

<script>

		
    // 1. 加按钮绑定单击事件
    document.getElementById("btn_add").onclick = function() {
        // 2.获取文本框内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        // 3.创建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");
        // 创建a标签
        var ele_a = document.createElement("a");

        // 4.创建 tr
        var tr = document.createElement("tr");

        // a标签设置属性
        ele_a.setAttribute("href","javascript:void(0);");
        ele_a.setAttribute("onclick","delTr(this);");

        // 创建文本内容
        var text_a = document.createTextNode("删除");
        ele_a.appendChild(text_a);
        td_a.appendChild(ele_a);

        // 5.添加 td 到 tr 中
        tr.appendChild(td_id);
        tr.appendChild(td_name);
        tr.appendChild(td_gender);
        tr.appendChild(td_a);

        // 6.获取 table
        var table = document.getElementsByTagName("table")[0];
        table.appendChild(tr);

    }
    	
</script>

第二种方法:使用 innerHTML 添加表格

<script>
    document.getElementById("btn_add").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>\n" +
            "        <td>"+name+"</td>\n" +
            "        <td>"+gender+"</td>\n" +
            "        <td><a href=\"javascript:void(0);\" οnclick=\"delTr(this);\">删除</a></td>\n" +
            "    </tr>";

    }
</script>
发布了35 篇原创文章 · 获赞 3 · 访问量 3061
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览