javaScript核心学习 （三）DOM对象学习

最新推荐文章于 2024-09-04 20:18:34 发布
最新推荐文章于 2024-09-04 20:18:34 发布
阅读量94 收藏
点赞数 1
分类专栏： 前端学习 文章标签： javascript 学习 开发语言 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_67931344/article/details/131849017
版权

接下来就要进入DOM的学习了，配合插图，表格，示例代码以及运行效果的展示，可以清楚的知道需要掌握的知识点。

DOM对象学习

一.DOM对象的认识

1.简单介绍

  1. dom全称为Document Object Model，文档对象模型。
  2. DOM是一种用于表示和操作HTML、XML或XHTML文档的标准编程接口。DOM将一个文档表示为一个树状结构，其中每个节点表示文档中的一个元素、属性、文本等。

2.节点树

  1. 节点（Node）：DOM树中的每个元素、属性、文本都被表示为一个节点。节点可以有子节点和父节点，形成了树的结构。
  2. 划分：
    元素节点（Element Node）：表示HTML或XML文档中的元素，如等。
    文本节点（Text Node）：表示HTML或XML文档中的文本内容。
    属性节点（Attribute Node）：表示HTML或XML元素的属性，如id、class等。
  3. 各节点之间关系：
    根节点（Root Node）：DOM树的顶层节点，通常是文档的节点。
    父节点（Parent Node）：一个节点的直接上级节点。
    子节点（Child Node）：一个节点的直接下级节点。
    兄弟节点（Sibling Node）：具有同一父节点的节点。

如图所示：在这里插入图片描述

二.获取元素的操作

1.利用document对象的方法

1.1 使用

方法说明
document.getElementById()返回指定id的第一个对象的引用
document.getElementByName()返回指定名称的对象集合
document.getElementByTagName()返回指定标签名的对象集合
document.getElementByClassName()返回指定类名的对象集合
  • 通过这个表，我们不难发现，除了第一个是返回对象的引用，别的都是返回一个对象集合，所以document.getElementById()是我们使用比较多的。
  • 其中HTML5中还新增了一个document.querySelector（）的方法，语言可以获取。

1.2 代码示例

<body>
//简单创建三个div
<div id="box">box</div>>
<div class="bar">bar</div>
<div name="main">main</div>
<script>
     //通过id获取对象
    console.log(document.getElementById("box"));
     //通过类名获取对象集合
    console.log(document.getElementsByClassName("bar"));
     //通过标签名获取所有的div对象集合
    console.log(document.getElementsByTagName("div"));
    //通过name获取所有为main的对象集合
     console.log(document.getElementsByName("main"));
</script>
</body>

1.3 效果

在这里插入图片描述
可以看到为对象集合的几个都有索引，想要精准定位可以根据集合的索引来。

2.利用document对象的属性

2.1使用方法

属性说明
document.body返回文档的body元素
document.documentElement返回文档的html元素
document.forms返回文档所有form对象的引用
document.images返回文档所有image对象的引用

2.2对比

其中document对象的方法也可以获取标签的对象引用，两者获取的是同一对象：

<script>
    //通过方法获取body对象
    var body=document.getElementsByTagName('body')[0];
    //通过属性获取对比
    console.log(document.body===body);  //结果返回true   
</script>

三.修改元素内容

1.元素属性

  • innnerHTML：设置或者返回元素开始和结束标签之间的HTML（作用范围是比较大的）
  • innerText：设置或返回元素中去除所有标签的内容
  • textContent：设置或者返回指定节点的文本内容（作用范围最小）

还有我们之前就常使用的向文档写入指定内容的方法：document.write()和document.writeln()

2.代码示例

我们用这个来实现改变盒子的大小，单击盒子单数变大，偶数变小，其中文字也变。

<body>
<div class="box" id="box"></div>
<script>
    var box=document.getElementById('box');
    var i=0;
    box.onclick=function (){
        ++i;
        if (i%2){
            this.style.width='200px';
            this.style.height='200px';
            this.innerHTML='大';
        }else {
            this.style.width='50px';
            this.style.height='50px';
            this.innerHTML='小';
        }
    }
