一、本课目标
- 了解DOM的分类和节点间的关系
- 熟练使用JS访问DOM节点
二、操作DOM
image.png
2.1节点和节点关系
image.png
2.2访问节点
- 使用getElement系列方法访问指定节点getElementById(),getElementsByname(),getElementsByTagName()
-
根据层次关系访问节点：
1、主要关系是父子节点和兄弟节点（这个里面也存在空格，跟XML一样）
image.png
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>访问节点</title>
<link rel="stylesheet" href="css/newStyle.css">
</head>
<body>
<section id="news">
<header>
京东快报<a href="#">更多 ></a>
</header>
<ul>
<li><a href="#">志玲姐姐：墨镜300减30</a></li>
<li><a href="#">京东无锡馆正式启动</a></li>
<li><a href="#">99元抢平板！品牌配件199-100</a></li>
<li><a href="#">节能领跑京东先行</a></li>
<li><a href="#">高洁丝实力撩货，领券五折</a></li>
</ul>
</section>
<script>
var sec=document.getElementById("news");
var le = sec.childNodes.length;
alert(le);
</script>
</body>
</html>
结果：显示的是5，但是可以看到section下面只有两个元素节点。
2、只拿出来元素节点
image.png
示例：
image.png
三、总结
image.png
