DOM的概述
-
什么是DOM?
DOM:Document Object Model,即文档对象模型。要认识JavaScript中的DOM,不可避免就要理解DOM树的概念,将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML文档的样子。用图可简略表示为:- html页面中写的标签可叫做element
- html标签中写的属性可叫做attribute
- html标签中的文本可叫做text
以上所有的这些都可以称之为Node(节点),只不过这些节点有不同的类型,具体可分为:
- 元素节点
- 属性节点
- 文本节点
DOM常用的操作
- 获得元素
document.getElementById();
:通过ID获得单个的元素document.getElementsByName();
:通过name属性获得元素集合(NodeList)document.getElementsByTagName();
:通过标签名获得元素集合(NodeList) - 创建元素
document.createElement();
:创建元素document.createTextNode();
:创建文本 - 添加节点(元素)
element.appendChild();
:在最后添加一个节点element.insertBefore();
:在某个元素之前插入 - 删除节点
element.removeChild();
:删除元素,但不能直接删自己,必须先得到父节点然后再来删自己
使用DOM完成对ul中添加一个li元素的操作
直接给出代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function addElement() {
var city = document.getElementById("city");
// 创建一个元素
var liEl = document.createElement("li");
// 创建一个文本节点
var text = document.createTextNode("深圳");
// 添加子节点
liEl.appendChild(text);
city.appendChild(liEl);
}
</script>
</head>
<body>
<input type="button" value="添加元素" onclick="addElement()" />
<ul id="city">
<li>北京</li>
<li>上海</li>
</ul>
</body>
</html>