[DOM]基础介绍

DOM → Document Object Model 文档对象模型

是处理HTML或XML文件的编程接口。可以改变网页的内容、结构、样式。

 

主要涉及到：

1. 获取页面元素

2. 给元素注册时间

3. 操作 DOM 元素的属性

4. 创建元素

5. 操作 DOM 元素节点

 

DOM 树包括：

1. 文档：一个页面是一个文档 document

2. 元素：标签 element

3. 节点：标签、属性、文本、注释等 node

DOM 将以上内容全都看作对象。

网页中的所有内容都可看作节点。

 

获取页面元素的方法：

1. 通过ID

document.getElementById();         // 参数：String    返回：元素对象 Element

 

2. 通过标签名

element.getElementsByTagName();     // 返回：HTMLCollection（伪数组）

 

3. 通过 HTML5 新增方法

（不支持 IE 较早版本；不考虑兼容 or 移动端时可使用）

document.getElementsByClassName(类名);          // 返回：HTMLCollection（伪数组）

document.querySelector(选择器);                 // 返回第一个元素

document.querySelectorAll(选择器);              // 返回 NodeList

 

 4. 获取特殊元素

document.body                      // <body>       </body>

document.documentElement           // <html>       </html>

 

注意：

文档页面从上往下加载，故应当先有标签，再由 JavaScript 加载标签。

故<script>标签要写在备操作的标签下面。

 

查看页面元素可使用：console.dir(object);

posted @ 2021-08-13 09:55  ximu19  阅读(71)  评论(0)    收藏  举报