对JS中DOM对象的理解案例

最新推荐文章于 2023-11-24 22:32:09 发布
最新推荐文章于 2023-11-24 22:32:09 发布
阅读量362 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41824890/article/details/79553542
版权

  第一次写博客，可能写的不好，还请多多指教。 最近一直在学习HTML和JS，对DOM对象有一点点理解，希望可以帮助大家！

 在学习DOM之前，你需要对以下指示有一定的了解：

1.HTML

2.CSS

4.JavaScript

DOM:(Document Object Model)文档对象模型，通过可编程的对象模型，获得足够的能力，来创建动态的HTML。

文档：指的就是HTML

对象：指得就是页面的元素，标签（也就是节点），我的一些理解

DOM对象把从服务器上获得的HTML文档看成一个DOM树，结构如下：


一、DOM的几种功能：

     1）、JavaScript能够改变页中的HTML元素

     2）、JavaScript能够改变页中所有的属性

     3）、JavaScript能够改变页中CSS的样式

     4）、JavaScript能对页中的所有的时间做出反应

二、案例：

DOM中节点的创建、查找、增加、删除的综合应用：

       <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>购物车</title>
<style>
.td{
text-align: center;
}
</style>
<script>
//加入购物车
//调用时传入了this，他指代你正点击的那个元素,点的是
//那个按钮，即传入的那个按钮的元素
//给方法加参数接受该值，注意参数名不能是关键字this
function add_shoppingcart(btn) {
//获取按钮的爷爷tr
var tr = btn.parentNode.parentNode;
//获取爷爷的孩子们,此处tr行下有多的td列，是一个数组
var tds = tr.getElementsByTagName("td");
//获取商品名
var name = tds[0].innerHTML;
//获取单价
var price = tds[1].innerHTML;
                //创建新行，创建新的节点
                var ntr=document.createElement("tr");
                //给这个新的节点加入内容
                ntr.innerHTML='<tr>'+
                '<td>'+name+'</td>'+
'<td>'+price+'</td>'+
'<td>'+
'<input type="button" value="-" οnclick="sub(this);"/> '+
'<input type="text" size="3" readonly="" value="1" />'+
' <input type="button" value="+" οnclick="add(this)";/>'+
'</td>'+
'<td>'+price+'</td>'+
'<td>'+
'<input type="button" value="×" οnclick="del(this);"/>'+
'</td>'+
'</tr>';
//通过id选择器选择购物车表中的tbody元素
var t=document.getElementById("good");
//将添加的内容追加到tbody中
t.appendChild(ntr);
//这个新节点的内容添加样式
ntr.className="td";
//加入购物车后计算总价
total();
}
//删除购物车
function del(de){
//获取删除按钮的父节点的父节点的父节点tbody
var tbody=de.parentNode.parentNode.parentNode;
//获取删除按钮的父节点的父节点的父节点tr
var tr=de.parentNode.parentNode;
//删除节点必须通过父节点，
tbody.removeChild(tr);
//删除重新计算总价
total();
}
//增加数量并计算其价格
function add(sum){

var text=sum.parentNode;
var text1=text.getElementsByTagName("input")[1];
//页面所有的加法都是字符串
//此处的++只有数字可以++，因此它会自动转型
    text1.value++;
    //计算增加数量后的价格
    var tr=sum.parentNode.parentNode;
    var tds1=tr.getElementsByTagName("td")[1];
    var tds3=tr.getElementsByTagName("td")[3];
    tds3.innerHTML=tds1.innerHTML*text1.value;
    total();
}
function sub(de){
var text=de.parentNode;
var text1=text.getElementsByTagName("input")[1];

//页面所有的加法都是字符串
    //计算减少数量后的价格
    if(parseInt(text1.value)>1){
    text1.value--;
    var tr=de.parentNode.parentNode;
    var tds1=tr.getElementsByTagName("td")[1];
    var price=tds1.innerHTML;
    var tds3=tr.getElementsByTagName("td")[3];
    tds3.innerHTML=tds3.innerHTML-price;
    }
    total();
}
//合计
function total(){
var tbody=document.getElementById("good");
var trs=tbody.getElementsByTagName("tr");
var sum=0;
for(i=0;i<trs.length;i++){
var tds=trs[i].getElementsByTagName("td")[3];
var price=tds.innerHTML;
sum+=parseInt(price)
}
var total=document.getElementById("total");
total.innerHTML=sum;
}
</script>
</head>


<body>
<table border="1" cellspacing="0" align="center" bordercolor="#B0C4DE" width="500">
<caption>
<h2>淘宝</h2></caption>
<tr bgcolor="#B0E0E6">
<th>商品</th>
<th>单价(元)</th>
<th>颜色</th>
<th>库存</th>
<th>好评率</th>
<th>操作</th>
</tr>
<tr align="center">
<td>罗技M185鼠标</td>
<td>80</td>
<td>黑色</td>
<td>893</td>
<td>98%</td>
<td><input type="button" value="加入购物车" οnclick="add_shoppingcart(this)"></td>
</tr>
<tr align="center">


