DOM学习篇 一

最新推荐文章于 2023-04-22 23:27:05 发布
最新推荐文章于 2023-04-22 23:27:05 发布
阅读量133 收藏 1
点赞数 1
分类专栏： 笔记 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46440394/article/details/119042558
版权
本文档介绍了DOM的基本概念，包括如何查看和操作HTML文档中的节点。通过DOM，可以使用JavaScript动态地修改网页元素。文章详细阐述了节点的类型、获取节点的方法，如getElementById、getElementsByClassName等，并探讨了新建、添加、删除和替换节点的操作。
摘要由CSDN通过智能技术生成

DOM的介绍

Document Object Model：文档对象模型
是XML解析文档；DOM操作，可以简单理解成“元素操作”

原理：将html文档，看成一颗节点树，然后，使用dom提供的API,对应的节点进行增删改查；从而使用通过js 去动态操作html元素
在这里插入图片描述
将其用树形表示是为了更好地给每一个元素进行定位，以便让我们找到想要的元素
每一个元素就是一个节点，而每一个节点就是一个对象。也就是说，我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作

一、查看节点

ducument：查看整个文档
dicument.body：返回body节点
childNodes：查看所有的子节点
firstChild \ lastChild：第一个\ 最后一个子节点
firstElementChild \ lastElementChild：第一个\ 最后一个元素节点
parentNode：父节点
nextSibling \ nextElementSibling：返回给定节点的下一个节点
previousSlibing \ previousElementSibling: 返回给定节点的上一个节点

hasChildNodes：是否有子节点

二、节点类型

DOM节点共有12种类型，不过常见的只有3种
（1）元素节点
（2）属性节点
（3）文本节点

节点的三个属性
1.nodeName
文档节点name为#document
元素节点name为标签名(大写)
文本节点name为#text
属性节点name 为属性名
注释节点name 为#comment
2.nodeType在这里插入图片描述
3.nodeValue
文本节点的nodeValue就是文本内容
注释节点的nodeValue就是注释内容
元素节点的nodeValue是null
属性节点的nodeValue是属性值

三、获取节点的六种方法

（1）getElementById(“id名”)
通过元素ID取得节点
兼容所有浏览器，推荐使用。
id和别的元素的name不能相同，这是IE的存在的问题

<body>
<p id="p1">通过id名获取元素</p>
<script>
    var op1 = document.getElementById
