JavaScript DOM操作案例封装innerText跟textContent函数(浏览器兼容)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 500px;
            height: 20px;
            border: 2px solid red;
        }
    </style>
</head>
<body>
<input type="button" value="按钮" id="bt"/>

<div id="dv">哇,好棒</div>
<script src="common.js"></script>
<script>
    //设置任意的标签中间的文本内容
    function setInnerText(element, text) {
        //判断浏览器是否支持该属性
        if (typeof element.textContent == "undefined") {
            element.innerText = text;
        } else {
            element.textContent = text;
        }
    }
    //获取任意标签中间的文本内容
    function getInnerText(element) {
        if (typeof element.textContent == "undefined") {
            return element.innerText;
        } else {
            return element.textContent;
        }
    }

    //测试
    //    my$("bt").onclick = function () {
    //      alert(getInnerText(my$("dv")));
    //    };
    my$("bt").onclick = function () {
      setInnerText(my$("dv"), "真的很棒");
    };

</script>
</body>
</html>

原文地址:https://www.cnblogs.com/cuilichao/p/9357288.html

时间: 2024-11-05 19:45:11

JavaScript DOM操作案例封装innerText跟textContent函数(浏览器兼容)的相关文章

JavaScript DOM操作案例点击按钮修改div的属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="修改属性" id="bt"/> <div id=&q

JavaScript DOM操作案例点击按钮选择菜单

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <input type="button" value="点击选择" id="bt"/&g

JavaScript DOM操作案例美女相册

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { font-family: "Helvetica", "Arial", serif; color: #333

JavaScript DOM操作案例点击按钮通过类样式的方式显示跟隐藏div

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; height: 300px; background-color: pink; } .cls { display: none; } </style> </h

JavaScript DOM操作案例点击按钮实现网页开关灯

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .cls { background-color: black; } </style> </head> <body> <input type="button&qu

JavaScript DOM操作案例tab切换案例

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { list-style-type: none; } .box { width: 400px; height: 300px; border: 1px

javascript DOM 操作

在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Model(文本对象模型). D : 文档(html或xml文档) O : 对象(文档对象) M : 模型 1.2.DOM结构 DOM将文档以家谱树的形式来表现. 下面是一个简单的html文档,我们可以看出该文档的DOM结构如下 1 <!DOCTYPE html> 2 <html> 3 <

javascript DOM操作HTML文档

文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的HTML和XML对象集,并有一个标准接口来访问并操作他们,即任何一个 html 元素可以使用 JavaScript DOM 动态访问和控制. 1. DOM概述 文档对象模型定义了JavaScript可以进行操作的浏览器,描述了文档对象的逻辑结构及各个功能组件的标准接口.主要包括以下内容: 核心Jav

JavaScript Dom操作-增删改节点1

一.Dom操作 文档对象模型DOM:一套定义.规范.准则 为了能够让程序JavaScript去操作页面中的元素节点而定义的一套标准 DOM会把文档看作是一棵树,页面中的每个元素就是树上的一个一个节点:同时DOM定义了很多方法.属性等来操作这棵树中的每一个元素(节点)——每个节点称为DOM节点. 1.  节点.children      ——      (没有兼容性问题:只包含元素节点)   获取第一级子元素 childNodes    获取第一级子元素   有兼容性问题(标准浏览器文本和元素视为