JavaScript 操作元素与节点

已于 2022-01-20 07:52:17 修改
阅读量1k 收藏 4
点赞数 1
分类专栏： 笔记
于 2022-01-20 07:51:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52083255/article/details/122540073
版权

JavaScript 操作元素与节点

操作元素

获取/修改元素样式属性

示例 1：

要求：点击修改 p 标签文本的颜色（默认为黑色）

步骤：

  • 获取元素：querySelector
  • 修改元素的样式 style 属性

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改元素属性</title>
</head>
<body>
    <p>我爱你，中国</p>
</body>
<script>
    // 目的：点击后修改p标签文本内容颜色
    // (1) 获取元素
    var p = document.querySelector("p");
    // (2) 绑定点击事件
    p.onclick=function() {
     //获取当前p标签文本颜色(默认黑色)
     var color = p.style.color;
     //修改style属性
    if(color == '' || color == "black") {
        p.style.color = "red";
        p.style.fontSize="2em";
    }else {
        p.style.color = "black";
        p.style.fontSize="1em"
    }
 }


</script>
</html>

示例 2:

要求：点击页面切换白天与夜间模式

步骤：

  • 获取元素：querySelector
  • 绑定点击事件

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>切换夜间模式</title>
    <style>
        /* 白天模式：白底黑字 */
        .day {
            
            background-color: white;
            color: black;
        }
        /* 夜间模式：黑底白字 */
        .black {
            width:200px;
            height:100px;
            background-color: black;
            color: white;
        }
    </style>
</head>
<body>
    <p class="day">我是Java小菜鸟~</p>
</body>
<script>
    var p = document.querySelector("p");
    //绑定点击事件
    p.onclick=function() {
        //class 属性，在JavaScript的元素对象属性为className
      var cls = p.className;
      if(cls == "day") {
          p.className = "black";
      }else {
          p.className = "day";
      }

    }
</script>
</html>

白底黑字显示

在这里插入图片描述

黑底白字显示：

在这里插入图片描述

获取/修改表单元素属性

表单：(主要是指 input 标签)的以下属性都可以通过 DOM 来修改；
value: input 的值.
disabled: 禁用
checked: 复选框会使用
selected: 下拉框会使用
type: input 的类型(文本, 密码, 按钮, 文件等)

示例 1：切换按钮的文本：

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    切换播放/暂停：<input type="button" id="btn" value="播放">
</body>
<script>
   var btn = document.querySelector("#btn");
   btn.onclick = function() {
       var content = btn.value;
       if(content == "播放") {
           //切换显示的内容为暂停
           btn.value = "暂停";
       }else{
           btn.value = "播放";
       }
   }
</script>
</html>

在这里插入图片描述
示例 2：点击计数

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    点击计数：<input type="text" id ="sum" value="0"> 
    <input type="button" id="sum_btn" value="点我加1"> 
</body>
<script>
 var sum=document.querySelector("#sum");
 var sumBtn=document.querySelector("#sum_btn");
 sum_btn.onclick=function() {
     //+会将字符串转成数值
    var count = +sum.value;
    sum.value=count+1;
}
</script>
</html>

在这里插入图片描述

示例 3: 全选/取消全选

代码实现：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    全部取消或选中：
    <input type="checkbox" id="all">全部都选
    <input type="checkbox" class="item">宋江
    <input type="checkbox" class="item">李逵
    <input type="checkbox" class="item">林冲
    <input type="checkbox" class="item">关胜
</body>
<script>
    //全部选中
    var all = document.querySelector("#all");
    // 子复选框：注意是采用querySelectorAll
    var items = document.querySelectorAll(".item");
    all.onclick = function () {
        for (item of items) {
            item.checked = all.checked;
        }
    }

    //当每一个子复选框被选中的时候，all复选框也被选中
    for (item of items) {
        //给每一个都绑定点击事件
        item.onclick = function () {
            let allChecked = true;
            for (it of items) {
                if (!it.checked) allChecked = false;
            }
            all.checked = allChecked;
        }
    }

</script>

</html>

操作节点

新增节点

步骤：

  1. 创建元素节点；
  2. 把元素节点插入到 DOM 树中；

（1）创建元素方法： createElement

格式：

var element = document.createElement(tagName[, options]);

目的：实现在文本框输入内容后，将内容显示在段落中

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="content"> 
    <input type ="button" id="add" value="添加文本框内容为一个段落"> 
    <div id="container">
        <h3>显示的内容</h3>
    </div>
</body>
<script>
    // 获取文本框内容，添加到container中
    var add=document.querySelector("#add");
    var content=document.querySelector("#content");
    var container =document.querySelector("#container");
       //绑定点击事件
    add.onclick=function() {
        var text=content.value;
        //创建一个DOM元素(<p>),添加到container内，作为最后一个子节点
        var p=document.createElement("p");
        p.innerHTML=text;
        //将p添加到DOM树型结构中
        container.appendChild(p);
    }
</script>
</html>

在这里插入图片描述
（2）采用 insertBefore 将节点插入到指定节点之前;

格式：

var insertedNode = parentNode.insertBefore(newNode, referenceNode)

