1.什么是DOM? DOM就是W3C中定义的访问和操作HTML文档的标准(我们也说DOM是专门操作HTML内容的API)
2.我们都知道JavaScript的三个重要组成部分:ES(核心语法)、DOM、BOM 所以DOM和html打交道是很多的,我们也可以看出他的重要性;
3.那接下来我们来看我们学习DOM首先应该干嘛;我的个人建议是先看html文档的内容结构,然后画出DOM树的结构如下:
这个图不是太完整,当我们画出这个图我们的结构就看的很清楚了,这里面的body下面放的应该是标签元素,差不多我们的准备工作就这么多了;
4.我们不是前面说了吗?HTML DOM专门操作HTML内容的API 其实就是把我们常用的API进行了简化--用起来比较方便,(做为一个程序员都知道,能少写的,绝不多写,题外话),虽然好用,但是他不是万能的,一般在实际开发当中我们并不是优先选着HTML DOM,我们是根据实际情况来定,毕竟那个简单我们就用谁。
5.其实在我们网页当中,一切内存当中都是以树形结构存储的,跟我上面的图差不多,因为我们在布局的过程中,这些代码就是一些相互嵌套的关系,同时就会产生一种上下级的关系,不是在DOM当中我们经常提单的节点,或许有人不知道节点是什么,其实在HTML中每一个元素、属性、文本、都是一个节点对象
6.其中有三个元素是不用找的,直接可以获取
<html> document.documentElement
<head> document.head
<body> document.body
7.节点之间的关系
(1)父子关系
node.parentNode 获得node的父节点
node.childNodes 获得node的所有子节点
node.firstChild 获得node下的第一个子节点
node.lastChild 后的node下最后一个子节点
(2)兄弟关系
node.preivousSibling: 返回当前节点的前一个兄弟节点
node.nextSibling:返回当前节点的下一个兄弟节点
这里面有一个问题我们是要注意的网页当中的一切都是节点,包括空格和回车;
8. 节点数的子集关系
1)父子关系
elem.parentElement 返回一个父元素对象
elem.childen 返回子元素对象集合
elem.firstElementChild 返回第一个子元素对象
elem.lastElementChild 返回最后一个子元素
2)兄弟关系
返回当前节点的前一个兄弟元素
elem.preivousElementSibling
返回当前节点的下一个兄弟元素
elem.nextElementSibling
9.DOM对DOM树的操作是增 删 改 查
增加节点
添加节点的操作:
(1)创建要添加的新节点
(2)找到要添加到的父节点
(3)父节点添加新节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script>
function add(){
//新建要增加的节点
var li = document.createElement(‘li‘);
var txt = document.createTextNode(‘北‘);
li.appendChild(txt);
//找到要添加到的父节点
var ul = document.getElementsByTagName(‘ul‘)[0];
//添加到父节点
ul.appendChild(li);
}
</script>
</head>
<body>
<input type="button" value="增加一个节点" onclick="add();">
<ul>
<li>东</li>
<li>南</li>
<li>西</li>
</ul>
</body>
</html>
效果图:
2、删除节点
删除节点的操作:
(1)先找到要删除的节点
(2)找到其父节点
(3)调用父节点的removeChild(删除的节点)操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script>
function del(){
//找到要删除的节点
var lis = document.getElementsByTagName(‘li‘);
var lastli = lis[lis.length - 1];
//让父节点来进行删除操作
lastli.parentNode.removeChild(lastli);
}
</script>
</head>
<body>
<input type="button" value="删除最后一个节点" onclick="del();">
<ul>
<li>东</li>
<li>南</li>
<li>西</li>
<li>北</li>
</ul>
</body>
</html>
</body>
</html>
效果图:
3、修改节点
修改操作主要是修改节点的属性,如修改img节点的src属性
但是有几点需要注意:
(1)如果需要操作dom对象的class属性,应该使用className属性
document.getElementsByTagName(
‘div‘
)[0].className =
‘test2‘
(1)根据id进行查找,返回对象:
document.getElementById(
‘test1‘
)
(2)根据标签名进行查找,返回对象集合:
document.getElementById(
‘test1‘
)
;
(3)对于表单元素,按照name值进行查找,返回对象集合:
document.getElementsByName(
‘username‘
);
(4)根据class名进行查找,返回对象集合:
document.getElementsByClassName(
‘test2‘
);