JavaScript中的DOM

最新推荐文章于 2024-08-22 14:32:34 发布
最新推荐文章于 2024-08-22 14:32:34 发布
阅读量89 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45145768/article/details/110353800
版权
本文详细介绍了JavaScript中的DOM操作，包括获取元素节点、设置属性和文本节点的方法。通过实例展示了如何动态改变元素样式、添加和删除表格行。强调了在操作DOM时要注意元素节点的获取，并给出了在不同浏览器中兼容性问题的解决方案。此外，还提供了添加、删除和复制表格行的函数，以及计算表格总价的示例代码。
摘要由CSDN通过智能技术生成

js中的DOM操作

一、前言

DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。

二、DOM节点

DOM节点分为三大类：元素节点、属性节点、文本节点；
在这里插入图片描述

由DOM树我们可以看到，文本节点、属性节点属于元素节点的子节点。

  文本节点和属性节点就像是这颗DOM树的果子，而元素节点就是树枝，所以，在操作时，一定要要记顺枝摘果：得先取到元素节点！然后再操作子节点！！

  要先取到元素节点！要先取到元素节点！要先取到元素节点！重要的事情说三遍！

2.1 获取元素节点

首先，可以用使用getElement系列方法，取到元素节点。
　下面列出一些常用的 DOM 对象方法:
　常用dom对象方法
例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div{
                width: 100px;
                height: 100px;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var btn1 = document.getElementById("btn1");
                console.log(btn1);
                var is = 0;
                btn1.onclick =function  (){
                    
                    is++;
                    if(is%2!=0){
                        var div = document.getElementsByClassName("div");
                        div[0].style = "background-color:red;color:yellow;"
//                        div[0].innerText = "hehe";
                        div[0].innerHTML = "<h2>hehe</h2>";


                    }else {
                        var div = document.getElementsByClassName("div");
                        div[0].style = "background-color:blue;color:white;"
                        div[0].innerHTML = "<h2>hahaha</h2>";
                    }
                    
                }
                
            }
    
        </script>
    </head>
    <body>    
        <button id = "btn1" class = "btn" onclick="but()">这是一个按钮1</button>
        <div class="div">hahaha</div>
        
    </body>
</html>

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

getElementById:通过id取到唯一节点。如果id重名，只能取到第一个。

var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn1");

console.log(btn1);
console.log(btn2);

获取元素节点时，一定要注意：获取节点的语句，必须在DOM渲染完成后执行。
可以有两种方式实现：①将JS代码写在body之后；②将代码写到window.onload函数之中；
后面三个getElements，取到的是数组格式。不能直接添加各种属性，而应该取出数组的每一个单独操作。

例：
getElementsByName(“name1”)[0].onclick = function;

2.2 查看设置属性节点

查看和设置属性节点，必须先取到元素节点，才能使用；

 1、查看属性节点：getAttribute("属性名")；
 2、设置属性节点：setAttribute("属性名","新属性值");

