JS获取dom节点（选择器）

 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>