• DOM节点操作


    document.write("<h1>You are my sunshine</h1>");

    可以用创建节点,但是如果:对DOMContentLoaded事件的处理采用标准的事件绑定方式进行绑定,就会影响原来的网页布局。所以,不能使用该方式创建节点。

      <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="js/domready.js"></script><!--必须导入该文件,搜狗输入domready.js-->
        <script>
           myReady(function(){
            var container=document.getElementById('container');//获取对象
            console.log(container.textContent);//所有的文本内容都会被拼接起来。
            container.textContent="<p>You are my sumshime!</p>";//这里的p标签会被当做是文本内容,而不是文本节点。
            });
        </script>
    </head>
    <body>
        <div id="container">我爱你
            <ul>
                <li>我爱你</li>
                <li>我爱你</li>
            </ul>
        </div>
    </body>
    </html>
    ===========其他浏览器支持innerText,firefox支持textContent=============
        -------上面只需要把innerText换成textContent火狐即可支持-----------
    console.log(container.innerText);//所有的文本内容都会被拼接起来。
    显示如下:
    我爱你
    我爱你
    我爱你

    container.innerText="<p>You are my sumshime!</p>";
    //这里的p标签会被当做是文本内容,而不是文本节点。审查元素结构显示如下:
    <div id="container">&lt;p&gt;You are my sumshime!&lt;/p&gt;</div>
    文本显示:<p>You are my sumshime!</p>  这里的是文本内容,不是元素节点。
    -----------------



    ====================================
    以下是兼容所有浏览器,html元素获取内容和设置内容的通用方法:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="js/domready.js"></script><!--必须导入该文件,搜狗输入domready.js-->
        <script>
           myReady(function(){
                var container=document.getElementById('container');//获取对象
                /**
                 * 兼容所有浏览器获取对象内容
                 * @param  {object} element 获取内容的对象
                 * @return {对象的属性}         对象的文本内容
                 */
                function getInnerText(element){
                    return typeof (element.textContent == "string") ? element.textContent : element.innerText;
                }

                /**
                 * 兼容所有浏览器设置对象的内容
                 * @param {object} element 需要设置内容的对象
                 * @param {字符串} text    文本内容
                 */
                function setInnerText(element,text){
                    if (typeof element.textContent == "string") {
                        element.textContent=text;
                    }else{
                        element.innerText=text;
                    }
                }
                console.log(getInnerText(container));
                setInnerText(container,"hello world!");//设置container的文本内容,覆盖之前的所有内容。
            });
        </script>
    </head>
    <body>
        <div id="container">我爱你
            <ul>
                <li>我爱你</li>
                <li>我爱你</li>
            </ul>
        </div>
    </body>
    </html>

    ==========================
    container.outerText="<p> you are my sumshime!";//用于覆盖整个对象及其内容,不支持火狐浏览器,一般不怎么使用,了解即可。

        经测试:container.innerText="You are my sumshime!";只有 IE 5 7 8不支持。其他浏览器最新版本都支持,旧的版本就有可能不支持了,所以还是建议使用兼容性方法。
        是否支持是这样的。
        var container=document.getElementById("container");//获得标签对象。
        container.innerText=="You are my sumshime!";  如果支持:修改container对象里面的内容,其类型是:string,不支持返回的类型是:undefined。
        container.textContent=="You are my sumshime!"; 如果支持:修改container对象里面的内容,其类型是:string,不支持返回的类型是:undefined。
        所以这里可以使用:
        typeof(container.innerText=="string")  支持:返回string类型,不支持返回:undefined.
        typeof(container.textContent=="string")  支持:返回string类型,不支持返回:undefined.

        可以封装成一个函数:
        /**
         * 获取对象里面的内容
         * @param  {object} element html标签对象
         * @return {string}         标签里面的内容
         */
        function getInnerText(element){
            return container.innerText=="string"?container.innerText:container.textContent;
        }
        
        /**
         * 设置标签对象里面的内容
         * @param {object} element 需要要设置内容的标签
         * @param {string} text    标签里面的内容
         */
        function setTextContent(element,text){
            return container.innerText=="string"?container.innerText=text:container.textContent=text;
        }

    ==============outerText===================
        <script src="js/domready.js"></script><!--必须导入该文件,搜狗输入domready.js-->
        <script>
           myReady(function(){
            /*******outerText,IE5 7 8 都支持,就是不支持firefox*********/
                var container=document.getElementById('container');
                /**
                 * 获取对象以及对象里面的所有内容
                 * @param  {html对象} element html标签
                 * @return {string}         对象以及对象里面的所有内容
                 */
                function getOuterText(element){
                    return element.outerText;
                }

                /**
                 * 覆盖整个对象以及里面所有内容
                 * @param {html对象} element html标签
                 * @param {string} text    覆盖对象的内容
                 */
                function setOuterText(element,text){
                    return element.outerText=text;
                }
                alert(getOuterText(container));
                alert(setOuterText(container,"You are my sumshime!"));
           })
        </script>
    </head>
    <body>
        <div id="container">我爱你
            <ul>
                <li>我爱你</li>
                <li>我爱你</li>
            </ul>
        </div>
    </body>
    </html>

    container=document.getElementById("div1);

    container.outerHTML="<p>You are my sumshime!</p>";   //outerHTML是把整个container以及子元素里面的所有内容都替换掉。

  • 相关阅读:
    tensorflow实践学习一
    计算CPU的MIPS
    计算机原理一
    SecureCRT连接虚拟机失败及虚拟机ping不通外网
    03.os
    02.random
    01.time
    01.面试过程中其他问题
    06.秒杀系统架构
    05.项目并发分析
  • 原文地址:https://www.cnblogs.com/Knowledge-is-infinite/p/10806636.html
Copyright © 2020-2023  润新知