一、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. SpringBoot | 第三十六章：集成多CacheManager

    前言 今天有网友咨询了一个问题:如何在一个工程中使用多种缓存进行差异化缓存,即实现多个cacheManager灵活切换.原来没有遇见这种场景,今天下班抽空试了下,以下就把如何实现的简单记录下. 一点知 ...

  2. [转]Entity FrameWork利用Database.SqlQuery<T>执行存储过程并返回参数

    本文转自:http://www.cnblogs.com/xchit/p/3334782.html 目前,EF对存储过程的支持并不完善.存在以下问题:        EF不支持存储过程返回多表联合查询的 ...

  3. Linux定时任务crontab使用指南

    crontab命令被用来提交和管理用户的需要周期性执行的任务,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务工具,并且会自动启动crond进程,crond进程每分钟会定期检查 ...

  4. jquery 使用整理机制

    短路表达式 与 多重短路表达式 短路表达式这个应该人所皆知了.在 jQuery 中,大量的使用了短路表达式与多重短路表达式. 短路表达式:作为"&&"和" ...

  5. MongoDb 学习笔记(一) --- MongoDb 数据库介绍、安装、使用

    1.数据库和文件的主要区别 . 数据库有数据库表.行和列的概念,让我们存储操作数据更方便 . 数据库提供了非常方便的接口,可以让 nodejs.php java .net 很方便的实现增加修改删除功能 ...

  6. maven仓库中的LastUpdated文件删除脚本

    cleanLastUpdated.bat(windows版本) @echo off rem create by NettQun rem 这里写你的仓库路径 set REPOSITORY_PATH=D: ...

  7. JAVA SwingWorkder的使用例

    最近在学习Swing,我们都知道在UI表现线程里面长时间执行操作时,画面会假死,为了能够让费时操作不影响画面表现,就需要用多线程了.首先考虑的就是Swing内部的 SwingWorkder对象,但是网 ...

  8. 运行tomcat7w.exe,提示：指定的服务未安装unable to open the service tomcat7

    这是服务没安装,到tomcat的bin目录下运行 service.bat install 即可

  9. Python-模块3-re

    今天我们就说一个模块,那就是re,不过想要了解re模块,我们得先了解一下什么是正则表达式,有助于我们更好的学习re模块 一.正则表达式 首先, 我们在网页上进行注册或者登陆的时候经常能看到一些格式上的 ...

  10. easyui扩展行默认展开 以及 去除滚动条

     问题背景: 在做打印页面的时候,要求有详细的默认展开显示.    遇到的问题: 1)在用扩展行的时候,grid的所有行都添加了展开收起的图标,(第二行没有明细)如下  2)默认展示有详细行的时候,内 ...