一些DOM中的理解

最新推荐文章于 2023-08-25 19:20:44 发布

weixin_45846980

最新推荐文章于 2023-08-25 19:20:44 发布

阅读量190

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45846980/article/details/108188679

版权

前言

在我们经过了前面学习基础js的核心语法，也进入到构成整个js的第二个部分DOM，那么什么是DOM，它又有那些作用，学习了DOM会对我现在代码水平，又有怎样的提升，下面我们一一解答

DOM的简介

在我们js中DOM(文档对象模型)，定义了如何操作文档标准，它允许代码动态地获取和更新文档内容，结构和样式
概念
是将一个HTML或XML文档，用对象模型表示出来,每个对象称之为DOM对象
DOM对象有称之为节点node；

W3C DOM标准的三个不同的部分关系（包含关系）

核心 DOM：所有文档类型的标准模型能操作所有的结构化文档（HTML XML）万能但繁琐
HTML DOM:HTML文档的标准模型专门操作HTML内容API 简单
XML DOM:XML文档的标准模型专门操作XML内容API

DOM的节点类型

DocumentType 文档类型节点
Document 文档节点，表示整个文档
Comment 注释节点 html注释
Element 元素节点各种HTMl标签
Text 文本节点文本信息包括空格，回车都是文本节点；
Attribute 属性节点 HTMl标签的行内属性
DocumentFragment 文档片段节点

DOM树

展现各个DOM节点，层级，包含关系，以树状图的形式进行表达；
DOM树的顶端：Document对象是整颗树的根节点，所有Node对象都是DOCUMENT的子代节点

（对应html自动创建时的树状图）
在这里插入图片描述
然后依次从上到下，从左到右展现html各个节点的关系（例子会随着后来的html标签变多而增加树状结构）

加上html附带的属性（橙框显示）

可直接访问的属性

document.head //<head></head>
document.body //<body></body>
document.documentElement //<html></html>
document.links 获取页面上所有的超链接元素节点 类数组
document.anchors 获取页面所有的锚点(具有name属性)元素节点
document.forms 获取页面所有form元素节点

四个属性

nodeName

只读属性
返回值是标签名的大写形式
文本节点返回 #text
属性节点返回属性名称
文档节点返回 #document

nodeValue

返回节点的值
元素节点(Element )返回null
文本节点(text)返回文本本身
属性节点(Attribute)返回属性值

nodeType

元素节点(Element )：返回1
属性节点(Attribute )：返回2
文本节点(Text)：返回3
注释节点(Comment )：返回8
document：返回9
DocumentFragment：11

attributes
返回元素(Element)节点的属性集合
在这里插入图片描述

DOM的作用

做网页的都知道，想要做一个动态页面，需要交互之类的，那这个时候，静态页面是无法满足的，千万别跟我说，你可以提前把要查询的显示的内容写在代码里，那么多数据，你要写几年啊。。要实时变化嘛，当然得有后台支持。就比如你在博客里，修改个人信息，添加一个标签页，删除个性签名等等，都需要同步

学习DOM的意义

从此可以开始以用js空制页面结构的重要的一步

weixin_45846980

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一些DOM中的理解

前言在我们经过了前面学习基础js的核心语法，也进入到构成整个js的第二个部分DOM，那么什么是DOM，它又有那些作用，学习了DOM会对我现在代码水平，又有怎样的提升，下面我们一一解答DOM的简介在我们js中DOM(文档对象模型)，定义了如何操作文档标准，它允许代码动态地获取和更新文档内容，结构和样式概念是将一个HTML或XML文档，用对象模型表示出来,每个对象称之为DOM对象DOM对象有称之为节点node；W3C DOM标准的三个不同的部分关系（包含关系）核心 DOM：所有文档类型的标准
复制链接

扫一扫