HTMLDOM_innerHTML和HTMLDOM_样式控制()

HTMLDOM_innerHTML:

标签体的设置和获取:innerHTML

 属性可用于获取或替换 HTML 元素的内容。

innerHTML

 属性可用于获取或改变任何 HTML 元素,包括  和 。

innerHTML
<html>
<body>

代码实现:

<head>
    <meta charset="UTF-8">
    <title>HTMLDOM</title>
    
</head>
<body>
    
    <div id="div1">
        传智博客
    </div>

<script>

    let div1 = document.getElementById("div1");
    let innerHTML = div1.innerHTML;//获取标签体内容
    // alert(innerHTML);
    //div标签中替换一个文本输入框
    // div1.innerHTML = "<input type='text'>";
    //div标签中追加一个文本框
    div1.innerHTML += "<input type='text'>";

</script>
</body>

简化动态表格案例:

<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 id="id" type="text" placeholder="请输入编号">
        <input id="name" type="text" placeholder="请输入姓名">
        <input id="gender" type="text" placeholder="请输入性别">
        <input id="btn_add" type="button" value="添加">
    </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>
    /*
       使用innerHTML来实现追加效果
     */
    //1获取按钮
    document.getElementById("btn_add").onclick = function () {
        //2获取文本框的内容
        let id = document.getElementById("id").value;
        let name = document.getElementById("name").value;
        let gender = document.getElementById("gender").value;

        //获取table
        let 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);\" onclick=\"delTr(this);\">删除</a></td>\n" +
            "        </tr>";
    }



    //删除方法
    function delTr(obj){
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;

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

HTMLDOM_样式控制:

使用html元素对象的属性

控制元素样式

1.使用元素的style属性来设置

<script>
    //获取id
    let div1 = document.getElementById("div1");
    //绑定点击事件
    div1.onclick = function (){
        //修改样式方式一
        div1.style.border = "1px solid red";

        div1.style.width = "200px";

        //font-size-->fontSize
        div1.style.fontSize = "20px";
    }
</script>

2.提前定义好类选择器的样式,通过元素的className属性来设置器class属性值

<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>    let div2 = document.getElementById("div2");
    div2.onclick = function (){
        //设置属性值 样式为d2
        div2.className = "d2";
    }

</script>
</body>
————————

HTMLDOM_innerHTML:

标签体的设置和获取:innerHTML

 属性可用于获取或替换 HTML 元素的内容。

innerHTML

 属性可用于获取或改变任何 HTML 元素,包括  和 。

innerHTML
<html>
<body>

代码实现:

<head>
    <meta charset="UTF-8">
    <title>HTMLDOM</title>
    
</head>
<body>
    
    <div id="div1">
        传智博客
    </div>

<script>

    let div1 = document.getElementById("div1");
    let innerHTML = div1.innerHTML;//获取标签体内容
    // alert(innerHTML);
    //div标签中替换一个文本输入框
    // div1.innerHTML = "<input type='text'>";
    //div标签中追加一个文本框
    div1.innerHTML += "<input type='text'>";

</script>
</body>

简化动态表格案例:

<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 id="id" type="text" placeholder="请输入编号">
        <input id="name" type="text" placeholder="请输入姓名">
        <input id="gender" type="text" placeholder="请输入性别">
        <input id="btn_add" type="button" value="添加">
    </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>
    /*
       使用innerHTML来实现追加效果
     */
    //1获取按钮
    document.getElementById("btn_add").onclick = function () {
        //2获取文本框的内容
        let id = document.getElementById("id").value;
        let name = document.getElementById("name").value;
        let gender = document.getElementById("gender").value;

        //获取table
        let 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);\" onclick=\"delTr(this);\">删除</a></td>\n" +
            "        </tr>";
    }



    //删除方法
    function delTr(obj){
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;

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

HTMLDOM_样式控制:

使用html元素对象的属性

控制元素样式

1.使用元素的style属性来设置

<script>
    //获取id
    let div1 = document.getElementById("div1");
    //绑定点击事件
    div1.onclick = function (){
        //修改样式方式一
        div1.style.border = "1px solid red";

        div1.style.width = "200px";

        //font-size-->fontSize
        div1.style.fontSize = "20px";
    }
</script>

2.提前定义好类选择器的样式,通过元素的className属性来设置器class属性值

<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>    let div2 = document.getElementById("div2");
    div2.onclick = function (){
        //设置属性值 样式为d2
        div2.className = "d2";
    }

</script>
</body>