js入门之DOM动态创建数据

一. 知识点回顾

　　1. DOM结构

nodeName: '' 标签名
nodeType: '' 类型  1元素节点  2属性节点  3文本节点
nodeValue: '' 如果是元素节点 nodeValue的值始终是null;

　　2. 节点分类

节点的分类
属性节点 元素节点 文本节点 注释节点
nodeType 为1 时 就是元素节点

　　案例: 查找子节点

<script>
        var box = document.getElementById("box");
        console.log(box.childNodes);
        for (var i = 0; i < box.childNodes.length; i++) {
            var node = box.childNodes[i];
            if (node.nodeType === 1) {
                console.log(node);
            }
        }
</script>

View Code

二. 节点介绍及应用

parentNode  查找父节点 (父节点只有一个)
childNodes  查找子节点 (子节点有多个)
hasChildNodes 判断是否有子节点
children 获取所有的子元素
firstChild 获取第一个子节点
lastChild 获取最后一个子节点
firstElementChild 获取第一个子元素
lastElementChild 获取最后一个子元素  有兼容性问题
nextSibling 获取下一个兄弟节点
previousSibling 获取上一个兄弟节点
nextElementSibling 获取下一个兄弟元素
previousElementSibling 获取上一个兄弟元素

三. 动态创建元素三种方式

1. document.write() 问题会把之前的整个页面覆盖掉，不能在事件中使用

    <input type="button" value="按钮" id="btn">
    <script>
        var btn = document.getElementById('btn');
        btn.onclick = function () {
            document.write('Hello <p>World</p>')
        }
        
    </script>

2. element.innerHTML 在这里会有效率问题因为涉及到了重绘页面

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" value="按钮" id="btn">
    <div id="box"></div>
    <script>
        var datas = ['西施','貂蝉','凤姐','芙蓉姐姐'];
        var btn = document.getElementById('btn');
        btn.onclick = function () {
            var box = document.getElementById('box');
            box.innerHTML = '<ul>';
                for (var i = 0; i < datas.length; i++) {
                    var data = datas[i];
                    box.innerHTML += '<li>' + data + '</li>';
                }
            box.innerHTML += '</ul>'
        }
    </script>
</body>
</html>

优化1

<input type="button" value="按钮" id="btn">
    <div id="box"></div>
    <script>
        var datas = ['西施','貂蝉','凤姐','芙蓉姐姐'];
        var btn = document.getElementById('btn');
        btn.onclick = function () {
            var box = document.getElementById('box');
            var html = '<ul>';
                for (var i = 0; i < datas.length; i++) {
                    var data = datas[i];
                    html += '<li>' + data + '</li>';
                }
            html += '</ul>';
            box.innerHTML = html;
        }
    </script>

View Code

优化2

<input type="button" value="按钮" id="btn">
    <div id="box"></div>
    <script>
        var datas = ['西施','貂蝉','凤姐','芙蓉姐姐'];
        var btn = document.getElementById('btn');
        btn.onclick = function () {
            var box = document.getElementById('box');
            var array = [];
            array.push('<ul>');
                for (var i = 0; i < datas.length; i++) {
                    var data = datas[i];
                    array.push('<li>' + data + '</li>');
                }
            array.push('</ul>');
            box.innerHTML = array.join('');
        }
    </script>

View Code

3. document.creatElement() 推荐使用

<div id="box"></div>
    <script>
        // 在内存中创建一个DOM对象
        var p = document.createElement('p');
        // 设置对象的属性
        p.innerText = 'hello';
        p.style.color = 'red';
        // 把p元素 放到DOM树上
        var box = document.getElementById('box');
        box.appendChild(p);
    </script>

案例动态创建表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box table {
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <div id='box'></div>
    <script src="common.js"></script>
    <script>
        var headDatas = ['姓名','科目','成绩','操作'];
    var datas = [
      {name: 'zs', subject: '语文', score: 90},
      {name: 'ls', subject: '数学', score: 80},
      {name: 'ww', subject: '英语', score: 99},
      {name: 'zl', subject: '英语', score: 100},
      {name: 'xs', subject: '英语', score: 60},
      {name: 'dc', subject: '英语', score: 70}
    ];
             
        
        // 创建table元素
        
        var table = document.createElement('table');
        my$('box').appendChild(table);
        table.border = '1px';
        table.width = '400px';
        
        // 创建表头
        var thead = document.createElement('thead');
        table.appendChild(thead);
        var tr = document.createElement('tr');
        thead.appendChild(tr);
        tr.style.height = '40px';
        tr.style.backgroundColor = 'lightgray';

        for (var i = 0; i < headDatas.length; i++) {
            var th = document.createElement('th');
            tr.appendChild(th);

            setInnerText(th, headDatas[i]);
        }
        // 创建数据行

        var tbody = document.createElement('tbody');
        table.appendChild(tbody);
        tbody.style.textAlign = 'center';
        for (var i = 0; i < datas.length; i++) {
            var data = datas[i];
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            
            for (var key in data) {
                var td = document.createElement('td');
                tr.appendChild(td);
                setInnerText(td, data[key]);

            }
            // 生成删除的对应列
            var td = document.createElement('td');
            tr.appendChild(td);
            var link = document.createElement('a');
            td.appendChild(link);
            link.href = 'javascript:void(0)';
            setInnerText(link, '删除')

            link.onclick = linkDelete;

        }
        function linkDelete() {
            var tr = this.parentNode.parentNode;
            tbody.removeChild(tr); 
            return false;
        }
    </script>
</body>
</html>

View Code

四. 常用的元素操作方法

创建元素操作方法
createElement()
appendChild()
removeChild()

insertBefor() 把元素插入到页面的指定位置
replaceChild() 把当前元素标签进行替换

posted @ 2019-12-09 18:34 ivy_wang 阅读(727) 评论(0) 编辑收藏举报

刷新页面返回顶部

ivy_wang

js入门之DOM动态创建数据

公告