一、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. MyBatis Mapper XML 文件 的学习详解

    MyBatis 真正的力量是在映射语句中.这里是奇迹发生的地方.对于所有的力量,SQL 映射的 XML 文件是相当的简单.当然如果你将它们和对等功能的 JDBC 代码来比较,你会发现映射文件节省了大约 ...

  2. ExtJs6解决添加和修改Form共用一个form的隐藏域的id的取消传值

    问题重现:修改不会有问题,id会绑定之前的grid,有具体数字 添加有问题,因为id是空,传的是绑定值的话会显示“类名-1”,从int类型变成了string类型,后台会出错 这是EduQuestion ...

  3. 计算F1Score

    计算F1Score predictions = pval < epsilon fp = sum((predictions == 1) & (y == 0)) fn = sum((pred ...

  4. [PY3]——heap模块 和 堆排序

    heapify( ) heapify()函数用于将一个序列转化为初始化堆 nums=[16,7,3,20,17,8,-1] print('nums:',nums) show_tree(nums) nu ...

  5. 阿里云服务器docker搞定镜像

    docker的安装可以看前面的文章 这里我的docker已经安装完成了,该搞镜像了:这里的镜像用的是我以前自己搞的,虽然镜像有点大,但是胜在自己搞的,熟悉(熟悉不熟悉鬼知道) 我的镜像放在了阿里云容器 ...

  6. C#基础 （一）

    值类型和引用类型 堆和栈 栈存放的数据: (1)某些类型变量的值(2)程序当前的执行环境(3)传递给方法的参数 堆是存放对象的地方 对象类型有两种: 值类型和引用类型,他们的存储方式不同值类型: 只需 ...

  7. Java API 之 正则表达式

    一.基本概念 在项目中我们经常性做的一件事是“匹配”字符串 比如: 1.我们要验证用户输入的手机号是否合法? 2.验证设置的密码是否符合规则? 3.或者替换指定字符串中的一些内容. 这么一看,似乎正则 ...

  8. Effective C++ .17 函数调用时的资源管理

    以书上的代码为例 processWidget(shared_ptr<Widget>(new Widget), priority()) 虽然使用了智能指针来管理资源但是,由于参数值计算顺序的 ...

  9. JavaEE之HttpServletRequest

    HttpServletRequest //要下载的这个文件的类型--客户端会通过文件的MIME类型去区分类型 response.setContentType( getServletContext(). ...

  10. 爬虫之Beautifulsoup的基本实用

    基本方法如下: # soup.a 只能找到第一个符合要求的标签 # soup.a.attrs 获取a所有的属性和属性值 # soup.a.attrs['href'] 获取href属性 # soup.a ...