其中：

  • insertedNode 被插入节点 (newNode)
  • parentNode 新插入节点的父节点;
  • newNode 用于插入的节点
  • referenceNode ，newNode 将要插在这个节点之前;

如果 referenceNode 为 null ,则 newNode 将被插入到子节点的末尾;

目的：实现在节点1，2，3，4前面插入一个新结点；

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>测试insertBefore</h3>
    <div id="insertBeforeDiv">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div>
<script>
    //insertBefore：在某个节点前插入另一个节点
    var insertBeforeDiv = document.querySelector("#insertBeforeDiv");
    //准备要插入的节点
    var insertNode = document.createElement("p");
    insertNode.innerHTML = "新插入的节点";
    insertBeforeDiv.insertBefore(insertNode, insertBeforeDiv.children[0]);
</script>
</html>

在这里插入图片描述

删除节点

使用 removeChild 删除子节点；

格式：

oldChild = element.removeChild(child);

其中：

  • child 为待删除节点；
  • element 为 child 的父节点；
  • 返回值为该被删除节点；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>添加或插入页面已有的节点，原节点就没有了（相当于是移动元素）</h3>
    <p id="beInsert">原p节点</p>
    <ul>
        <li>
            <p>1</p>
        </li>
        <li>
            <p>2</p>
        </li>
    </ul>
</body>
<script>
    //使用appendChild，和insertBefore，要注意，如果添加或插入的节点，是页面已有的节点，那么在添加或插入后，原有的节点就没有了
    //beInsert节点，插入到ul的第一个li标签前
    var beInsert = document.querySelector("#beInsert");
    var ul = document.querySelector("ul");
    //构造一个li标签
    var li = document.createElement("li");
    li.appendChild(beInsert);//<li><p>beInsert内容</p></li>
    ul.insertBefore(li, ul.children[0]);

    //删除ul中最后一个li
    var last = ul.children[ul.children.length - 1];//取最后一个li节点
    ul.removeChild(last);
</script>
</html>

在这里插入图片描述

