<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>History和Location使用</title>
</head>
<body>
<input type="button" value="返回" onclick="history.back();" />
</body>
</html>
DOM 解析模型,将文档加载到 内存,形成一个树形结构就是根节点,每个标 签会成为一个元素节点、标签的属性成为属性节点,标签内部的文本内容成为文本节点。
Document:整个html文件都成为一个document文档
Element:所有的标签都是Element元素
Attribute:标签里面的属性
Text:标签中间夹着的内容为text文本
Node:document、element、attribute、text统称为节点node.
1、Document对象
每个载入浏览器的HTML文档都会成为Document对象
绿色框的两个方法获取元素以后,需要遍历,因为它获取的元素是个数组。
以下两个方法很重要,但是在API中查不到
创建文本对象:document.createTextNode();
创建元素节点:document.createElement();
2、Element对象
我没所认知的html页面中所有的标签都是element元素
element.appendChild() | 向元素添加新的子节点,作为最后一个子节点。 |
element.firstChild | 返回元素的首个子节点。 |
element.getAttribute() | 返回元素节点的指定属性值。 |
element.innerHTML | 设置或返回元素的内容。 |
element.insertBefore() | 在指定的已有的子节点之前插入新节点。 |
element.lastChild | 返回元素的最后一个子元素。 |
element.setAttribute() | 把指定属性设置或更改为指定值。 |
element.removeChild() | 从元素中移除子节点。 |
element.replaceChild() | 替换元素中的子节点。 |
3、Attribute对象
DOM练习
在页面中使用列表显示一些城市
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
我们希望点击一个按钮实现动态添加城市。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态添加城市</title>
<!--
作者:offline
时间:2019-05-22
描述:点击按钮,添加一个城市到ul标签中
分析:
1、事件:onclick事件
2、获取ul元素节点
3、创建一个城市文本节点
4、创建一个li列表元素节点
5、使用element元素中的appendChild()将城市节点添加到li元素节点中去
6、使用element元素中的appendChild()来添加li子节点到ul中
-->
<script>
//创建事件
window.onload = function() {
//1、为事件绑定一个点击事件函数
document.getElementById("bt01").onclick = function() {
//2、获取ul元素标签
var ulEle=document.getElementById("ul01");
//3、创建一个城市文本标签
var textNode = document.createTextNode("深圳"); //返回“深圳”二字
//4、创建一个li列表元素标签
var liEle = document.createElement("li") //返回"<li></li>"标签
//5、使用element元素中的appendChild()将城市节点添加到li元素节点中去
liEle.appendChild(textNode);
//6、使用element元素中的appendChild()来添加li子节点到ul中
ulEle.appendChild(liEle);
}
}
</script>
</head>
<body>
<input type="button" value="添加新城市" id="bt01" />
<ul id="ul01">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</body>
</html>