1 <!DOCTYPE html>
2 <!--Dom间接选择器-->
3 <html lang="en">
4 <head>
5 <meta charset="UTF-8">
6 <title>Title</title>
7 <style>
8 .d1 {
9 display: inline-block;
10 width: 455px; /*一行4个*/
11 margin: auto;
12 }
13 .d2{
14 width:254px;
15 height:160px;
16 padding:0px;
17 margin:0px;
18 border:1px solid;
19 background-color:#aaa;
20 word-wrap:break-word;
21 }
22 .d3 {
23 display: inline-block;
24 width: 310px; /*一行4个*/
25 margin: auto;
26 }
27 </style>
28 </head>
29 <body>
30 <div class="d1">文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。
31 它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。
32 我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，
33 而不是JavaScript语言规范里的规定的核心内容。</div>
34 <div>查找元素</div>
35 <div class="d1">
36 1、----------------------直接查找-----------------------
37 document.getElementById 根据ID获取一个标签
38 document.getElementsByName 根据name属性获取标签集合
39 document.getElementsByClassName 根据class属性获取标签集合
40 document.getElementsByTagName 根据标签名获取标签集合
41 </div>
42 <div class="d2">
43 2、-----------间接查找----------
44 parentNode // 父节点
45 childNodes // 所有子节点
46 firstChild // 第一个子节点
47 lastChild // 最后一个子节点
48 nextSibling // 下一个兄弟节点
49 previousSibling // 上一个兄弟节点
50 </div>
51 <div class="d3">
52 parentElement // 父节点标签元素
53 children // 所有子标签元素
54 firstElementChild // 第一个子标签元素
55 lastElementChild // 最后一个子标签元素
56 nextElementtSibling // 下一个兄弟标签元素
57 previousElementSibling // 上一个兄弟标签元素
58 </div>
59 <div class="d2">
60 -----------class操作----------
61 className // 获取所有类名
62 classList.remove(cls) // 删除指定类
63 classList.add(cls) // 添加类
64 </div>
65 <br/>
66 <br/>
67 <br/>
68 <div> 间接查找使用演示实例 </div>
69 <br/>
70 <br/>
71 <br/>
72 <div>
73 <div></div>
74 <div>
75 c1
76 </div>
77 </div>
78 <div>
79 <div></div>
80 <div id="i1">
81 c2
82 </div>
83 </div>
84 <div>
85 <div></div>
86 <div>
87 c3
88 </div>
89 </div>
90 <br/>
91 <br/>
92 <br/>
93 <div> 间接查找使用演示结果 .innerHTML 是显示在网页，在审查元素中console不要加 </div>
94 <br/>
95 <div> 使用审查元素中console</div>
96 <div> 根据ID获取一个标签 父节点标签元素 所有子标签元素 上一个兄弟标签元素 </div>
97 <script>
98 tag =document.getElementById("i1")
99 tag.parentElement
100 tag.parentElement.children
101 tag.parentElement.previousElementSibling
102 </script>
103 </body>
104 </html>
Dom直接选择器