一、innerText 属性

<script type="text/javascript">

    window.onload = function(){

        var box = document.getElementById("box");

       // alert(box.innerText);//获取文本并过滤掉包含该文本的HTML标签(直接删除掉的)火狐不支持

        box.innerText='Mr.Lee';//设置值,替换掉原来有的文本

        box.innerText='<strong>Mr.Lee</strong>';//Strong标签不起作用，直接转义为纯文本

    };

</script>

</head>

<body>

    <div id="box"><p>测试Div</p></div>

</body>

　　除了 Firefox 之外，其他浏览器均支持这个方法。但 Firefox 的 DOM3 级提供了另外一个类似的属性：textContent，做上兼容即可通用。

<script>

     window.onload =function(){

        var box = document.getElementById("box");

        alert(box.textContent);

     };

</script>

</head>

<body>

<div id="box"><p>测试Div</p></div>

</body>

　　 做兼容方案：

<script type="text/javascript">

    window.onload = function(){

        var box = document.getElementById("box");

        alert(getInnerText(box));

        setInnerText(box,"wodedfadf");

       //兼容方案

        function getInnerText(element) {

            return (typeof element.textContent == 'string') ? element.textContent : element.innerText;

        }

        function setInnerText(element, text) {

            if (typeof element.textContent == 'string') {

　　　　　　　　　　element.textContent = text;

            } else {

                element.innerText = text;

            }

        }

    };

</script>

</head>

<body>

    <div id="box"><p>测试Div</p></div>

</body>

二、innerHTML 属性

<script>

     window.onload =function(){

        var box = document.getElementById("box");

        alert(box.innerHTML); //获取文本(不过滤 HTML标签)

        box.innerHTML = '<b>123</b>';     //可解析 HTML，结果文本加粗了;

        alert(box.innerHTML);

     };

</script>

</head>

<body>

<div id="box"><p>测试Div</p></div>

</body>

　　虽然 innerHTML 可以插入 HTML，但本身还是有一定的限制，也就是所谓的作用域元素，离开这个作用域就无效了。

<script>

     window.onload =function(){

        var box = document.getElementById("box");

        box.innerHTML = "<script>alert('Lee');</script>"; //<script>元素不能被执行

        box.innerHTML = "<style>background:red;</style>"; //<style>元素不能被执行

     };

</script>

</head>

<body>

<div id="box"><p>测试Div</p></div>

</body>

三、outerText

　　outerText 在取值的时候和 innerText 一样，同时火狐不支持，而赋值方法相当危险，他不单替换了文本内容，还将元素直接抹去。

<script>

     window.onload =function(){

        var box = document.getElementById("box");

        alert(box.outerText);

        box.outerText = '<b>123</b>';

        alert(box.outerText);

        alert(document.getElementById('box')); //null，建议不去使用

     };

</script>

</head>

<body>

<div id="box"><p>测试Div</p></div>

</body>

 四、outerHTML

　　outerHTML 属性在取值和 innerHTML 一致，但和 outerText 也一样，很危险，赋值的之后会将元素抹去。

<script>

     window.onload =function(){

        var box = document.getElementById("box");

        box.outerHTML = '123';

        alert(document.getElementById('box')); //null，建议不去使用，火狐旧版未抹去

     };

</script>

</head>

<body>

<div id="box"><p>测试Div</p></div>

</body>

JavaScript的DOM_操作内容的更多相关文章

  1. JavaScript的DOM_操作表格

    一.使用HTML标签创建表格 thead.tfoot.caption标签在一个表格中只能有一个    tbody.tr.td.th标签在一个表格中可以有N个 <table border=&quo ...

  2. JavaScript的DOM_操作行内样式

    一.检测浏览器是否支持css CSS 作为(X)HTML 的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的 CSS 能力.CSS 的能力和 DOM 级别密切相关,所以我们有必要检测当前浏 ...

  3. jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  4. 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  5. 第一百二十六节，JavaScript，XPath操作xml节点

    第一百二十六节,JavaScript,XPath操作xml节点 学习要点: 1.IE中的XPath 2.W3C中的XPath 3.XPath跨浏览器兼容 XPath是一种节点查找手段,对比之前使用标准 ...

  6. 第一百一十五节，JavaScript，DOM操作表格

    JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...

  7. 【2017-03-31】JS-DOM操作：操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素

    一.操作属性 1.什么是属性: <div class="div" id="div1" style="" ></div> ...

  8. PHP Jquery 代码操作 内容 属性 样式 事件 Json数据

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Python之路day13 web 前端（JavaScript，DOM操作）

    参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...

随机推荐

  1. MySQL操作汇总

    这学期学习了数据库系统原理,做了实验,mark一记. T—SQL的简单查询.连接查询 (1)用SQL语句建库.建表并插入记录. 建库: 建表: 插入记录: 查看 (2)修改表结构,包括修改属性列的数据 ...

  2. System.Web.Mvc.HtmlHelper<dynamic>”没有名为“Partial”的适用方法，但似乎有一个具有该名称的扩展方法。扩展方法不能进行动态调度。请考虑强制转换动态参数，或调用该扩展方法但不使用扩展方法语法。

    MVC 调用分布式图,传了没有定义的参数,,参数写得不对

  3. Lucene学习之二：Lucene的总体架构

    本文转载自:http://www.cnblogs.com/forfuture1978/archive/2009/12/14/1623596.html Lucene总的来说是: 一个高效的,可扩展的,全 ...

  4. Jquery UI Dialog 导致C#页面后台事件失效

    $(function () { dialog = $("#dialog-form").dialog({ autoOpen: false, height: 450, width: 5 ...

  5. C# 处理XML的基本操作

    文章部分代码引用参考文章, 文末参考文章已标注 ,本篇文章建立在两篇参考文章基础上,可以先阅读参考文章 XML 相关类 XDocument XmlDocument XmlReader  XmlWrit ...

  6. thinkphp引入头文件

    <include File="Public:regheader" />

  7. 深入理解jQuery插件开发总结（三）

    容器:一个即时执行函数 根本上来说,每个插件的代码是被包含在一个即时执行的函数当中,如下: (function(arg1, arg2) { // 代码 })(arg1, arg2); 即时执行函数,顾 ...

  8. 监听css3的animation动画和transition事件

    webkit-animation动画有三个事件: 开始事件: webkitAnimationStart 结束事件: webkitAnimationEnd 重复运动事件: webkitAnimation ...

  9. 记录开发Nodejs c++ addon的一些经验（三、关于node-gyp）

    关于node-gyp如何进行编译,我想它的官网已经说的很详细了: https://github.com/nodejs/node-gyp 但是我感觉关于binding.gyp文件的语法规则还是说的不明确 ...

  10. js 两个小括号 ()() 的用法

    实现一个函数fn, 使fn(1)(2)的结果为两个参数的和,刚开始没反应过来,其实细细一想第二个括号就是函数再调用的问题,废话不多说,代码奉上: var fn = function(n) { func ...