一、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. WPF的菜单栏，工具栏的简单使用

    1. 界面效果如下: 2. 页面 .xaml代码如下: <Window x:Class="MenuAndToolBar.MainWindow" xmlns="htt ...

  2. Ubuntu14.04搭建Oracle instantClient 11.2.0.4并配置cx_Oracle5.1.2

    一.配置Oracle instantClient 11.2.0.4 1.下载Oracle客户端: 打开http://www.oracle.com/technetwork/topics/linuxx86 ...

  3. 二叉树链表C++实现

    结点的构造 源代码:https://github.com/cjy513203427/C_Program_Base/tree/master/57.%E4%BA%8C%E5%8F%89%E6%A0%91% ...

  4. spring security入门

    1. Restful API和传统API的区别 用URL描述资源 用http描述方法行为,用http状态码描述结果 使用json交互数据 RESTful是一种风格,不是强制的标准 2. 使用sprin ...

  5. SSM面试

    Spring两大核心:IOC AOP DI AOP:所谓面向切面变成,是一种通过预编译和运行期动态化代理的方式实现了再不修改源代码的情况下给程序动态添加功能的技术. Mybatis(半自动化实现obj ...

  6. js动态创建类对象

    1.定义函数,函数中定义类对象 f1=function(){ //定义类 function Pannel(name){ this.name = name; this.print = function( ...

  7. jQuery extend方法详解

    先说个概念的东西: jQuery为开发插件提拱了两个方法,分别是: $.fn.extend(item):为每一个实例添加一个实例方法item.($("#btn1") 会生成一个 j ...

  8. nodejs的get与post

    index.html <html> <body> <form action="/api/v1/records" method="post&q ...

  9. div居中方式

    1. position: absolute; top:50%:left: 50%; margin-top: -高度的一半; margin-left: -宽度的一半(此方法适用于固定宽高的元素) 注: ...

  10. IO流之打印流

    打印流的概述(只有输出就是只与数据目的有关,不会抛出IO异常) 打印流添加输出数据的功能,使它们能够方便地打印各种数据值表示形式. 打印流根据流的分类: l  字节打印流  PrintStream l ...