Dom直接选择器
<!DOCTYPE html>
<!--Dom间接选择器-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1 {
display: inline-block;
width: 455px; /*一行4个*/
margin: auto;
}
.d2{
width:254px;
height:160px;
padding:0px;
margin:0px;
border:1px solid;
background-color:#aaa;
word-wrap:break-word;
}
.d3 {
display: inline-block;
width: 310px; /*一行4个*/
margin: auto;
}
</style>
</head>
<body>
<div class="d1">文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。
它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。
我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，
而不是JavaScript语言规范里的规定的核心内容。</div>
<div>查找元素</div>
<div class="d1">
1、----------------------直接查找-----------------------
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
</div>
<div class="d2">
2、-----------间接查找----------
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点
</div>
<div class="d3">
parentElement // 父节点标签元素
children // 所有子标签元素
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
</div>
<div class="d2">
-----------class操作----------
className // 获取所有类名
classList.remove(cls) // 删除指定类
classList.add(cls) // 添加类
</div>
<br/>
<br/>
<br/>
<div> 间接查找使用演示实例 </div>
<br/>
<br/>
<br/>
<div>
<div></div>
<div>
c1
</div>
</div>
<div>
<div></div>
<div id="i1">
c2
</div>
</div>
<div>
<div></div>
<div>
c3
</div>
</div>
<br/>
<br/>
<br/>
<div> 间接查找使用演示结果 .innerHTML 是显示在网页，在审查元素中console不要加 </div>
<br/>
<div> 使用审查元素中console</div>
<div> 根据ID获取一个标签 父节点标签元素 所有子标签元素 上一个兄弟标签元素 </div>
<script>
tag =document.getElementById("i1")
tag.parentElement
tag.parentElement.children
tag.parentElement.previousElementSibling
</script>
</body>
</html>
Dom间接选择器