DOM节点操作

最新推荐文章于 2024-05-23 20:55:08 发布

weixin_34214500

最新推荐文章于 2024-05-23 20:55:08 发布

阅读量86

点赞数

原文链接：http://www.cnblogs.com/Knowledge-is-infinite/p/10806636.html

版权

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>
    <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"><p>You are my sumshime!</p></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>
    <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>
    <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>