一些DOM中的理解
程序员文章站
2022-04-25 09:45:55
...
前言
在我们经过了前面学习基础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空制页面结构的重要的一步
上一篇： em与rem的区别