躲不过️动
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
JavaScript 文档元素操作
m0_69120706的博客
05-23 319
创建结点 第一关：创建节点 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <p></p> <script> <!-- 请在此处编写代码 --> <!---------Begin--------->
JavaScript HTML DOM元素 节点操作汇总
10-16
JavaScript HTML DOM元素节点操作是网页动态交互的核心技术之一，它允许我们通过JavaScript代码来操作页面上的HTML元素。本文将深入探讨DOM中的节点操作，包括添加、删除、替换和查找节点等基本操作。 首先，理解...
JS操作元素节点
weixin_57762413的博客
03-20 204
JS操作元素节点
javascript中怎样区分元素和节点？
jiayoudangdang的博客
03-02 2597
javascript中怎样区分元素和节点？元素：即html文档里面，所有的标签都可以称之为元素，比如说&lt;p&gt;、&lt;tr&gt;等，也就是说元素是个统称，一个文档里面有很多的元素。节点：是js为了对html文档进行操作，而开发的，即DOM，文档对象模型。即每个元素都可以称之为一个节点，节点是唯一的。文档对象模型（Document Object Model，简称DOM），是W3C组织推...
JS 节点与元素的区别与获取方式（含代码）
夏沐的博客
01-20 2662
元素:页面中所有的标签,元素---element,  标签----元素---对象 节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node 节点的属性:(可以使用标签--元素.出来,可以使用属性节点.出来,文本节点.点出来)   * nodeType:节点的类型:1表示标签,2表示属性,3表示文本   * nodeName:节点的名字:标签节点---大写的标签名字,属...
一张图看懂js中元素、属性和文本节点的关系
庄AC的博客
09-07 5960
文本节点和元素节点为父子关系，但是属性节点和元素节点是兄弟关系吗？如果是兄弟关系， 那么通过“元素对象.属性名”的方式访问属性怎么解释？究竟元素节点和属性节点什么关系呢？ 元素节点和文本节点之间存在父子关系，元素节点和属性节点之间不存在父子关系
JavaScript DOM—节点操作
Jin_Xiang123的博客
01-04 1415
文档对象模型（Document Object Model，简称DOM）是一种基于树状结构的编程接口，用于操作HTML、XML和SVG等文档。它将文档表示为一个树状结构，其中每个节点代表文档中的一个元素、属性、文本或其他类型的内容。DOM提供了一组标准的对象和方法，可以通过JavaScript等编程语言来访问和操作文档的各个部分。通过DOM，开发者可以使用JavaScript来读取、修改、添加和删除文档的元素、属性和内容。DOM树是由节点组成的。文档节点是DOM树的根节点，它是整个文档的入口点。
JavaScript中DOM操作元素及节点操作
m0_52942098的博客
06-08 710
目录操作元素操作元素内容操作元素属性操作元素样式操作style属性（行内样式操作）操作className属性（类名样式操作）自定义属性操作获取属性值操作属性值移除属性值H5自定义属性设置H5自定义属性获取自定义属性节点操作 操作元素 JavaScript中的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。 操作元素内容 方法 作用 innerHTML 设置或返回开始标签和结束标签之间的内容，包括html标签、空格、换行等格式字符 inne
Javascript节点操作
qq_61716556的博客
05-24 729
节点操作是Javascript获取元素的方式之一。另一种是利用Javascript提供的DOM方法获取元素。常见的有getElementById，getElementsByTagName()等； 这种方法每获取一次元素就要getElement一次，较为繁琐(相对于节点操作而言)。我们可以使用节点操作，在获取某一个元素后，使用节点操作就可以直接获取它的子元素，子节点，兄弟节点等。 节点简介 节点在Javascript中包括文本节点，属性节点，元素节点，注释节点。节点具有节点类型(nodeType)，节点
JavaScript之DOM操作获取元素、事件、操作元素、节点操作
weixin_53155105的博客
08-07 2659
什么是 DOM？ 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式 DOM 树 文档：一个页面就是一个文档，DOM 中使用 document 表示 元素：页面中的所有标签都是元素，DOM 中使用 element 表示 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node.
JavaScript 节点操作简介
最新发布
大剑师兰特的GIS世界
06-02 907
在JavaScript中，节点操作是指对DOM（文档对象模型）树中的元素进行创建、查找、修改和删除等操作。DOM树是浏览器将HTML文档解析后形成的结构化表示，每个节点代表文档中的一个部分，如元素、属性、文本等。
纯JavaScript操作DOM节点
05-22
纯JavaScript操作DOM节点，通过动态JS创建元素标签，自定义元素的个数，并显示序号和对应的正则表达式验证和图片类型大小验证，，在前端用户姓名和性别多选框的取值已拿到，最后把后面的if else代码放开就可以了，...
JavaScript 获取元素在父节点中的下标(推荐)
10-19
在JavaScript中，获取元素在父节点中的下标是一项常见的任务，尤其在进行DOM操作和页面交互时。在jQuery中，我们可以方便地使用`$(this).index()`来获取元素在父节点同级元素中的索引位置。然而，在原生JavaScript中...
示例4：操作节点属性.rar_javascript操作节点属性
09-20
每个HTML元素都是一个DOM节点，包括元素节点、属性节点和文本节点。在JavaScript中，我们可以使用`document`对象来获取页面上的任何元素，比如通过`getElementById()`、`getElementsByClassName()`、`...
Matlab机器人工具箱安装步骤
m0_52083255的博客
11-12 6728
MATLAB机器人工具箱下载连接 机器人工具箱的安装 今天用到机器人工具箱，顺便在这里给大家分享一下，需要的可以参考哦！ 安装步骤： 解压下载完的机器人工具箱文件，将解压文件复制到 MATLAB 安装目录下的 toolbox 文件夹中； 设置 MATLAB路径，添加并包含子文件夹； 启动运行：命令行输入 startup_rvc；（或者也可以返回到刚才 rvctools 的安装路径中，点击startup_rvc）； 检验是否安装成功； 检验安装成功与否的方法：在 MATLAB 命
递归函数详细版（Java）
m0_52083255的博客
08-24 3822
递归函数及相关练习 1.递归的概念 一个方法在执行过程中调用自身的过程, 就称为 “递归”； 2.递归的应用场景 通常应用在一个将大型的复杂问题层层转化为一个与原问题有着相同的解决方案的小问题； 3.递归实现的条件 ...
VS安装及其注意事项
m0_52083255的博客
04-13 2519
VS安装及其注意事项（ VS安装及其注意事项 工欲善其事，必先利其器，众所周知，我们在干一件事之前，必须先将工具准备好，那首先学习C语言，我们就要搭建它的开发环境，那接下来就开始进行安装啦，首先我们先找到官网网址：https://visualstudio.microsoft.com/zh-hans/vs/） 进入之后就可以选择并下载了 开发C语言，那接下来往下就可以进行下一步了，选择使用C++k开发环境！其次就是安装啦，当然一般情况下不要装在c盘，如果是固态并且空间足够也可以装在c盘，这样速度会比较快一点
二叉树概念及其性质（做选择题超有用～的性质）
m0_52083255的博客
11-01 2510
二叉树概念 概念 一棵二叉树是结点的一个有限集合，该集合： 或者为空 或者是由一个根节点加上两棵别称为左子树和右子树的二叉树组成 大自然中的二叉树：
字符串逆序排列
m0_52083255的博客
05-14 2481
字符串逆序(反向排列） 题目要求： （1）将参数字符串中的字符反向排列，而不是逆序打印； （2) 不能使用C函数库中的字符串操作函数； 首先要清楚逆序打印与反向排列的区别： 逆序打印，它本身的字符串没有发生改变，只是反着输出而已。而反向排列，实质上已经修改了字符串的本身，把字符串给颠倒了，然后正向打印出来! 实现： #include<stdio.h> #include<stdlib.h> #include<string.h> //ReverseString实现字符串逆序
JavaScript DOM教程：节点分类与操作详解
节点的分类包括但不限于：文档节点、元素节点、文本节点、属性节点和注释节点。节点的层级关系是理解DOM的关键，比如根元素（如）、子节点和兄弟节点的概念。节点树的示例进一步展示了节点之间的连接，例如和元素与...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值