</script>
</body>

在这里插入图片描述
其中元素样式的知识可以回顾一下css的知识点，或者帮助文档。点击后，偶数如下：
在这里插入图片描述

四.节点的操作

1.获取节点

1.1基本属性

  • 访问子节点：firstChild（首个子节点）；lastChild（最后一个子节点）
  • 访问当前节点：nodeName（节点的名称）；nodeValue（节点的值）
  • nextSibling：返回指定节点的后一个节点
  • previousSibling:返回指定节点的前一个节点
  • parentNode：访问当前元素节点的父节点
  • childNodes：访问当前元素结点的所有子节点的集合

1.2代码示例

<body>
<ul id="ul">
  <li>js</li>
  <li>dom</li>
  <li>bom</li>
  <li>xml</li>
<!--    这是一个注释-->
</ul>
<script>
    //访问document的第一个子节点
    console.log(document.firstChild);    //应该为<! DOCTYPE html>
    //访问document的第二个子节点
    console.log(document.firstChild.nextSibling);
    //查看ul下面的所有子节点
    var ull=document.getElementById("ul");
    console.log(ull.childNodes);
    //查看ul的父节点
    console.log(ull.parentNode);
</script>
</body>

在这里插入图片描述

2.添加节点

2.1 方法说明

方法名说明
document.createElement()创建元素节点
document.createTextNode()创建文本节点
document.createAttribute()创建属性节点
appendChild()在指定字节列表后添加节点
insertBeforet()插入到指定子节点之前
getAttributeNode()返回指定节点的属性节点
setAttributeNode()设置指定节点的属性节点

2.2代码示例

为了更好的掌握节点的追加和使用，接下来创建一个

元素节点，并为其添加文本和属性为例。

<body>
<script>
   //分别设置h2元素节点，文本结点，以及属性节点
  var h2=document.createElement('h2');
  var text=document.createTextNode('hello js!');
  var attr=document.createAttribute('align');
  //为属性节点赋值，属性节点必须要设置Value值
  attr.value='center';
  // 并将文本和属性添加到元素节点当中
  h2.setAttributeNode(attr);
  h2.appendChild(text);
  //将设置好的元素节点添加到body当中
  document.body.appendChild(h2);
</script>
</body>

输出如下：
在这里插入图片描述

3.删除节点

常用的删除方法，删除元素：removeChild（），删除属性值：removeAttributeNode（）。
这个方法的使用，自己可以尝试写写就好了。

4.综合案例使用

编写了一个简单的购物车应用场景，但是还有一个小缺憾，就是添加商品时不能再原有购物车中的已有商品中添加数量，自己可以动手改善一下。

<!DOCTYPE html>
<html>
<head>
  <title>购物车应用</title>
  <style>
    #cart {
      margin-bottom: 20px;
    }
    .item {
      border: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 10px;
    }
    .item__title {
      font-weight: bold;
    }
    .item__price {
      color: #666;
    }
    .add-btn,
    .remove-btn {
      border: none;
      background: #4caf50;
      color: #fff;
      padding: 4px 8px;
      margin-right: 8px;
      cursor: pointer;
    }
    .remove-btn {
      background: #f44336;
    }
  </style>
</head>
<body>
<h2>购物车应用</h2>

<div id="cart"></div>

<ul id="product-list">
  <li>
    <span class="item__title">商品 1</span>
    <span class="item__price">$10</span>
    <button class="add-btn">添加到购物车</button>
  </li>
  <br>
  <li>
    <span class="item__title">商品 2</span>
    <span class="item__price">$15</span>
    <button class="add-btn">添加到购物车</button>
  </li>
  <br>
  <li>
    <span class="item__title">商品 3</span>
    <span class="item__price">$20</span>
    <button class="add-btn">添加到购物车</button>
  </li>
</ul>

