点击切换帐号登陆
帐号密码登陆

DOM(文档对象模型)概述

# DOM 概览

## 1. DOM 是什么

* `DOM`: 文档对象模型(`Document Object Model`)
* `DOM`定义了操作`HTML/XML`文档内容的基础`API`
* 文档中的最小单元是节点, 并以树状结构排列
* 这就是常用说的`节点树`, 也叫`DOM树`
* 以后我们提到文档,专门指的是`HTML`文档

----------------------------------------------

## 2. Node 是什么

* `Node`对象是`HTML`文档中所有节点的原型对象
* `Node`最重要的三个子类型:
* `Document`: 文档
* `CharacterData`: 文本
* `Element`: 元素

* `Document`最重要的子类型: `HTMLDocument` HTML 文档
* `CharacterData`最重要的子类型: `Text` 内容文本(非注释)
* `Element`最重要的子类型: `HTMLElement` HTML元素

* `HTMLElement`类型中定义了`HTML`文档中的所有元素类型
* `HTMLHeadElement`: 头元素`<head>`
* `HTMLBodyElement`: 主体元素`<body>`
* `HTMLTitleElement`: 标题文件`<title>`
* `HTMLParagraphElement`: 段落元素`<p>`
* `HTMLInputElement`: 输入控件`<input>`
* `HTMLTableElement`: 表格元素`<table`
* 基本更多HTML元素对象...

* 在每个`HTMLElement`的子类型对应一个具体用标签表示的`HTML元素`
* 在每个具体的`HTML元素`上定义了多个`JavaScript`属性

----------------------------------------------

## 3. 示例源码

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM概览</title>
</head>
<body>
<!-- 以下是我的购物清单 -->
<h2>购物车</h2>
<ul>
<li>牛奶一箱</li>
<li>外套一箱</li>
<li>电脑一台
<ul>
<li>品牌: Huawei</li>
<li>价格: 5999</li>
</ul>
</li>
<li>足球一个</li>
</ul>

<script>
// 文档
console.log(document);

// 文档类型
console.log(document.doctype);

// 文档根元素<html>
console.log(document.documentElement);

// 文档头元素<head>
console.log(document.head);

// 文档主体元素<body>
console.log(document.body);

// 文档主体中的子元素
console.log(document.body.children);

// 主体中的第二个子元素
console.log(document.body.children[1]);
console.log(document.body.children.item(1));

// ul中的二个元素又是一个列表
var ul = document.body.children[1];
console.log(ul.children.length);

console.log(ul.children[2]);
</script>
</body>
</html>
```


任务

?不会了怎么办
无数据提示暂无评论哟...我要评论
网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号