DOM基础

最新推荐文章于 2023-03-14 23:42:36 发布
原创 最新推荐文章于 2023-03-14 23:42:36 发布 · 403 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了DOM（文档对象模型）的概念、树结构及节点类型，并讲解了如何通过JavaScript操作DOM来实现网页内容的动态更新。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、DOM简介

        1.DOM是”DocumentObject Model”（文档对象模型）的首字母缩写。当创建了一个网页并把它加载到Web浏览器中时，就会在幕后创建一个文档对象模型
        2.DOM表示被加载到浏览器窗口里的当前页面：浏览器向我们提供了当前页面的模型，而我们可以通过JavaScript访问这个模型
        3.DOM把一份文档表示为一棵树

二、DOM树结构
         浏览器加载该页面并将之转换为树形结构：

                 
         1.DOM树中的一切是以最外层的HTML包含元素，即html元素开始的。使用树的比喻，这叫做根元素（root element）
         2.从根流出的线表示不同标记部分之间的关系。head和body元素是html根元素的孩子（child）；title是head的孩子，而文本 “Trees,trees, everywhere”是title的孩子；相对的，head是title的父亲（parent），title是文本 “Trees,trees, everywhere”的父亲。处在同一层次的且互不包含的两个分支（如head和body）之间称为兄弟（sibling）关系。整个树就这样组织下去，直到浏览器获得与上图类似的结构通常把这样的树结构成为一棵节点树

三、节点
         1.DOM文档是由节点构成的集合，此时的节点是文档树上的树枝或者树叶
         2.DOM中节点的类型：
                  1.元素节点（element node），诸如<head>、<p>、<div>等。元素节点可以包含其它的元素，唯一没有被包含在其它元素里的元素是<html>，它是根元素
                  2.属性节点（attribute node），元素或多或少地有一些属性，属性可以对元素做出一些具体的描述。因为属性总是被放到起始标签里，所以属性节点总是被包含在元素节点中
                  3.文本节点（text node），<h1>元素中包含着文本节点“Trees,trees, everywhere”

四、基本DOM方法
         1.getElementById(id)：
                  返回一个给定id属性的元素节点相对应的对象。这个方法是与document对象相关联的函数。其中document对象代表着整个HTML文档并可以用来访问所有页面中的元素
         2.getElementsByTagName(tagname)：
                  返回一个对象数组，它们分别对应着文档里的一个特定的元素节点
         3.getAttribute()：
                  返回对象的属性值
         4.setAttribute()
                 
nodeName
修改对象的属性值

五、重要DOM属性
         1.childNodes
                  可以将节点树中任何一个元素的所有子元素检索出来，这个属性返回一个数组，包含了给定元素节点的全体子元素
         2.nodeName
                  返回元素节点的名称。注意，返回的结果全部是大写
         3.nodeType
                  用来区分节点的类型，元素节点的nodeType属性值是1，属性节点的nodeType属性值是2，文本节点的nodeType属性值是3
         4.nodeValue
                  可以用来存取文本节点的值。对于元素节点或属性节点这个属性返回空
         5.firstChild和lastChild
                  第一个和最后一个孩子节点。
                  node.firstChild等价于node.childNodes[0]，
                  node.lastChild等价于  node.childNodes[node.childNodes.length – 1]
         6.parentNode
                  返回元素的父节点
         7.nextSibling
                  返回下一个兄弟节点

六、改变网页结构的DOM方法
         1.createElement(tagname)
                  创建新的元素节点，此方法与document对象相关联。新建的元素节点并未与节点树相连
         2.appendChild(node)
                  把新建的节点插入到节点树的某个节点下，成为这个节点的子节点
         3.createTextNode(text)
                  创建文本节点
         4.insertBefore(newNode, targetNode)
                  把一个新元素插入到一个现有元素的前面
         5.replaceChild(newChild, oldChild)
                  替换一个孩子节点
         6.removeChild(node)
                  删除一个孩子节点