var btn1 = document.getElementById("btn1");            
var classes = btn1.getAttribute("class“）；
 btn1.setAttribute("class","btn1");
console.log(classes);

setAttribute();函数在IE浏览器中可能会存在兼容性问题。比如在IE 中不支持试用这个函数设置style/onclick
等样式属性和事件属性。
我们推荐使用符号法替代上述函数：
eg:dom1.style.color="" dom1.οnclick="" dom1.src=""
【总结-js修改DOM节点的样式】
1、使用setAttribute()设置class和style属性，但是存在兼容性问题，不提倡；
div.setAttribute(“class”,“cls1”);
2、使用.className直接设置class类，注意是className而不是.class:
div.className = “cls1”;
3、使用.style设置单个属性，注意属性名要用驼峰命名法：
div.style.backgroundColor = “red”;
4、使用.style或.style.cssText设置多个样式属性：
div.style = “background-color:red;color:yellow;”
div.style = “background - color:red;color:yellow” √

2.3查看设置文本节点

1、.innerText:取到或设置节点里面的文字内容;
.innerHTML:取到或设置节点里面的HTML代码；
.tagName:取到当前结点的标签名。标签名全部大写

var div = document.getElementsByClassName("div");
div[0].style = "background-color:red;color:yellow;"
//    div[0].innerText = "hehe";
div[0].innerHTML = "<h2>hehe</h2>";

三、表格元素

【表格对象】

1、rows属性：返回表格中的所有行，是一个数组格式；
2、insertRow(index):在指定位置插入一行，index从0开始；
3、deleteRow(index):删除指定的一行，index从0开始；

【行对象】
1、cells属性：返回这一行中的所有单元格，是一个数组格式；
2、rowIndex属性：返回这一行，是表格中的第几行，从0开始；
3、insertCell(index):在这一行的指定位置，插入一个单元格，index从领开始；
4、deleteCell(index):删除这一行的指定单元格，index从0开始
【单元格对象】
1、cellIndex属性：返回这个单元格是这一行的第几个单元格
2、innerText inner HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
            table{
                width: 400px;
                border-collapse: collapse;
            }
            td,th{
                border: solid 1px black;
            }
            tr:last-of-type{
                color: red;
            }
            tr:frst-of-type{
                background-color: #565656;
            }
        </style>
    </head>
    <body>
        
        <table id="table">
            <tr>
                <th>书名</th>
                <th>价格</th>
            </tr>
            <tr>
                <td>幸福从天而降</td>
                <td>18.5</td>
            </tr>
            <tr>
                <td>活在当下</td>
                <td>45.5元</td>
            </tr>
            <tr>
                <td>人性的弱点</td>
                <td>65.5元</td>
            </tr>
            <tr>
                <td>60个瞬间</td>
                <td>88.0元</td>
            </tr>
            <tr>
                <td>合计</td>
                <td>100元</td>
            </tr>
        </table>
        <br />
        <button onclick="addRow()">增加一行</button>
        <button onclick="delRow()">删除最后一行</button>
        <button onclick="copyRow()">复制最后一行</button>
        <button onclick="changeStyle()">修改标题样式</button>
        <button onclick="getSum">求和</button>
    
        <script type="text/javascript">

            
            var table = document.getElementById("table");
            
            function addRow () {
                var index = table.rows.length-1;
                var newRow = table.insertRow(index);
                
                var name = prompt("请输入书名");
                var cell0 = newRow.insertCell(0);
                cell0.innerText = name;
                
                var money = parseFloat(prompt("价格"));
                var cell1 = newRow.insertCell(1);
                cell1.innerText = money.toFixed(1)+"元";
            }
            
            function delRow () {
                if (table.rows.length>2) {
                    table.deleteRow(table.rows.length-2);
                } else{
                    alert("没有了");
                }
            }
            
            function copyRow () {


                var cloneRow = table.rows[table.rows.length-2];
                
                if (table.rows.length>2) {
                    var newRow = table.insertRow(table.rows.length-1);
                    var cell0 = newRow.insertCell(0);
                    cell0.innerText = cloneRow.cells[0].innerText;
                    
                    var cell1 = newRow.insertCell(1);
                    cell1.innerText = cloneRow.cells[1].innerText;
                    
                } else{
                    alert("没有可复制的行了！！");
                }
            }
            
            
            function changeStyle () {
                var color = prompt("请输入十六进制颜色值");
                table.rows[0].style = "background-color:"+color;

                
            }
            
            
            function getSum () {
                var rows = table.rows;
                if (rows.length<=2) {
                    alert("没有可以计算的和");
                    rows[rows.length-1].cells[1].innerText = "0元";
                    return;
                } else{
                    var sum = 0;
                    for (var i = 1; i<rows.length-1; i++) {
                        var cells = rows[i].cells;
                        sum += parseFloat(cells[cells.length-1].innerText);
                    }
                    
                    rows[rows.length-1].cells[1].innerText = sum + "元";
                }
            }
            
            window.onload = function  () {
                getSum();
            }
        </script>
    </body>
</html>

在这里插入图片描述

Stargazer（仰望星空）
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript中 DOM 的概念解释
norang的博客
06-04 1874
3.1 文档：DOM中的“D” 如果没有document （文档），DOM也就无从谈起。当创建了一个网页 并把它加载到Web浏览器中时，DOM就在幕后悄然而生。它把你编写 的网页文档转换为一个文档对象。 在人类语言中，“对象”这个词的含义往往不那么明确，它几乎可以用来 称呼任何一种东西。但在程序设计语言中，“对象”这个词的含义非常明 确。 3.2 对象：DOM中的“O” 在上一章的末尾，我们向大家展示了几个JavaScript对象的例子。你应该 还记得，“对象”是一种自足的数据集合。与某个特定对象相关联的变
JS中的DOM
qq_48847448的博客
08-06 5357
D——document，没有文档，也就是没有网页，DOM就无从谈起。当创建了一个网页并把它加载到web浏览器中时，DOM就悄然而生。浏览器根据网页文档创建一个文档对象。O——object，对象。对象有三种，1、用户自定义对象2、内建对象，javascript中的对象，如Array，Math，Date等。3、宿主对象，由浏览器提供的对象，如window对象。M——model，模型。正如一个火车模型代表一列真正的火车，DOM代表被加载到浏览器窗口里的当前网页。...
JavaScript中DOM操作
10-12 3910
目录 DOM介绍 获取元素 操作元素 节点操作 DOM介绍 JavaScript一共包括三部分，分别是ECMAScript也就是JavaScript基础、DOM和BOM，前面的文章已经讲过ECMAScrit了、这里是ECMAScript的链接：https://blog.csdn.net/HeZhiYing_/article/details/102218018 今天来将一下DO...
JavaScript之DOM
qq_43751200的博客
06-05 1771
DOM
JavaScript中DOM的操作方法
qq_57606640的博客
10-31 3355
1、获取元素 document.getElementById（） document.getElementsByClassName（）[0] document.getElementsByName（）[0] document.getElementsByTagName（）[0] document.querySelector（） document.querySelectorAll（）[0] 2、获取内容 alert(a.innerHTML);获取代码和内容，但只显示内容。 alert(a.in
一文吃透JavaScript中的DOM知识及用法
不迁怒，不贰过。小知识，大智慧。
11-12 4189
一文带你吃透DOM的知识和用法，绝对实用。 DOM是网页的核心结构，无论是HTML、CSS还是JavaScript，都和DOM 密切相关。HTML的作用是构建DOM结构，CSS的作用是设定样式，JavaScript的作用是读取以及控制、修改DOM。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
Javascript之dom
weixin_51767056的博客
09-03 1070
文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言(HTML或XML)的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式。element . 属性例如：div . idelement . getAttribute('属性') //自己定义的
JavaScript之彻底搞懂DOM与BOM及其区别与用法
热门推荐
跳探戈的小龙虾的博客
03-19 1万+
ECMAScript 是JavaScript（简称JS）的标准，浏览器就是去执行这个标准。 DOM（DocumentObjectModel ，文档对象模型）一种独立于语言，用于操作xml，html文档的应用编程接口。对于JavaScript：为了能够使JavaScript操作Html，JavaScript就有了一套自己的DOM编程接口。 BOM 是 Browser Object Model，浏览器对象模型。BOM 是为了控制浏览器的行为而出现的接口。
JavaScript中的DOM对象
qq_44971635的博客
03-23 2459
文章目录 前言 一、DOM是什么？ 二、获取元素节点的方法 1.获取body和head节点 2.通过ID获取元素节点 3.通过class获取元素节点 4.通过name属性获取元素节点 5.通过标签名获取元素节点 6.通过css选择器获取元素节点 三、操作元素的属性 四、操作元素的样式属性 五、节点操作 六、节点的属性 六、其他 前言 提示：DOM DOM树理解。 一、DOM是什么？ 示例：DOM（document object mod...
JavaScript DOM操作
好好学习天天向上
03-27 5150
文章目录JavaScript DOM操作事件的冒泡和事件的委托事件冒泡事件委派 JavaScript DOM操作 事件的冒泡和事件的委托 事件冒泡 同一片区域，给其中的元素都绑定了点击事件，点击公共区域时，触发顺序？ 假设如图，从span->box1->body依次触发 事件的冒泡(Bulle)：事件的向上传导，事件在目标元素处理后，会由内向外的一层层传递 在开发中大部分情况冒泡都是有用了，如果不需要可以通过事件对象event.cancelBubbl取消冒泡。 let span = docum
JavaScript中Dom操作实例详解
12-12
本文实例讲述了JavaScript中Dom操作。分享给大家供大家参考，具体如下： 博主将按照增删改查的方式来介绍一下Dom的主要操作。 1、增加节点 添加节点的操作主要分为3步： （1）创建要添加的新节点 （2）找到要添加到...
JavaScript中DOM对象的思维导图
11-05
`Element`对象是DOM中的一个重要组成部分，代表HTML或XML文档中的单个标签。`Element`对象有许多属性和方法，比如`children`属性可以获取一个元素的所有子元素。`HTMLCollection`和`NodeList`都是存储节点的集合，但...
javascript中dom的基础概念.pdf
12-16
JavaScript 中 DOM 的基础概念 JavaScript 中的 DOM（Document Object Model，文档对象模型）是 HTML 和 XML 文档的编程接口。它使得开发者可以使用 JavaScript 来动态地访问和操作文档的结构和内容。DOM 中的基础...
JavaScript中 DOM操作方法小结
01-21
DM是(Document Object Model)的简称。 一.找元素 document.getElementById() 根据id选择器找，最多找一个； document.getElementsByName() 根据name找，找出的是数组；  document.getElementsByclassName()...
详解Javascript中DOM的范围
10-20
“DOM2级遍历和范围”模块定义了“范围”接口。通过范围可以选择文档中的一个区域，而不必考虑节点的界限（选择在后台完成，对用户是...下面这篇文章主要介绍了Javascript中DOM范围的相关资料，需要的朋友可以参考下。
vue开发引入第三方插件的方式及其区别
最新发布
你们瞎搞
08-22 366
npm。
2024前端面试题-js篇
FormAda的博客
08-22 831
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
【js】各类前端输入校验方法
galaxyJING的博客
08-21 358
【代码】【js】各类前端输入校验方法。
Nuxt3【内置的工具函数】2024最新版
朝阳39的博客
08-20 1007
用于在Vue应用程序或API路由中进行HTTP请求，详见。
Javascript中DOM
03-31
在JavaScript中，可以使用DOM API来访问和操作文档的各个部分，包括元素、属性、样式、事件等。常见的DOM操作包括： 1. 获取元素：通过getElementById、getElementsByClassName、getElementsByTagName等方法获取...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值