一、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. mongodb数据导入导出mongoexport/mongoimport

    数据导出 mongoexport 假设库里有一张user表,里面有2条记录,我们要将它导出 > use my_mongodb switched to db my_mongodb > db. ...

  2. 深入理解JavaScript系列（38）：设计模式之职责链模式

    介绍 职责链模式(Chain of responsibility)是使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系.将这个对象连成一条链,并沿着这条链传递该请求,直到有一个对象 ...

  3. Magento 2开发教程 - 如何添加新产品属性

    添加产品属性是一种在Magento 1 和 Magento 2最受欢迎的业务. 属性是解决许多与产品相关的实际任务的有力方法. 这是一个相当广泛的话题,但在这个视频中,我们将讨论添加一个下拉类型属性到 ...

  4. html中块元素的居中。及兼容性

    块在块中垂直居中(父元素postion:relative;   子元素position:absolute; top:50%; margin-top:负二分之一高度) 块在块中水平居中 (子元素marg ...

  5. Spring学习（一） IoC

      文章部分图片来自参考资料,本文介绍的是 Spring 的两个重要概念,是学习总结. 我们依旧提出几个问题,帮助我们在学习中带着问题解答. 问题 : 如何理解Ioc,它解决了什么难题(或者说是使用它 ...

  6. java导入excle表格，并且对表格进行相应的修改，并对表格数据进行整理，最后导出本地表格等一系列操作

    1.首先创建一个java项目 完成效果如下图所示 2.导入以下jar包 3.代码如下 其中行和列的操作是根据需求自动划分的 public class auto_date { private stati ...

  7. thrift简介

    thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发.它结合了功能强大的软件堆栈和代码生成引擎,以构建在 C++, Java, Python, PHP, Ruby, Erlang, Perl ...

  8. db缓存设计

    http://www.cnblogs.com/herm/archive/2012/11/11/2773887.html

  9. ajax提交手机号去数据库验证并返回状态值

    <script type="text/javascript"> $(function(){ $('.agree_regi').click(function(){ var ...

  10. 用一个小例子来谈谈javascript的运行机制

    先上例子! <script type="text/javascript"> console.log('博'); setTimeout(function(){ conso ...