hzh134580
关注
DOM元素三大系列
每天都要努力学习哦~~
10-31 521
offset元素偏移量 获取元素距离带有定位父元素的位置 获取元素自身的大小(宽度高度) 返回的数组不带单位 offset常用属性 element.offsetParent 返回作为该元素带有定位的父级元素,如果父级没有定位则返回body element.offsetTop 返回元素相对带有定位父元素上方的偏移 element.offsetLeft 返回元素相对带有定位父元素左边框的偏移 element.offsetWidth 返回自身包括padding 边框,内容区的宽度,返回值不带单位
DOM 元素
最新发布
xyq2024的博客
07-14 1282
DOM 元素是构成网页文档的基本单元。每个 DOM 元素都对应于文档中的一个标签，例如<div><span><a>等。每个元素都可以有属性，如idclassstyle等，这些属性可以用来控制元素的行为和外观。DOM 元素是网页开发中的基础概念。通过操作 DOM 元素，我们可以实现动态更新网页内容、响应用户交互等丰富的功能。掌握 DOM 元素的操作是成为一名优秀前端开发者的必备技能。
DOM介绍
gergerfrgegregfd的博客
06-24 2088
一、DOM简介1.document:文档,DOM中的"D":当创建了一个网页并把它加载到Web浏览器中时,DOM就已经生成了,它把你编写的网页文档转换为一个文档对象.2.Object:对象,DOM中的"O":在程序设计语言里,“对象”这个词含义很明确,对象是一种自给自足的数据集合,与对象相关联的变量被称为属性,与对象相关联的且只能由该对象去调用的函数被称为这个对象的方法.JavaScript里最基础的对象是window对象,对应着浏览器本身,这个对象的属性和方法通常被称为BOM(浏览器对象模型),但叫做窗口
DOM简介、HelloWorld、文档节点、获取元素节点、元素的属性和方法——DOM
weixin_70320000的博客
11-26 2595
DOM简介、HelloWorld、文档节点、获取元素节点、元素的属性和方法
DOM的概念及子节点类型
anbachun6816的博客
11-10 319
前言 DOM的作用是将网页转为一个javascript对象，从而可以使用javascript对网页进行各种操作(比如增删内容)。浏览器会根据DOM模型，将HTML文档解析成一系列的节点，再由这些节点组成一个树状结构。DOM的最小组成单位叫做节点(node)，文档的树形结构(DOM树)由12种类型的节点组成。 一：DOM ==> 全称： document Object Mo...
DOM元素总结
tianye00011的博客
08-21 1066
获取DOM元素 document.getElementById([ID])： 基于元素的ID获取到这个元素 document是获取元素的上下文（获取元素的范围），getElementById方法的上下文只能是document 获取到的结果是一个对象（堆内存：里边储存很多内置的方法和属性） [context].getElementByTagName([标签名]：) 在指定上下文中，基于标签名获取到页面中所有的元素标签的集合 就算只有一个或没有，获取到的也是一个集合HTMLCollection（一个类数
JavaScript学习笔记之DOM基础操作实例小结
10-17
在给定的文件内容中，我们看到了对JavaScript基础操作的介绍，特别是在DOM操作方面的实例小结。 ### 一、子节点 在DOM中，每个节点可以有零个或多个子节点。子节点包括元素节点、文本节点等。通过`childNodes`属性...
DOM基础（ppt）.pdf
08-05
标题《DOM基础》和描述《JavaScript DOM基础》表明这是一份关于JavaScript文档对象模型（Document Object Model，简称DOM）的入门级教学内容。DOM是编程语言中一个用于HTML和XML文档的API，它提供了一种方式，使得...
JvavScript之dom基础（源代码）
05-31
JvavScript之dom基础（源代码）JvavScript之dom基础（源代码）JvavScript之dom基础（源代码）JvavScript之dom基础（源代码）JvavScript之dom基础（源代码）JvavScript之dom基础（源代码）JvavScript之dom基础（源...
html.rar_dom基础学习
09-21
DOM基础学习主要包括以下几个方面： 1. **DOM结构**：DOM将HTML文档解析为一棵由节点组成的树，其中每个元素、属性和文本都对应一个节点。根节点是`<html>`，下面包含`<head>`和`<body>`两个子节点。元素节点有子...
DOM基础及DOM操作HTML
08-04
**DOM基础** DOM，全称为Document Object Model，中文译为文档对象模型，是W3C组织制定的一个标准，用于表示XML或HTML文档的一种结构化表示方式。DOM将整个文档视为一个由节点组成的树形结构，其中每个节点代表文档...
DOM:常用查找元素.
weixin_53542481的博客
03-08 522
HELLO!大家好! 今天的笔记是DOM的常用查找元素. (1)不需要查找就可直接获得的元素对象: 4种: document.documentElement --<html> document.head --<head> document.body --<body> document.forms[i] --<form> (2)如果已经获得一个元素对象，找周围附近的元素对象时，就用按节点间关系查找：2大类关系，6个属性. a. 父
DOM文档对象模型(一)
m0_61773971的博客
03-14 156
文档对象模型是HTML,XML文档的编程接口,DOM表示由多层节点构成的文档,通过它可以添加,删除,修改和修改页面的各个部分.
Javascript简单学习
weixin520520的博客
09-21 121
//通过id进行操作 <script> function displayDate(){ document.getElementById("demo").innerHTML=Date(); } </script>
dom元素
Gananldo04的博客
05-19 3160
如何获取dom元素 dom 全称是document object model 文本对象模型 简称dom元素，dom就是html元素 获取dom元素的时候需要注意什么，注意dom元素是否初始化（是否已经存在） 一.四种动态获取dom的方法 1.通过class 类名称获取元素 返回的是一个HTMLCollection集合 document.getElementsByClassName() var btn=document.getElementsByClassName("list");cons
DOM元素简介
前端开发小白9527
06-29 1175
在网页上，组成页面（或文档）的对象被组织在一个树形结构中。 页面的顶级包含在html标签中，在其中会找到head和body标签，而其它标签包含在这两个标签中，javascript将文档树中的每一项都当做对象，可以使用javascript操纵这些对象。用来表示文档中对象的标准模型就称为DOM（Document Object Model）。 ...
DOM深入学习 --- DOM 树介绍，如何遍历 DOM 树节点（一）
秋天，黄叶坠地，凉风有信。
03-09 3919
DOM 树 HTML 文档的主干是标签（tag）。 根据文档对象模型（DOM），每个 HTML 标签都是一个对象。嵌套的标签是闭合标签的“子标签（children）”。标签内的文本也是一个对象。 所有这些对象都可以通过 JavaScript 来访问，我们可以使用它们来修改页面。 例如，document.body 是表示 <body> 标签的对象。 运行这段代码会使 <body> 保持 3 秒红色状态: document.body.style.background = 'red'; /
DOM节点树与元素树
YZC2251518051的博客
04-09 787
浅谈DOM DOM：文档对象类型（Document Object Mohdel）是操作XML和HTML的一类对象的集合。DOM把整个页面映射为一个多层节点的树状结构。HTML或XML页面的每一个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。 通过DOM创建的表示文档的树形图，开发人员可以获得控制页面内容和结构的主动权。借助DOM提供的API，开发人员可以轻松的增加，删除，替换，或修...
DOM、DOM树和DOM的其他几个概念
admin_ccc的博客
07-07 4824
DOM：是JavaScript操作网页的接口，全称为“文档对象模型”(Document Object Model)。 *简单的说来就是把页面看成是一个文档，js中万物皆对象，所以这个文档就是一个对象DOM的其他几个概念 文档（document）：一个页面就是一个文档 元素(Element)：页面中的所有标签都是元素，元素可以看成是对象 节点(Node)：页面中的内容都是节点:标签，文本 root：...
深入学习DOM基础及对象应用
资源摘要信息:"html.rar_dom基础学习" HTML基础学习是Web开发的基石，其中DOM（文档对象模型）的操作是前端开发工程师必须掌握的重要技能之一。DOM是一种编程接口，它提供了一种结构化的表述方式，能够使程序和脚本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值