<script>
  var cartNode = document.getElementById('cart');
  var productList = document.getElementById('product-list');

  // 添加到购物车
  function addItemToCart(itemTitle, itemPrice) {
    var item = document.createElement('div');
    item.classList.add('item');

    var title = document.createElement('span');
    title.classList.add('item__title');
    title.textContent = itemTitle;

    var price = document.createElement('span');
    price.classList.add('item__price');
    price.textContent = itemPrice;

    var addButton = document.createElement('button');
    addButton.classList.add('add-btn');
    addButton.textContent = '添加';
    addButton.addEventListener('click', function() {
      increaseQuantity(item);
    });

    var removeButton = document.createElement('button');
    removeButton.classList.add('remove-btn');
    removeButton.textContent = '移除';
    removeButton.addEventListener('click', function() {
      decreaseQuantity(item);
    });

    var quantity = document.createElement('span');
    quantity.textContent = '1';

    item.appendChild(title);
    item.appendChild(price);
    item.appendChild(addButton);
    item.appendChild(removeButton);
    item.appendChild(quantity);

    cartNode.appendChild(item);
  }

  // 增加数量
  function increaseQuantity(item) {
    var quantityNode = item.querySelector('span:last-child');
    var quantity = parseInt(quantityNode.textContent);
    quantity++;
    quantityNode.textContent = quantity;
  }

  // 减少数量
  function decreaseQuantity(item) {
    var quantityNode = item.querySelector('span:last-child');
    var quantity = parseInt(quantityNode.textContent);
    quantity--;
    if (quantity === 0) {
      item.parentNode.removeChild(item);
    } else {
      quantityNode.textContent = quantity;
    }
  }

  // 绑定添加到购物车按钮的点击事件
  var addButtons = document.getElementsByClassName('add-btn');
  for (var i = 0; i < addButtons.length; i++) {
    addButtons[i].addEventListener('click', function() {
      var item = this.parentNode;
      var title = item.querySelector('.item__title').textContent;
      var price = item.querySelector('.item__price').textContent;
      addItemToCart(title, price);
    });
  }
</script>
</body>
</html>

效果如下：
在这里插入图片描述

五.小结

这一部分的内容，对于后续的学习十分关键，因为你不管是前端还是后端，DOM和BOM都是必须掌握的内容。后面还要学Vue，AJAx…都密切相连，正因为初学时自己一代而过，所有在学习Vue时总是要回去翻看之前的知识，所以又重新学习了一遍，于是有了这篇博客~。

