js中的createElement（tagName）疑问

Posted 2023-05-08

为什么createElement（tagName）在使用的时候，直接用document.createElement(tagName);就行了，而insertBefore()和appendChild()等需要document.body调用才好使用呢？有什么讲究呢，还有什么函数是直接用document直接调用的？

参考技术A document.body 并不是document对象，而是html element对象。
也就是说，createElement是document对象的方法，而insertBefore是html element对象的方法。

你可以认为document.body是引用boyd元素的一种快捷方式，即document.body.insertBefore()等同于document.getElementsByTagName('body')[0].insertBefore()

明白了？

你可以使用调试工具检查document对象提供的方法和属性信息。追问

document.documentElement.scrollTop;
那么可以直接用document.scrollTop这种形式吗，document是DOM的顶级对象啊

追答

你可以认为documentElement是document的属性成员。属性可以是对象，而且对象的属性并不会保持和对象本身具有相同的类型，明白？

参考技术B 你好，createElement是DOM中document下的一个方法，它功能是创建一个文档节点，但是该节点并没有插入到文档流中，只在于浏览器进程的内存中。

关于document对象的属性和方法更多介绍可以参考这里：http://www.w3school.com.cn/xmldom/dom_document.asp和这里http://www.w3school.com.cn/htmldom/dom_obj_document.asp本回答被提问者采纳

利用构造函数创建表格

1. 构建基本逻辑 添加属性

<script>
    function cTag( tagName ) {
        return document.createElement( tagName );
    }

    function Table() {
        /* 实际上在调用这个构造函数的时候，应该利用 DOM 方法
         * 创建相应的 table 标签与 tbody 标签 */
        this.DOM = cTag( ‘table‘ );
        this.DOM.appendChild( cTag( ‘tbody‘ ) );
    }

    var t = new Table();
    /* 在开发中有一个原则，就是尽量不去修改原生的对象 */
    document.body.appendChild( t.DOM );

</script>

2. 添加功能，设置宽高

<script>
    function cTag( tagName ) {
        return document.createElement( tagName );
    }

    function Table( width, border ) {
        this.DOM = cTag( ‘table‘ );
        this.DOM.appendChild( cTag( ‘tbody‘ ) );

        this.DOM.width = width;
        this.DOM.border = border;

        this.width = function( w ) {
            this.DOM.width = w;
        }

        this.border = function( border ) {
            this.DOM.border = border;
        }
    }

        var t = new Table( 400, 5 );
    //    t.width( 400 );
    //    t.border( 1 );
        document.body.appendChild( t.DOM );

</script>

3. 利用 json 对象提供参数

由于属性非常多, 但是没有直接的方法去控制用户输入什么 而且 HTML 标签是支持用户自定义属性的. 构造函数的参数就没有办法控制了. 利用 json 对象提供参数

<script>
        function cTag( tagName ) {
            return document.createElement( tagName );
        }
        function Table( option ) {
            var table = cTag( ‘table‘ );
            /* 利用 for in 循环获得 option 中所有的属性名 */
            for ( var k in option ) {
                // table[ k ] = option[ k ];   给对象添加属性
                table.setAttribute( k, option[ k ] );   // 给标签添加属性
            }
            this.DOM = table;
            table.appendChild( cTag( ‘tbody‘ ) );
        }
        var t = new Table( { width: 400, border: 1, jepson: ‘JepsonName‘});
        document.body.appendChild( t.DOM );
</script>

4. 创建 Tr, Td 对象

<script>
    function cTag( tagName ) {
        return document.createElement( tagName );
    }
    function Table( option ) {
        var table = cTag( ‘table‘ );
        /* 利用 for in 循环获得 option 中所有的属性名 */
        for ( var k in option ) {
            // table[ k ] = option[ k ];   给对象添加属性
            table.setAttribute( k, option[ k ] );   // 给标签添加属性
        }

        this.DOM = table;
        table.appendChild( cTag( ‘tbody‘ ) );

        this.add = function( tr ) {
            // 将 tr 标签添加到 table 标签中
            table.lastChild.appendChild( tr );
        }
    }

    /* 定义 tr */
    function Tr() {
        this.DOM = cTag( ‘tr‘ );
        this.add = function( td ) {
            this.DOM.appendChild( td );
        }
    }

    /* 定义 td */
    function Td( value, option ) {
        var td = cTag( ‘td‘ );
        this.DOM = td;
        for ( var k in option ) {
            td.setAttribute( k, option[ k ] );
        }
        td.innerHTML = value;
    }

    /* 测试数据 */
    var t = new Table( { width: 400, border: 1, jepson: ‘JepsonName‘});

    /* 测试 tr */
    var tr = new Tr();
    t.add( tr.DOM );

    /* 测试 td */
    var td = new Td( 123, { border:1, testTd: ‘testTd‘ } );
    tr.add( td.DOM );

    document.body.appendChild( t.DOM );
</script>

5. 完整的创建一个表格

<script>
    function cTag( tagName ) {
        return document.createElement( tagName );
    }
    /* 表格对象 */
    function Table( option ) {
        var table = cTag( ‘table‘ );
        /* 利用 for in 循环获得 option 中所有的属性名 */
        for ( var k in option ) {
            // table[ k ] = option[ k ];   给对象添加属性
            table.setAttribute( k, option[ k ] );   // 给标签添加属性
        }

        this.DOM = table;
        table.appendChild( cTag( ‘tbody‘ ) );

        this.add = function( tr ) {
            table.lastChild.appendChild( tr );
        }
    }

    /* 定义 tr */
    function Tr() {
        this.DOM = cTag( ‘tr‘ );
        this.add = function( td ) {
            this.DOM.appendChild( td );
        }
    }

    /* 定义 td */
    function Td( value, option ) {
        var td = cTag( ‘td‘ );
        this.DOM = td;
        td.innerHTML = value;
        /* 属性 */
        for ( var k in option ) {
            td.setAttribute( k, option[ k ] );
        }
    }

    /* 表格数据 */
    var arr = [
        { name: ‘jim1‘, age: 19, gender: ‘男‘ },
        { name: ‘jim2‘, age: 18, gender: ‘男‘ },
        { name: ‘jim3‘, age: 20, gender: ‘男‘ },
        { name: ‘jim4‘, age: 18, gender: ‘男‘ }
    ];
    /* 创建表格 */
    var t = new Table( { width: 400, border: 1, jepson: ‘JepsonName‘});

    /* 有多少行数据就创建多少行 */
    for ( var i = 1; i < arr.length; i++ ) {
        /* 创建行，添加行 */
        var tr = new Tr();
        t.add( tr.DOM );
        /* 遍历对象，创建对象，新建 td */
        for ( var k in arr[ i ] ) {
            /* 新建 td 添加 td */
            var td = new Td( arr[ i ][ k ] );
            tr.add( td.DOM );
        }
    }

    /* 将表格渲染到页面中 */
    document.body.appendChild( t.DOM );

</script>