Blogger Information
Blog 7
fans 0
comment 0
visits 4802
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js方法与属性对html元素的常用操作2019年1月18日 14时15分
文俊的博客
Original
584 people have browsed it

实例

主要操作:查找html标签:children[]  添加html标签:appendChild()  parentNode=>上一级html标签,removeChild()删除下一级标签 

firstElementChild :第一个子标签 

var first = ul.firstElementChild   ul.insertBefore(li, first)  在LI标签前添加一个LI标签;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!---Tolist练习--->
    <h3>留言板</h3>

    <input type="text">

    <ul> </ul>


    <script>

        /*    属性
        children = > 获取全部的子元素
        childNodes = >
        childElementCount = >获取子节点数量
        keyCode = >获取按键值
        firstElementChild = >获取第一个子元素
        方法
        querySelector() = >获取满足条件的第一个元素
        appendChild() = >添加一个子节点
        insertBefore() = >在子节点前添加一个节点
        focus() 获取焦点
        */

        var comment = document.querySelector('input');

        var ul = document.getElementsByTagName('ul')[0];

        comment.focus();

        comment.onkeydown = function (a) {

            /*为什么这里的keyCode不能单独使用,非得传个参数给keyCode,如:keyCode === 13会报错*/
            if (a.keyCode === 13) {
                var li = document.createElement('li');

                li.innerHTML = comment.value + '<a href="javascript:;" onclick="del(this)">删除</a>';

                if (ul.childElementCount === 0) {

                    ul.appendChild(li);

                } else {
                    var first = ul.firstElementChild;
                    ul.insertBefore(li, first);

                }

                comment.value = '';

            }

        }
        function del(aabc) {
            if (confirm('确认删除吗?')) {      
                var li = aabc.parentNode;
                li.parentNode.removeChild(li);

            }

        }

    </script>


    <style>
        table,
        th,
        td {
            border: 1px solid lightcoral;
            border-collapse: collapse;
        }

        table {
            width: 400px;
            text-align: center;
        }

        thead {
            background-color: lightskyblue;
        }

        caption {
            font-size: 1.2rem;
            margin-bottom: 9px;
        }

        tbody {
            font-size: 10pt;
        }

        td {
            height: 30px;
        }

        th {
            height: 25px;
        }
    </style>
    <!---表格操作-->

    <table id='tab1'>
        <caption>表格一</caption>
        <thead>
            <tr>
                <th>编号</th>
                <th>品名</th>
                <th>数量</th>
                <th>价格</th>
                <th>总价</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>手机</td>
                <td>1</td>
                <td>3000</td>
                <td>3000</td>
            </tr>
            <tr>
                <td>2</td>
                <td>电脑</td>
                <td>1</td>
                <td>5000</td>
                <td>5000</td>
            </tr>
            <tr>
                <td>3</td>
                <td>衣服</td>
                <td>1</td>
                <td>800</td>
                <td>800</td>
            </tr>
        </tbody>
    </table>

    <script>
        var table = document.getElementById('tab1');

        var tbody = table.children[2];
        var tr = table.children[2].children[0];



        tbody.parentNode.removeChild(tbody);




        var arr = [
            { 'id': 1, 'goods_name': '牛奶', 'count': 3, 'price': 15, 'count_price': 45 },
            { 'id': 2, 'goods_name': '面包', 'count': 5, 'price': 10, 'count_price': 50 },
        ];



        arr.forEach(function (value) {

            var tbody = document.createElement('tbody');
            var tr = document.createElement('tr');

            tr.innerHTML = '<td>' + value.id + '</td>';
            tr.innerHTML += '<td>' + value.goods_name + '</td>';
            tr.innerHTML += '<td>' + value.count + '</td>';
            tr.innerHTML += '<td>' + value.price + '</td>';
            tr.innerHTML += '<td>' + value.count*value.price + '</td>';

            tbody.appendChild(tr);

            table.appendChild(tbody);

        })


    </script>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

 

Correction status:qualified

Teacher's comments:为什么这里的keyCode不能单独使用,非得传个参数给keyCode,如:keyCode === 13会报错、 keyCode的语法就是event.keyCode 如果你前面没有事件或者其他那肯定就会报错啊
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post