爱笑的蓝孩子～
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
javascript学习基础笔记之DOM对象操作
01-19
DOM（文档对象模型）是Web开发中的核心概念，它为HTML和XML文档提供了一种结构化的表示方式。这个API允许开发者通过编程的方式访问和修改页面的结构、...因此，深入学习DOM对象和操作是每个前端开发者必备的技能之一。
JavaScript学习总结(一) ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）
11-28
一、JavaScript简介 JavaScript是一种解释执行的脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型，它遵循ECMAScript标准。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的...
核心DOM对象模型（JavaScript）
萌猩的博客
01-19 364
核心DOM对象模型（JavaScript） 概念 Document Object Model 文档对象模型。 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。 W3C DOM 标准被分为 3 个不同的部分： 核心 DOM - 针对任何结构化文档的标准模型 * Document：文档对象 * Element：元素对象 * Attribute：属性对象 * Text：文本对象 * Comment:注释对象 * Node：节点对象，其他5个的父对象 XML
JavaScript的学习之DOM的查询（一）
人生苦短
06-26 576
对于DOM的查询内容知识点比较多，分成几个部分学习，这节学习主要掌握三个知识点。
JavaScript：DOM对象
盒马的博客
12-23 1308
讲解JavaScript中的DOM对象，并介绍其获取，修改方式
JavaScript中的DOM对象
qq_44971635的博客
03-23 2476
文章目录 前言 一、DOM是什么？ 二、获取元素节点的方法 1.获取body和head节点 2.通过ID获取元素节点 3.通过class获取元素节点 4.通过name属性获取元素节点 5.通过标签名获取元素节点 6.通过css选择器获取元素节点 三、操作元素的属性 四、操作元素的样式属性 五、节点操作 六、节点的属性 六、其他 前言 提示：DOM DOM树理解。 一、DOM是什么？ 示例：DOM（document object mod...
Javascript学习- DOM获取&属性操作
Java硬件工程师的博客
05-12 3551
DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML文档交互的API白话文:DOM是浏览器提供的一套专门用来操作网页内容的功能开发网页内容特效和实现用户交互标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected自定义属性：在html5中推出来了专门的data-自定义属性在标签上一律以data-开头在DOM对象上一律以dataset对象方式获取。
JavaScript-DOM 学习（含案例源码）
weixin_45515107的博客
05-05 1856
1、DOM概念 文档对象模型（Document Object Model,简称DOM）,是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。 W3C已经定义了一系列的DPM接口，通过这些DOM接口可以改变网页的内容、结构和样式 1.1、DOM树 文档：一个页面就是一个文档，DOM中使用document表示 元素：页面中的所有标签都是元素，DOM中使用element表示 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示 注意：DOM把
Javascript之BOM与DOM讲解
热门推荐
晨港飞燕的专栏
05-13 8万+
一.Javascript组成JavaScript的实现包括以下3个部分：ECMAScript(核心)描述了JS的语法和基本对象。文档对象模型 （DOM）处理网页内容的方法和接口浏览器对象模型（BOM）与浏览器交互的方法和接口javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异,IE 扩展了 BOM，...
前端基础学习——JavaScript之BOM模型与DOM模型
weixin_53919192的博客
07-06 1359
本文为大家带来了前端基础学习——JavaScript之BOM模型与DOM模型，希望对你有帮助~~
前端技术学习第四讲：JavaScript中DOM和BOM
跟着老高学Java
03-27 1688
JavaScript中DOM和BOM 一、DOM和BOM DOM：文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTMl和XML文档是通过说明部分定义的)。 BOM：浏览器对象模型（Browser Object Model)，简称BOM），是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可
Javascript核心DOM操作 学习笔记
qq_45192089的博客
03-25 2433
Day01 1、web APIs和JS基础关联性 1.1 JS的组成 1.2 JS基础阶段以及Web APIs阶段 JS基础阶段： 我们学习的是ECMAscript标准规定的基本语法； 要求掌握JS基础语法； 只学习了基本语法，做不了常用的网页交互效果； 目的是为了JS后面的课程打基础、做铺垫； Web APIs阶段： Web APIs是W3C组织的标准； Web APIs我们主要学习DOM和BOM； Web APIs 是JS所独有的部分； 主要学习页面交互功能； 需要使用JS基础的课程内容做基础； 2、
JavaScript学习笔记之DOM操作实例分析
10-17
JavaScript DOM操作是Web开发中的核心技能之一，它允许开发者通过编程方式访问和修改HTML或XML文档的结构、样式和内容。DOM（Document Object Model）是一个树状结构，将网页内容组织成一系列相互关联的节点。 一、...
JS都有哪些操作数组的方法
最新发布
ggq53219的博客
09-04 274
JavaScript 中操作数组的方法非常丰富，这些方法大致可以分为几类：创建和初始化数组、添加元素、删除元素、遍历数组、搜索元素、数组排序、数组映射和过滤等。
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 2483
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1363
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
vue3使用-watch监听总结
weixin_44072254的博客
09-01 466
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。监听数组的方式-示例。
在 Vue 中实现跨项目数据传递
世轩的博客
09-03 1109
需要注意的是，跨项目数据传递可能会带来一些安全和数据一致性的问题。在实际应用中，要根据具体情况选择合适的方法，并确保数据的安全性和可靠性。同时，对于敏感数据，应该采取加密等安全措施。
JavaScript学习笔记：从基础到DOM编程
"这是一份全面的JavaScript学习笔记，涵盖了从CSS样式表基础到JavaScript语法、DOM编程等多个方面，旨在帮助读者深入理解并掌握JavaScript语言。" 在这份笔记中，作者首先介绍了CSS样式表的基本概念，包括什么是CSS...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱笑的蓝孩子～

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值