zoukankan      html  css  js  c++  java
  • 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以及子元素里面的所有内容都替换掉。

  • 相关阅读:
    【codecombat】 试玩全攻略 第二章 边远地区的森林 一步错
    【codecombat】 试玩全攻略 第十八关 最后的kithman族
    【codecombat】 试玩全攻略 第二章 边远地区的森林 woodlang cubbies
    【codecombat】 试玩全攻略 第二章 边远地区的森林 羊肠小道
    【codecombat】 试玩全攻略 第十七关 混乱的梦境
    【codecombat】 试玩全攻略 第二章 边远地区的森林 林中的死亡回避
    【codecombat】 试玩全攻略 特别关:kithguard斗殴
    【codecombat】 试玩全攻略 第二章 边远地区的森林 森林保卫战
    【codecombat】 试玩全攻略 第二章 边远地区的森林
    实验3 类和对象||
  • 原文地址:https://www.cnblogs.com/Knowledge-is-infinite/p/10806636.html
Copyright © 2011-2022 走看看