欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

了解文档对象模型DOM(Document Object Model)

程序员文章站 2022-03-26 22:26:17
如何用JavaScript去操作HTML元素和CSS样式,实现简单的动态操作?可以通过DOM操作,文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法;HTML文档可以说由节点构成的集合,三种常见的DOM节点: 元素节点、文本节点、属性节点 ......
 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>认识dom</title>
 6     </head>
 7     <body>
 8         <h2>
 9             <a href="https://www.baidu.com">dom操作</a>
10         </h2>
11         <p>如何用javascript去操作html元素和css样式,实现简单的动态操作</p>
12         <ul title="岁寒知松柏">
13             <li>群阴彫品物,松柏尚桓桓。</li>
14             <li>老去惟心在,相依到岁寒。</li>
15             <li>霜严御史府,雨立大夫官。</li>
16             <li>牺象沟中断,徽弦爨下残。</li>
17             <li>光阴一鸟过,翦伐万牛难。</li>
18             <li>春日辉桃李,苍颜亦预观。</li>
19         </ul>
20     </body>
21 </html>

如何用javascript去操作html元素和css样式,实现简单的动态操作?可以通过dom操作,文档对象模型dom(document object model)定义访问和处理html文档的标准方法。dom 将html文档呈现为带有元素、属性和文本的树结构(节点树),dom百度百科

如上代码所示,是为一个dom树状结构html代码,将html代码分解为dom节点层次图为:

了解文档对象模型DOM(Document Object Model)

html文档可以说由节点构成的集合,三种常见的dom节点: 

  1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。
  2. 文本节点:向用户展示的内容,如<li>...</li>中的"群阴彫品物,松柏尚桓桓"等文本
  3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"。
1 <a href="https://www.baidu.com">dom操作</a>
2 <!--<a href="https://www.baidu.com">属性节点-->
3 <!--"dom操作"是为文本节点-->

 

上一篇: DOM解读

下一篇: 移动端屏幕适配