知识大纲:
- DOM是什么?
- 节点类型;
- 获取元素;
- 创建元素;
- 插入元素;
- 删除元素;
- 复制元素;
- 替换元素;
DOM是什么?
DOM对象
DOM(Document Object Model)全称“文档对象模型”,是W3C定义的一个标准。
DOM操作,可以简单理解成“元素操作”。
DOM结构
DOM采用“树形结构”,用“树节点”的形式来表示页面中的每个元素。例如:
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>今日学习网</h1>
<p>今日学习网是一个....</p>
<p>今日学习网成立于....</p>
</body>
</html>
以上也叫“DOM树”,html是DOM树的树根,称之为根元素。(父节点、子节点、兄弟节点)
【重点】:
每一个元素就是一个节点,而每一个节点就是一个对象。我们在操作元素时,其实就是把这个元素看成了一个对象,然后使用这个对象的属性和方法来进行相关的操作。(DOM对象)
节点类型
在JavaScript中,DOM共有12种类型的节点,常用的只有三种节点:
- 元素节点;
- 属性节点;
- 文本节点;
<div id="wrapper">绿叶学习网</div>
表示元素的叫作元素节点,表示属性的叫作属性节点,表示文本的叫作文本节点。
【疑问】元素与节点的关系?
答:元素是节点,但节点不一定是元素,节点是包含元素的。
【疑问】元素节点、属