DOM--对节点的操作--2019-05-09

简单的用户留言本

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单的用户留言本</title>
</head>
<body>

    <label for="content"> 请留言:</label>
    <input type="text" id="content" onkeydown="addcontent(this)" autofocus>
    <ul id="list"></ul>


    <script>
        function addcontent(content) {
            if (event.keyCode ===13 ){
                //1.创建一个新留言
                var item = document.createElement('li');
                item.innerText = content.value;
                //2.将留言添加到列表中
                // 获取 ul
                var list = document.querySelector('#list');
                if (list.childElementCount === 0) {
                    list.appendChild(item);
                } else {
                    var first = list.firstElementChild;
                    list.insertBefore(item,first);
                }


                //3.清空留言框
                content.value = '';
            }

        }
    </script>
</body>
</html>

运行实例 »

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

创建一个对象数组，以它为表格数据，将期填充到页面中的表格中，动态生成一张表

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作表格的基本技巧</title>
    <style>
        table,th,td{
            border: 1px solid #666;
        }
        table {
            width: 500px;
            text-align: center;
            border-collapse: collapse;
        }
        table caption {
            font-size: 1.2rem;
            margin-bottom: 15px;
        }
        /* 这里必须在nth-of-type(1)前添加父元素,否则thead,tbody中的第一行都会生效 */
        thead tr:nth-of-type(1) {
            background-color: lightblue;
        }

    </style>
</head>
<body>

<table id ='gwc'>
    <caption>购物车</caption>
    <thead>
    <tr>
        <th>编号</th>
        <th>课程</th>
        <th>课时</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>

<script>
    var data = [
        {id: 1, name : 'html' , day : 2},
        {id: 2, name : 'css' , day : 3},
        {id: 3, name : 'javascript' , day : 7}
    ];

    var gwc = document.getElementById('gwc');
    var tbody =gwc.children[2];
    data.forEach(function(value) {
        var tr =document.createElement('tr')
        tr.innerHTML = '<td>' +value.id + '</td>';
        tr.innerHTML += '<td>' +value.name + '</td>';
        tr.innerHTML += '<td>' +value.day + '</td>';
        tbody.appendChild(tr);
    });

</script>
</body>
</html>

运行实例 »

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

学习要点
属性:
children:某个节点下有多少个子节点
childNodes:子节点(复数形式)
childElementCount:统计子元素数量
keyCode:按键对应的编码 13回车要用event.keyCode调用
firstElementChild:第一个子元素
nodeName:节点名称
innerText:添加纯文本也可用append()添加文本
innerHTML:添加标签(带格式)

涉及方法:
creatElement():生成元素
例: var item = document.creatElement(“li”);
querySelector() : 获取名为ID=’XX’的元素
getElementsByTagName():
appendChild():在父节点的尾部添加一个子元素/子节点
list.appendChild(item);简写:list.append(item);
append(): 添加文本,作用同innerText
insertBefore(父对象,子对象): 在父对象中的子对象前插入
简写:prepend():
focus():获得焦点

实例

实例

相关文章