DOM--操作元素--innerText和innerHTML及其区别；常用元素的属性操作；表单元素的属性操作；样式属性操作；通过className更改元素样式

最新推荐文章于 2023-10-18 22:51:26 发布
最新推荐文章于 2023-10-18 22:51:26 发布
阅读量474 收藏
点赞数
分类专栏： JavaScript学习笔记 文章标签： javascript html html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43968060/article/details/107566134
版权

操作元素：

JavaScript的DOM操作可以改变网页内容，样式和结构，我们可以利用DOM 操作元素来改变元素里面的内容属性等。

  • 改变元素的内容
    element.innerText
    从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉。
    element.innterHTML
    起始位置到终止位置的全部内容，包括HTML标签，同时保留空格和换行

案例：innerText

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .show {
        background-color: aqua;
        width: 300px;
        height: 25px;
        margin-top: 20px;
    }
    
    p {
        background-color: aqua;
        width: 300px;
        height: 25px;
        margin-top: 20px;
    }
</style>

<body>
    <button>显示当前系统时间</button>
    <div class="show">某个时间</div>
    <p>1111</p>
    <script>
        // 当点击了按钮，div里面的文字会发生变化
        // 1.获取元素
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        // 2.注册事件
        btn.onclick = function() {
            // 随意设置一个时间
            // div.innerText = '2020-7-24';
            div.innerText = getDate();
        }

        // 封装一个获取系统时间的函数
        function getDate() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
            var day = date.getDay();
            return '今天是：' + year + '年' + month + '月' + dates + '日' + arr[day];
        }
        // 我们元素可以不用添加事件
        var p = document.querySelector('p');
        p.innerText = getDate();
    </script>
</body>

</html>

innerText和innerHTML之间的区别

innerText:不识别html标签; 去除空格和换行 非标准
innerHTML:可识别html标签; 保留空格和换行 使用的最多

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=], initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- innerText和innerHTML之间的区别 -->
    <div></div>

    <p>
        文字
        <span>111</span>
    </p>
    <script>
        // 1.innerText:不识别html标签;去除空格和换行  非标准
        var div = document.querySelector('div');
        div.innerText = '<strong>今天是：</strong> 2020';
        // 2.innerHTML：可识别html标签；保留空格和换行
        div.innerHTML = '<strong>今天是：</strong> 2020';

        // 这两个属性是可以读写的; 可以获取元素里面的内容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>
</body>

</html>

常用元素的属性操作
案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            display: block;
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <button id="ldh">111</button>
    <button id="zxy">222</button>
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2069387434,380735787&fm=26&gp=0.jpg" alt="" title="111">
    <script>
        // 修改元素属性
        // 1.获取元素
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        //2.注册事件
        zxy.onclick = function() {
            img.src = 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2747364614,2411895227&fm=26&gp=0.jpg';
            img.title = '222';
        }
        ldh.onclick = function() {
            img.src = 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2069387434,380735787&fm=26&gp=0.jpg';
            img.title = '111';
        }
    </script>
</body>

</html>

表单元素的属性操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">

    <script>
        // 1.获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2.注册事件
        btn.onclick = function() {
            // 表单里面的值是通过value来修改的
            input.value = '被点击了';
            // 使某个表单被禁用disabled 按钮被禁用
            // btn.disabled = true;
            this.disabled = true;
            // this指向的是事件函数的调用者。 btn
        }
    </script>
</body>

</html>

样式属性操作：element.style 样式较少，功能较为简单的情况下使用

我们可以通过JS修改元素的大小、颜色、位置等样式

  • element.style:行内样式操作
  • element.className:类名样式操作

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .before {
            height: 100px;
            width: 100px;
            background-color: pink;
        }
        
        .change {
            background-color: purple;
            color: aliceblue;
            margin-top: 100px;
            font-size: 25px;
        }
    </style>
</head>

<body>
    <div class="before">文本</div>
    <script>
        // 1.使用element.style获得修改元素样式   
        var test = document.querySelector('div');
        test.onclick = function() {
            // this.style.backgroundColor = 'purple';
            // this.style.color = '#fff';
            // this.style.marginTop = '100px';

            // 测试element.style:测试的时候可以将上面三行解开注释；下面一行加上注释。反之则是测试element.className
            // 2.使用className修改元素样式
            this.className = 'change';
            // 3.如果想要保留原来的类名；我们可以这么做：  多类名选择器
            this.className = 'first change';
        }
    </script>
</body>

</html>

总结：element.styel适用于样式简单的情况下；className适用于复杂的情况下，可以直接覆盖原先的类名；也可以保留原来的类名与新类名一同起作用。