最低0.47元/天 解锁文章
月亮不营业
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学习篇——闭包/虚拟DOM
m0_57662158的博客
06-14 205
闭包 和 虚拟DOM 这个概念一直没有被明确的定义， 每个人心中都可以有自己的理解，希望通过下面的学习介绍，大家可以有个大概的理解。
虚拟浏览器 JSDOM 学习笔记
软件哲学
09-24 3387
这篇文章只是个人学习笔记，所以结构不清，信息不全，建议阅读原版项目手册。   JSDOM 是用nodejs实现的用于测试的虚拟浏览器。 基本例子 const dom = new JSDOM(``, { url: "https://example.org/", referrer: "https://example.com/", contentType: "text/html",...
虚拟DOM分析学习篇
Dear_Mr的博客
05-20 573
昨天分享了一篇关于“虚拟DOM”的文章，但是今天感觉自己还是放不下它，决定细细探究一下整体结构分析创建的目录结构如下：首先初始化package.json文件: npm init然后全局安装Browserify ：npm install -g browserify最后使用browserify编译：browserify main.js > compiled.js各个文件之间的关系： 各个文件的作用的分
今天学习了吗 DOM速成篇
最新发布
weixin_67225910的博客
04-22 69
DOM：JS操作网页的接口即“文档对象模型”给文档（结构树）提供了一个结构化的表述（有很多类型：element类型、document类型，这里仅举了document类型为例）
网页制作之DOM操作篇
zuefeng的博客
07-31 704
找到标签 a. 直接查找 document.getElementById("i1") ID document.getElementByTagName("div") 标签名 document.getElementByName("div") name document.getElementByClassName("div") 类 b. 间接查找 tag = document.getElementById("..
学习HTML DOM对象，这一篇就够了
万里顾一程的博客
12-27 323
文章目录什么是DOMDOM节点获取DOM节点更新DOM节点删除DOM节点插入DOM节点方法一appendChild()方法二insertBefore() 什么是DOM DOM（ Document Object Model）：文档对象模型 HTML DOM - 针对 HTML 文档的标准模型 HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。 换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准 DOM节点 根据 W3C 的 HTML DOM 标准，
JavaScript学习笔记之DOM篇，带你全面了解什么是DOM
jingjing的博客
08-10 993
DOM在前面的JavaScript学习笔记（一）–JS基础里简单提到过，它是浏览器厂商提供的用来控制html / css 的代码的文档对象模型，是JavaScript的重要组成部分，现在带大家详细了解一下什么是DOM。 什么是DOM DOM的全称是Document Object Model，即文档对象模型，是一套对文档的内容进行抽象和概念化的方法，它允许脚本控制Web页面、窗口和文档。 DOM不是JavaScript语言的一部分，而是内置在浏览器中的一个应用程序接口。 如果没有DOM，JavaScript将
Vue 基础学习篇一
Scenlyf的博客
03-26 133
vue2+vue3的原理解析、知识总结
js全面学习-javascript的基础知识-DOM篇（1）
余光的博客
07-20 352
JavaScript HTML DOM 在dom篇之后我会尽量利用dom技术都写几个demo，帮助大家加深理解。 通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 HTML DOM （文档对象模型） 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model） 通过可编程的对象模型，JavaScript 获得了足够的能力...
JS学习篇（六）——DOM
weixin_43332220的博客
02-03 100
说到DOM相信都非常熟悉，是Document Object Model,也就是文档对象模型，一种独立于语言，用于操作xml，html文档的应用编程接口，它允许脚本控制web页面、窗口、和文档 DOM 标准被分为 3 个不同的部分： 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型 那么知道了DOM定义之后，它到底有什么功能呢？ 1：查询某个元素 2：查询某个元素的祖先、兄弟、以及后代元素 3：获取、修
浅谈JavaScript_DOM学习篇_图片切换小案例
12-12
今天开始学习DOM操作,下面写一个小案例来巩固下知识点. DOM: document object model (文档对象模型) 根据id获取页面元素 :　如:　var xx = document.getElementById(“id”); 根据标签获取元素:　如:　var xx = ...
jQury-DOM篇学习笔记
04-15
jQuery DOM篇的学习主要涵盖了解DOM（Document Object Model）节点的创建、插入、删除以及相关的操作方法。DOM是HTML和XML文档的结构化表示，通过DOM，我们可以方便地访问和修改文档内容。 首先，jQuery提供了简便...
JavaScript DOM 学习总结(五)
10-23
当页面加载时，浏览器会创建页面的文档对象模型（Document Object Model）。文档对象模型定义访问和处理HTML文档的标准方法，本篇文章给大家介绍javascript dom 学习总结(五)，感兴趣的朋友一起学习吧
Javascript入门学习第六篇 js DOM编程第1/2页
01-19
学习英文： Dom：文档对象模型。Document object model Bom：浏览器对象模型。 注：也可以叫窗口对象模型。（window object model.） API：应用编程接口。 注：DOM其实可以看作一种API。 Node：节点。 注：节点...
HTML5标签篇 （一）
限定小码农的博客
03-03 1572
HTML5 一、结构元素 1.header：表示页面中一个内容区块或整个页面的标题 <header class="qui-header"> <h1>国内旅游计划</h1> </header> 2.nav：表示页面中导航链接的部分 3.aside：表示article标签元素内容之外的、与article标签内容相关的辅助信息。可用作...
网页制作任务二：课表
限定小码农的博客
03-12 877
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的课程表</title> <style> body{ margin:0% auto; padding:0; ...
电商网站项目 动态实现（从数据库获取数据）六 商品详情页面
限定小码农的博客
08-29 740
商品详情页面 一、在数据库建立商品详情表 系列表 商品表 规则表
JS循环、选择练习题
限定小码农的博客
07-14 630
组三位最大数 输入a ,b,c 三个个位数（0-9）之间，组成一个最大的三位数 var a=window.prompt("请输入数字a"); var b=window.prompt("请输入数字b"); var c=window.prompt("请输入数字c"); var x; if (a<0||a>9){alert("输入的a不在（0-9）范围内")} if (b<0||b>9){alert("输入的b不在（0-9）范围内")}
小网页制作
限定小码农的博客
03-04 571
1.员工信息表 <!doctype html> <html> <head> <meta charset="utf-8"> <title>员工信息登记表</title> <script type="text/javascript"> function changeColor(node) { ...
HTML DOM标准详解与编程接口
"这篇资源主要介绍了HTML DOM，内容源自W3school，并且经过个人筛选，去除了不必要部分。HTML DOM是W3C标准，它提供了访问和操作HTML及XML文档内容、结构和样式的接口。文章详细讲解了DOM的不同部分，包括核心DOM、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值