document.querySelector("input")

document.querySelector("input") 是 JavaScript 中的一个方法，用于通过 CSS 选择器来获取文档中匹配的第一个元素。具体来说，它会返回文档中第一个匹配选择器的 <input> 元素。

这个方法常用于获取页面中的表单元素，比如文本框、复选框、单选按钮等。通过该方法，我们可以方便地获取到需要操作的表单元素，并对其进行相应的处理，比如修改值、添加事件监听等。

需要注意的是，如果页面中存在多个匹配选择器的元素，该方法只会返回第一个匹配的元素。如果要获取所有匹配的元素，可以使用 document.querySelectorAll("input") 方法。

相关问题

document.getElementById和document.querySelector

document.getElementById和document.querySelector都是JavaScript中用于获取HTML元素的方法。它们有些相似，但也有一些区别。

1. document.getElementById：这是一个非常常用的方法，它通过给定元素的id属性来获取对应的元素。它返回一个表示该元素的DOM对象。如果找不到相应的元素，则返回null。

使用示例：

var element = document.getElementById("myElement");

2. document.querySelector：这是一个更灵活的方法，它允许使用CSS选择器来查找元素。它返回匹配选择器的第一个元素，如果找不到相应的元素，则返回null。

使用示例：

var element = document.querySelector("#myElement");var element = document.querySelector(".myClass");
var element = document.querySelector("input[name='myInput']");

区别：
- getElementById只能通过id属性获取元素，而querySelector可以使用更多的选择器（例如类名、标签名、属性等）来查找元素。
- getElementById只返回一个元素，而querySelector返回匹配选择器的第一个元素。
- getElementById是DOM对象的方法，而querySelector是Document对象的方法。

优化代码使得点击name值为“图书馆时”会在div为picshow中加载照片pic <div id="picshow"> </div> var marker = L.marker(point.latlng).addTo(map); marker.bindPopup(point.name); marker.on('click', function() { if (point.name === '图书馆') { document.querySelector("#section3 input").value = "您点击了图书馆"; document.querySelector("#section3 input").style.fontSize = "20px"; }else if (point.name === "敬亭学堂"){ document.querySelector("#section3 input").value = "您点击了敬亭学堂"; document.querySelector("#section3 input").style.fontSize = "20px"; }else if (point.name === "新安学堂"){ document.querySelector("#section3 input").value = "您点击了新安学堂"; document.querySelector("#section3 input").style.fontSize = "20px"; } })

可以通过修改marker.on的回调函数中的代码来实现点击name值为“图书馆时”在div为picshow中加载照片pic：

var marker = L.marker(point.latlng).addTo(map);
marker.bindPopup(point.name);
marker.on('click', function() {
  if (point.name === '图书馆') {
    document.querySelector("#section3 input").value = "您点击了图书馆";
    document.querySelector("#section3 input").style.fontSize = "20px";
    document.querySelector("#picshow").innerHTML = "<img src='pic.jpg'>";
  } else if (point.name === "敬亭学堂") {
    document.querySelector("#section3 input").value = "您点击了敬亭学堂";
    document.querySelector("#section3 input").style.fontSize = "20px";
    document.querySelector("#picshow").innerHTML = "";
  } else if (point.name === "新安学堂") {
    document.querySelector("#section3 input").value = "您点击了新安学堂";
    document.querySelector("#section3 input").style.fontSize = "20px";
    document.querySelector("#picshow").innerHTML = "";
  }
})

其中，当点击的是“图书馆”时，将picshow的innerHTML设置为包含图片的HTML代码，图片的路径为'pic.jpg'；当点击的是“敬亭学堂”或“新安学堂”时，picshow的innerHTML清空。