风和雨呀~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery操作attr、prop、val()/text()/html()、class属性
12-02
在JavaScript的世界里，jQuery库提供了一种简便的方式来操作DOM元素，包括它们的属性（attributes）、属性值、文本内容以及HTML结构。本篇文章将详细讲解jQuery中的`attr`、`prop`、`val()`/`text()`/`html()`以及`...
JavaScript DOM常用操作代码汇总
11-20
常用属性：`parentNode`返回当前元素的父节点，`children`和`childNodes`返回子元素和所有子节点，`firstChild`和`lastChild`获取第一个和最后一个子节点，`nextSibling`和`previousSibling`获取同级元素，`...
DOM操作-03-innerHTML、innerText
qq_41874591的博客
04-22 294
innerHTML、innerText和nodeType
javascript基础（10)--DOM和事件
codest的专栏
07-10 175
DOM:文档对象模型 文档：文档表示的就是整个的HTML网页文档 对象：对象表示将网页中的每一个部分都转换为了一个对象，将页面每个元素转换为对象 模型：倒树，体现节点对象之间的关系。 通过js操作html中的元素，如：h1, head等。 节点： 节点：Node——构成HTML文档最基本的单元 ，常用节点分为四类。 文档节点：整个HTML文档 元素节点：HTML文档中的HTML标签 属性节点：元素的属性 文本节点：HTML标签中的文本内容 浏览器已经为我们提供文档节点对象..
DOM元素的innerText和 innerHTML的属性
雨林
09-15 3651
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 演示文档  function createInput(){   var divMa
DOM——03（innerText、textContent和innerHTML；自定义属性；案例3）
Galaksen的博客
08-06 465
目录 1.innerText和textContent：设置标签中的文本内容 2.innerText和innerHTML的区别 2.1 从设置来说 2.2 从获取来说 2.3 总结 3.自定义属性 3.1 自定义属性的引入 3.2 自定义属性设置和获取 3.3 移除某个元素的自定义属性 4.tab切换案例(排他、自定义属性综合性应用) 1.innerText和textCo...
2021-08-12
java_yangXL的博客
08-12 110
1.webapi介绍 、api的概念 API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。例如：alert()、prompt()、log()、reverse()、getMonths() 任何开发语言都有自己的API API的特征输入和输出(I/O) API的使用方法(console.log()) 、webapi的概念...
了解javascript中的Dom操作
12-03
值得注意的是，文本节点和属性结点通常作为元素结点的子结点存在。在JavaScript中，我们通常所说的结点主要指的是元素结点，因为它们是最常用的交互对象。 接下来，我们探讨如何获取元素结点。JavaScript提供了多种...
JavaScript——DOM操作——Window.document对象详解
11-28
JavaScript DOM操作是Web开发中不可或缺的一部分，主要用于动态更新网页内容和与用户交互。Window.document对象是JavaScript访问HTML文档的主要接口，提供了丰富的API用于查找、修改和操作页面元素。 一、找到元素...
Excel-VBA实用技巧范例-操作InternetExplorer.zip
03-18
8. 数据抓取：利用`innerHTML`、`innerText`或`Value`属性提取网页上的文本或值。对于动态加载的内容，可能需要使用`ExecuteScript`方法运行JavaScript代码来获取。 9. 错误处理：在编写VBA脚本时，应包含错误处理...
07 JS-DOM之-innerHTML、innerText、textContent
路遇惊喜
11-29 680
value属性 innerHTML(可以识别标签) innerText <body> <input type="text" value="我是input的内容"/> <div id="box1"> <ul> <li>我用于测试innerHTML</li> </ul> </div> <div id="box2"> <ul>
DOM对象中的常用属性（innerHTML属性，innerText属性，className属性，style属性）
『愚』的博客
11-16 4058
DOM对象中的常用属性innerHTML属性innerText属性className属性style属性 innerHTML属性 innerHTML属性：用于设置或获取HTML 元素中的内容。 样例代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p id="o
DOM进阶之innerHTML和innerText
ch_musk的博客
03-19 246
前言： 在之前的学习中，我们如果想要创建一个动态DOM元素，我们都是将元素节点，属性节点，文本节点一个个使用appendChild()等方法拼凑起来。要是插入的元素非常复杂的话，这个方法就不太合适了。 在JavaScript中，我们可以使用innerHTML属性很方便的获取和设置一个元素的元素的“内部元素”，也可以使用innerText属性获取和设置一个元素的“内部文本” 举例： <!D...
DOM 操作内容 innerText/innerHTML
weixin_30722589的博客
04-06 128
DOM 操作内容 innerText/innerHTMLinnerText属性(firefox不支持，可用 textContent)var div = document.getElementById("itTag");div.innerText/div.textContent 来获取里面的文本，会去除 html标签获取值时用div.innerText = "lin3615" / div.text...
第十二节:DOM操作
snjgzz的博客
08-29 147
一.简单的DOM操作 1.获取DOM元素 1.1通过ID获取 document.getElementById("myid"); // id是唯一的 1.2通过类名来获取元素(获取到的是多个元素，会放在一个伪数组里) var eles = document.getElementsByClassName("box")[0]; // 类名可以有多个 console.log(eles); eles.style.backgroundColor = "red"; // 注意 通过类名获取到的是多个元素 即使是
DOM innerHTML和innerText的区别
jssd的博客
08-20 552
操作文本结点 存在一个div <div id="div1"> <span>我们不一样</span> </div> 获得元素节点 let div = document.getElementById("div1"); 使用innerHTML 可见输出: <span>我们不一样</span> var inn = div.in...
CSS属性 - 文本_text-indent
戈文文的博客
02-10 105
innerHTML 用法
yihuei123的专栏
04-23 6608
用法：比如在中写了如下的代码：现在用top.innerHTML="..........";的方法就可以向这个id的位置写入HTML代码了。例如top.innerHTML="";就可以在top对应的位置出现一个button了！爽吧，在公告前加javascript就行老，直接改HTML。。。function Test(){        var str="";        str+="Hel
【Java 进阶篇】深入了解 JavaScript 的 innerHTML 属性
最新发布
繁依Fanyi的博客
10-18 2338
在深入研究innerHTML属性之前，让我们先了解一下什么是DOM。DOM 是文档对象模型的缩写，它是HTML文档的编程接口，允许开发者通过编程方式访问、操作和更新HTML文档的内容和结构。DOM 将HTML文档表示为一个树状结构，每个HTML元素都是树中的一个节点，我们可以使用JavaScript来访问和修改这些节点。innerHTML是DOM元素的一个属性，它代表了该元素的HTML内容。也就是说，它包含了一个HTML元素的所有子元素、文本和标记。通过innerHTML。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值