1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 </head>
7 <body>
8 <div>
9 <p id="p1">这是一个p标签</p>
10 <p>这是另外一个p标签</p>
11 <span id="span1"></span>
12 <input id="input1" type="text" value="dom对象">
13 <button id="button1">点击修改输入框内容/图片</button>
14 <img id="img1" src="../img/img_1.jpg" >
15 </div>
16 <script type="text/javascript">
17 let a = document.getElementById('p1').innerHTML
18 document.getElementById('span1').innerText = a + '的副本'
19 let b = document.getElementById('input1')
20 let c = document.getElementById('button1')
21 let d = document.getElementById('img1')
22 c.onclick = () => {
23 b.value = '1';
24 d.src = '../img/img_2.jpg';
25 }
26 document.write('<h1>添加</h1>')
27 // querySelectorAll获取所有的内容，返回的是一个NodeList,同getElementsByTagName，querySelector获取第一个内容
28 let e = document.querySelectorAll('p')
29 let f = document.querySelectorAll('#input1')
30 </script>
31 </body>
32 </html>