JavaScript中获取页面元素的六种方式

• 根据指定的id名选中页面元素

       document.getElementById("id名");

<input type="button" id="idinp" class="classinp" name="nameinp" value="按钮" />
<script>
    document.getElementById("idinp");
</script>

• 根据指定的标签名选中页面中所有满足条件的元素

       document.getElementsByTagName("标签名");

<input type="button" id="idinp" class="classinp" name="nameinp" value="按钮" />
<script>
    var inp =document.getElementsByTagName("input");
    console.log(inp);
    console.log(inp[0]);

</script>

• 根据指定的name属性名选中页面中所有满足条件的元素

       document.getElementsByName("name属性");

<input type="button" id="idinp" class="classinp" name="nameinp" value="按钮" />
<script>
    document.getElementsByName("nameinp");
</script>

• 根据指定的类名选中页面中所有满足条件的元素根据

       document.getElementsByClassName("类名")

<input type="button" id="idinp" class="classinp" name="nameinp" value="按钮" />
<script>
    document.getElementsByClassName("classinp");
</script>

• 用来选中页面元素，根据给定的选择器进行筛选 如果有多个元素满足条件，则返回【第一个】满足条件的元素节点本方法用来选中页面元素

       document.querySelector("选择器名");

<input type="button" id="idinp" class="classinp" name="nameinp" value="按钮" />
<script>
    document.querySelector("input");
    document.querySelector("#idinp");
    document.querySelector(".classinp");
</script>

注意：如果查找失败，返回null，不是undefined也不是报错

• 本方法用来选中页面元素，根据给定的选择器进行筛选， 如果有多个元素满足条件，则返回【这些元素】

       document.querySelectorAll("选择器名");

<div>div1</div>
<div>div2</div>
<script>
    var div = document.querySelectorAll("div");
    console.log(div[0]);//<div>div1</div>
</script>

注意：

（1）返回的结果是一个节点列表，不是数组，但能够像使用数组一样使用列表

（2）如果查找失败不是返回null，而是返回一个空的节点列表