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以及子元素里面的所有内容都替换掉。

  • 相关阅读:
    linux 文件搜索
    解决android 无法打开 DDMS 中的data目录
    JAVA 截图+tess4j识别
    JAVA 获取网页源代码保存到本地文件
    java连接sqlserver数据简单操作
    SQL server 2008 安装提示:属性不匹配
    SQLServer 安装提示需要重启计算机的解决方案
    Android蓝牙----打开,关闭操作
    JAVA中String类的比较
    Android中的AlertDialog和ProgressDialog用法
  • 原文地址:https://www.cnblogs.com/Knowledge-is-infinite/p/10806636.html
Copyright © 2011-2022 走看看