1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>15DOM学习</title>
9 </head>
10 <body>
11 <!--15.1 js需要等到dom加载后再执行-->
12 <!--script标签通常放到head或body里面，浏览器格式化HTML时会将script标签放到body里面-->
13
14 <!--15.1.1 方式1 -->
15 <!--<h2 id = "hw">hello World</h2>-->
16 <!--<script src="./15Dom/15.1.js"></script>-->
17
18 <!--15.1.2 方式二 -->
19 <!--<script src="./15Dom/15.1.js" defer="defer"></script>-->
20 <!--<h2 id = "hw">hello World</h2>-->
21
22 <!--15.1.2 方式三 -->
23 <!--<script>-->
24 <!-- window.onload = function () {-->
25 <!-- let hw = document.getElementById("hw");-->
26 <!-- console.log(hw.innerText);-->
27 <!-- };-->
28 <!--</script>-->
29 <!--<h2 id = "hw">hello World</h2>-->
30
31 <!--15.2 DOM节点node的概念-->
32 <!--
33 常用节点: 标签节点(类型编号: 1)、文本节点(类型编号: 3)、注释节点(类型编号: 8)、属性节点(类型编号: 2)
34 -->
35 <!--<h2>baidu.com</h2>-->
36 <!--<script>-->
37 <!-- let h2 = document.childNodes[1].childNodes[2].childNodes[37];-->
38 <!-- console.log(h2); // <h2>baidu.com</h2>-->
39 <!-- console.log(h2.childNodes[0]); // baidu.com-->
40 <!--</script>-->
41
42 <!--15.3 JS常用DOM节点元素的获取-->
43 <!--<div id = app></div>-->
44 <!--<script>-->
45 <!--// 获取body-->
46 <!--console.log(document.querySelector('body'));-->
47 <!--console.log(document.body);-->
48
49 <!--// 获取head-->
50 <!--console.log(document.head);-->
51
52 <!--// 获取id(低版本浏览器可能无法使用)-->
53 <!--console.log(app);-->
54
55 <!--// 获取超链接-->
56 <!--console.log(document.links[0].innerHTML);-->
57
58 <!--// 获取title-->
59 <!--console.log(document.title);-->
60
61 <!--// 获取URL-->
62 <!--console.log(document.URL);-->
63
64 <!--// 获取表单信息-->
65 <!--console.log(document.forms);-->
66
67 <!--// 获取html-->
68 <!--console.log(document.documentElement);-->
69 <!--</script>-->
70
71 <!--15.4 nodeValue-->
72 <!--
73 标签节点没有nodeValue，属性节点、文本节点、注释节点有nodeValue。
74 -->
75 <!--<div >-->
76 <!-- baidu-->
77 <!--<!–注释内容–>-->
78 <!--</div>-->
79 <!--<script>-->
80 <!-- let app = document.getElementById("app");-->
81 <!-- // 标签节点的nodeValue-->
82 <!-- console.log(app.nodeValue); // null-->
83 <!-- // 属性节点的nodeValue-->
84 <!-- console.log(app.attributes.id.nodeValue); // app-->
85 <!-- // 文本节点的nodeValue-->
86 <!-- console.log(app.childNodes[0].nodeValue); // baidu-->
87 <!-- // 注释节点的nodeValue-->
88 <!-- console.log(app.childNodes[1].nodeValue); // 注释内容-->
89
90 <!-- // nodeName(用于所有节点)和tagName(只用于标签节点)-->
91 <!-- console.log(app.nodeName); // DIV-->
92 <!-- console.log(app.attributes.id.nodeName); // id-->
93 <!-- console.log(app.tagName); // DIV-->
94 <!-- console.log(app.attributes.id.tagName); // undefined-->
95 <!--</script>-->
96
97 <!--15.5 DOM 节点的遍历-->
98 <!--<div>1</div>-->
99 <!--<div>2</div>-->
100 <script>
101 /*15.5.1 getElementsByTagName*/
102 // 获取所有div标签节点
103 // let nodes = document.getElementsByTagName('div');
104 // console.log(nodes); // HTMLCollection(2)[div, div]
105 // for (let node of nodes) {
106 // console.log(node);
107 // /*
108 // <div>1</div>
109 // <div>2</div>
110 // */
111 // }
112
113 /*15.5.2 querySelectorAll*/
114 // 获取所有div标签节点
115 // let nodes = document.querySelectorAll('div');
116 // console.log(nodes); // NodeList(2)[div, div]
117 // for (let node of nodes) {
118 // console.log(node);
119 // /*
120 // <div>1</div>
121 // <div>2</div>
122 // */
123 // }
124 </script>
125
126 <!--15.6 节点关系查找-->
127 <!--操作标签节点时会包括文本节点和注释节点-->
128 <!--<ul>-->
129 <!-- <li>-->
130 <!-- <h1></h1>-->
131 <!-- <span></span>-->
132 <!-- </li>-->
133 <!--</ul>-->
134
135 <!--<script>-->
136 <!-- // 查找一个ul标签节点-->
137 <!-- let ul = document.querySelector('ul');-->
138 <!-- console.log(ul);-->
139 <!-- // 查找ul标签节点的子节点h1节点-->
140 <!-- let h1 = ul.childNodes[1].childNodes[1];-->
141 <!-- console.log(h1);-->
142 <!-- // 查找h1标签节点的下一个节点span节点-->
143 <!-- let span = h1.nextSibling.nextSibling;-->
144 <!-- console.log(span);-->
145 <!-- // 查找span标签节点的上一个节点h1节点-->
146 <!-- let h1_1 = span.previousSibling.previousSibling;-->
147 <!-- console.log(h1_1);-->
148
149 <!-- console.log(document.documentElement.parentNode === document); // true-->
150 <!-- console.log(document.childNodes[1] === document.documentElement); // true-->
151 <!--</script>-->
152
153 <!--15.7 针对标签元素的关系操作-->
154 <!--操作标签元素时不会包括文本节点和注释节点-->
155 <!--注意: document是标签节点不是标签元素-->
156 <!--<div >-->
157 <!-- <div class="baidu" data="bd">baidu.com</div>-->
158 <!-- <div class="sina">-->
159 <!-- sina.com-->
160 <!-- <span>新浪</span>-->
161 <!-- </div>-->
162 <!-- <div class="google">google.com</div>-->
163 <!--</div>-->
164
165 <!--<script>-->
166 <!-- 查找一个id为app的标签节点-->
167 <!-- let app = document.querySelector("#app");-->
168 <!-- console.log(app);-->
169 <!-- // 获取 id 为 app 下的所有子标签元素-->
170 <!-- console.log(app.children); // HTMLCollection(3)[div.baidu, div.sina, div.google]-->
171 <!-- // 获取 id 为 app 下的所有子标签节点-->
172 <!-- console.log(app.childNodes); // NodeList(7)[text, div.baidu, text, div.sina, text, div.google, text]-->
173 <!-- // 获取 id 为 app 下的第一个子标签元素-->
174 <!-- console.log(app.firstElementChild); // <div class="baidu" data="bd">baidu.com</div>-->
175 <!-- // 获取 id 为 app 下的最后一个子标签元素-->
176 <!-- console.log(app.lastElementChild); // <div class="google">google.com</div>-->
177 <!-- // 获取 id 为 app 的父标签元素-->
178 <!-- console.log(app.parentElement); // body-->
179 <!-- // 获取兄弟标签元素-->
180 <!-- let sina = document.querySelector(".sina");-->
181 <!-- console.log(sina.previousElementSibling); // <div class="baidu" data="bd">baidu.com</div>-->
182 <!-- console.log(sina.nextElementSibling); // <div class="google">google.com</div>-->
183 <!--</script>-->
184
185 <!--15.8 使用getElementsByClassName获取标签节点-->
186 <!--<div>-->
187 <!-- <ul>-->
188 <!-- <li class="bd item">baidu.com</li>-->
189 <!-- <li class="item">百度</li>-->
190 <!-- <li class="bd">-->
191 <!-- 搜索引擎-->
192 <!-- <div class="bd">中文</div>-->
193 <!-- </li>-->
194 <!-- </ul>-->
195 <!--</div>-->
196
197 <!--<script>-->
198 <!-- let bd = document.getElementsByClassName('bd');-->
199 <!-- console.log(bd); // HTMLCollection(3)[li.bd.item, li.bd, div.bd]-->
200 <!-- for (let item of bd) {-->
201 <!-- console.log(item);-->
202 <!-- }-->
203 <!--</script>-->
204
205 <!--15.9 使用getElementById获取标签节点-->
206 <!--<div >app</div>-->
207
208 <!--<script>-->
209 <!--let app = document.getElementById('app');-->
210 <!--console.log(app); // <div >app</div>-->
211 <!--</script>-->
212
213 <!--15.10 使用getElementsByName与getElementsByTagName获取标签节点-->
214 <!--<div name="app">百度</div>-->
215
216 <!--<script>-->
217 <!-- let app2 = document.getElementsByName('app');-->
218 <!-- console.log(app2); // NodeList[div]-->
219 <!-- let app1 = document.getElementsByTagName('div');-->
220 <!-- console.log(app1); // HTMLCollection[div, app: div]-->
221 <!--</script>-->
222
223 </body>
224