<td>微软880键盘</td>
<td>150</td>
<td>黑色</td>
<td>9028</td>
<td>96%</td>
<td><input type="button" value="加入购物车" οnclick="add_shoppingcart(this)"></td>
</tr>
<tr align="center">
<td>洛克inphone6手机壳</td>
<td>60</td>
<td>白色</td>
<td>900</td>
<td>95%</td>
<td><input type="button" value="加入购物车" οnclick="add_shoppingcart(this)"></td>
</tr>
<tr align="center">
<td>蓝牙耳机</td>
<td>100</td>
<td>蓝色</td>
<td>125</td>
<td>99%</td>
<td><input type="button" value="加入购物车" οnclick="add_shoppingcart(this)"></td>
</tr>
<tr align="center">
<td>金士顿U盘</td>
<td>120</td>
<td>黑丝</td>
<td>150</td>
<td>98%</td>
<td><input type="button" value="加入购物车" οnclick="add_shoppingcart(this)"></td>
</tr>
</table>
<table border="1" cellspacing="0" align="center" bordercolor="#B0C4DE" width="500" >
<caption>
<h2>购物车</h2>
</caption>
<tr bgcolor="#B0E0E6">
<th width="180">商品</th>
<th>单价(元)</th>
<th>数量</th>
<th>金额(元)</th>
<th>删除</th>
</tr>
<tbody id="good">
<!---->
</tbody>
<tr>
<td colspan="3" align="right" >总计</td>
<td id="total"></td>
<td></td>
</tr>
</table>
</body>
</html>

运行结果：


------------------------

      通过页面中的按钮对其进行相应的操作


                                                   


