1 <!DOCTYPE html>
2 <!--Dom直接选择器-->
3 <html lang="en">
4 <head>
5 <meta charset="UTF-8">
6 <title>DOM Tutoria</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
29 </head>
30 <body>
31 <div class="d1">文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。
32 它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。
33 我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，
34 而不是JavaScript语言规范里的规定的核心内容。</div>
35 <div>查找元素</div>
36 <div class="d1">
37 1、----------------------直接查找-----------------------
38 document.getElementById 根据ID获取一个标签
39 document.getElementsByName 根据name属性获取标签集合
40 document.getElementsByClassName 根据class属性获取标签集合
41 document.getElementsByTagName 根据标签名获取标签集合
42 </div>
43 <div class="d2">
44 2、-----------间接查找----------
45 parentNode // 父节点
46 childNodes // 所有子节点
47 firstChild // 第一个子节点
48 lastChild // 最后一个子节点
49 nextSibling // 下一个兄弟节点
50 previousSibling // 上一个兄弟节点
51 </div>
52 <div class="d3">
53 parentElement // 父节点标签元素
54 children // 所有子标签元素
55 firstElementChild // 第一个子标签元素
56 lastElementChild // 最后一个子标签元素
57 nextElementtSibling // 下一个兄弟标签元素
58 previousElementSibling // 上一个兄弟标签元素
59 </div>
60 <br/>
61 <br/>
62 <br/>
63 <div> 直接查找使用演示实例 </div>
64
65 <div id="i1">我是i1</div>
66 <a> a1 </a>
67 <a> a2 </a>
68 <a> a3 </a>
69
70 <br/>
71 <br/>
72 <br/>
73
74 <div> 直接查找使用演示结果 .innerHTML 是显示在网页，在审查元素中console不要加 </div>
75 <script>
76 var x = document.getElementById("i1").innerHTML;
77 document.write(x)
78 </script>
79 <br/>
80 <br/>
81 <script>
82 var y = document.getElementById("i1").innerHTML.innerText = "新内容";
83 document.write(y)
84 </script>
85 <br/>
86 <br/>
87 <div>document.getElementsByTagName("a")</div>
88 <div>只能在审查元素中console使用</div>
89 <script>
90 for(var i=0;i<100;i=i+1) {
91 var z = document.getElementsByTagName("a")[i].innerHTML;
92 document.write(z)
93 }
94 </script>
95 <br/>
96 <br/>
97 <script>
98 var z = document.getElementsByTagName("a")[1].innerHTML.innerText = "666";
99 document.write(z)
100 </script>
101
102 <br/>
103 <br/>
104 <div>循环修改</div>
105 <script>
106 for(var i=0;i<100;i=i+1) {
107 var z = document.getElementsByTagName("a")[i].innerHTML.innerText = "g1";
108 document.write(z)
109 }
110 </script>
111 <script>
112 tags = document.getElementsByTagName("a")
113 for(var i=0;i<tags.length;i=i+1) {
114 var z = tags[i].innerHTML.innerText = "g2";
115 }
116 document.write(z)
117
118 </body>
119 </html>
时间： 2024-11-01 01:51:01