qq_41824890
关注
JavaScript中 DOM 的概念解释
norang的博客
06-04 1912
3.1 文档：DOM中的“D” 如果没有document （文档），DOM也就无从谈起。当创建了一个网页 并把它加载到Web浏览器中时，DOM就在幕后悄然而生。它把你编写 的网页文档转换为一个文档对象。 在人类语言中，“对象”这个词的含义往往不那么明确，它几乎可以用来 称呼任何一种东西。但在程序设计语言中，“对象”这个词的含义非常明 确。 3.2 对象：DOM中的“O” 在上一章的末尾，我们向大家展示了几个JavaScript对象的例子。你应该 还记得，“对象”是一种自足的数据集合。与某个特定对象相关联的变
DOM对象初步理解
ZiXiaweb的博客
08-24 287
了解DOM需要清楚几个问题： 什么是DOM？ DOM可以用来干什么？ DOM是怎么来的？ 怎么使用DOM？ 1. 什么是DOM？ HTML DOM 是 HTML 的标准对象模型和编程接口。 它定义了： 作为对象的 HTML 元素 所有 HTML 元素的属性 访问所有 HTML 元素的方法 所有 HTML 元素的事件 换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。 2. DOM可以用来干什么？ 理解了DOM是API，就知道它就是一些功能，通过这些功能可以对HTML
DOM对象与jQuery对象的理解与分析
gtsjx的博客
09-01 1280
DOM对象是我们用js获得的对象 jQuery对象是用jQuery类库的选择器获得的对象 var domObj = document.getElementById("id"); //DOM对象 var $obj = $("#id"); //jQuery对象; jQuery对象就是通过jQuery包装DOM对象后获得的对象，是jQuery的对象就能使用jQuery的方法，例如$("#fo
DOM
weixin_33973600的博客
05-07 577
一、DOM简介 D——document，没有文档，也就是没有网页，DOM就无从谈起。 当创建了一个网页并把它加载到web浏览器中时，DOM就悄然而生。浏览器根据网页文档创建一个文档对象。 O——object，对象。 对象有三种， 1、用户自定义对象 2、内建对象，javascript中的对象，如Array，Math，Date等。 3、宿主对象，由浏览器提供的对象，如window对象。...
Dom对象方法的理解
shenmill的博客
08-30 298
Dom—文档对象模型(Document Object Model)，对象方getElementById()， getElementsByTagName(),getElementsByClassName(), getElementsByName()
JS基础-DOM的基本了解
weixin_43624099的博客
04-07 186
JS基础-DOM的基本了解一 、文档对象模型二、节点三、事件总结 这是我的学习笔记，学的时候记录，后续方便查找复习。 一 、文档对象模型 DOM = Document Object Model 文档对象模型。JS通过DOM对HTML文档进行操作。 文档： 整个HTML网页文档； 对象： 将网页中的每一个部分都转换成了一个对象； 模型： 使用模型来表示对象之间的关系，方便获取对象；模型就是提现节点与节点之间的关系，如父子节点关系，兄弟节点等关系 二、节点 节点：Node-构成HTML文档最基本的单元 文档
JavaScript-DOM实战案例
09-18
在这个实战案例中，你可能会学习到以下JavaScript DOM操作技巧： - **选择元素**：使用`document.getElementById`、`document.querySelector`、`document.querySelectorAll`等方法选取特定的DOM元素。 - **事件监听...
Auction(JSP中用Js进行dom操作ajax静态刷新案例代码).rar
09-01
在本案例中，"Auction(JSP中用Js进行dom操作ajax静态刷新案例代码)"是一个典型的Web开发示例，涉及到的技术主要包括AJAX、JavaScript、DOM、Java以及JSP。下面将详细阐述这些技术及其在本项目中的应用。 首先，AJAX...
用JavaScript获取DOM元素位置和尺寸大小的方法
10-27
总之，理解和掌握JavaScript中的DOM元素位置和尺寸获取方法是Web开发中的基本技能，这对于创建交互式、响应式的网页至关重要。通过熟练运用这些属性和方法，开发者可以实现各种创新的效果，提升用户体验。
javascript表格排序案例(面向对象)案例资料
02-15
在本案例中，我们可以创建一个`Table`对象，用于存储表格数据并提供排序方法。 1. **对象属性**：`Table`对象可能包含`data`属性，存储表格的数据数组，每个元素代表一行数据，可以是包含列名和对应值的对象。例如...
掌握JavaScript高级BOM与DOM对象及实战案例
2. 介绍如何使用DOM实现基础案例，如案例1中的电灯开关，通过DOM对象切换图片来模拟开关状态，这涉及了事件监听和元素操作的实践应用。 课程的学习目标不仅限于理论，还包含四个实际案例，旨在让学生在实践中巩固所...
JavaScript DOM 结构理解
凝弧
03-22 365
DOM 节点（Node）树形图： XML：可自定义语法标签，且标签必须闭合，主要用于传输数据，类似JSON对象的结构，现已被JSON取代 Document：是一个特殊的构造函数，只能由系统来实例化（new） 原型方法： HTMLDocument.prototype 定义了一些属性：body、head … Document.prototype 定义了一个属性：documentE...
js DOM 理解图
tangiwang的博客
01-31 97
关于DOM对象的理解
weixin_30480075的博客
05-19 111
DOM（Document Object Model）定义了访问HTML文档对象的一套属性、方法和事件。本质是建立网页与脚本语言或程序语言沟通桥梁。随处可搜到一个浏览器对象分层结构的图片，参照那个图片会有更好的理解。 转载于:https://www.cnblogs.com/3QAll/p/3737833.html...
JSDOM详解
Baron的博客
04-18 6786
Dom元素（节点）DOM(文档对象模型)JavaScriptDOM能做什么???想要操作HTML首先要获取这些元素DOM 对象节点属性 DOM(文档对象模型) 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model） HTML DOM树 通过这个对象模型，javascript获得了足够的能力来创建动态的HTML JavaScriptDOM能做什么??? Ja...
JavaScript-DOM详解
最新发布
__猫玖__的博客
11-24 977
在 JavaScript 中，DOM（文档对象模型）是表示和操作 HTML 或 XML 文档的标准接口。DOM 提供了一种在代码中动态访问和更新文档的方式。文档节点是 DOM 中的最顶层节点，代表整个文档。下面详细说明文档节点的一些概念和操作，并提供相应的示例。在 JavaScript 中，事件是与文档或浏览器交互时发生的事情的表示。这些事件可以是用户的操作，也可以是浏览器或文档本身的状态变化。包含有关事件的详细信息。事件从目标元素冒泡至根元素。将事件处理程序添加到父元素，利用事件冒泡减少处理程序数量。
JS 之 DOM详解
玄鱼殇
07-07 7794
dom操作博大精深，源远流长～
我对Dom对象的一些理解
weixin_30511039的博客
06-03 79
Dom就是html的模型，将每个标签都作为一个对象，javascript通过调用dom中的属性，方法就可以对网页中的文本框，层等元素进行编程控制。比如操作文本框的dom对象，就可以读取文本框的值，设置文本框的值。javascript→dom相当于C#→.net framwork,dom就是.net framwork中的类，函数。 转载于:https://www.cnblogs.com/sw123/...
Javascript：DOM的概念理解，以及相关要点
qq_64131064的博客
08-09 346
1、节点（node），是构成网页的最基本部分，网页中每一个部分都是被称为节点（Node）——构成HTML文档最基本的单元。。2、这里需要大家注意，虽然说，都叫做节点，但是节点的类型有所区别（标签我们称为元素节点、属性称为属性节点、文本称为 文本节点、文档称为文档节点），这也就导致了属性与方法不同。文档节点：整个HTML文档元素节点：HTML文档中的HTML标签属性节点：元素的属性文本节点：HTML标签中的文本内容。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值