js中通过document获取标签节点

使用id名表示标签,不够严谨。在html语法中,id名随便起,可以是js中的关键字,但是在js中使用id代表标签,就不能使用关键字,所以我们需要一种更加严谨的方式获取标签。
方法一:通过id名来获取 - 方法 - document.getElementById('id名')

<body>
    <button id="var">按钮</button>
</body>
<script>
    var a = document.getElementById('var')
    console.log(a);
</script>
</html>

方法二:通过标签名来获取 - 方法 - document.getElementsByTayName('标签名') - 获取到的是一个集合,集合中会将当前页面中所有当前标签都获取到,哪怕只有一个,也是集合。获取到的集合,要取下标来做。

<body>
    <button id="var">按钮</button>
    <button id="aa">按钮</button>
    <button id="bb">按钮</button> 
</body>
<script>
    var a = document.getElementsByTagName('button')
    console.log(a);
    console.log(a[0]);
    for(var i=0;i<a.length;i++){
        a[i].onclick = function(){
            console.log(111)
        }
    }//三个按钮利用下标通过循环都绑上了点击事件
</script>

方法三:通过类名来获取 - 方法 - document.getElementsByClassName('类名') - 获取到的也是集合

<body>
    <input type="text" class="text1">
    <input type="text" class="text2">
    <input type="text" class="text3">
    <input type="text" class="text1">
</body>
<script>
    var text = document.getElementsByClassName('text1')
    console.log(text)
</script>

方法四:通过标签的name属性 - 方法 - document.getElementsByName('name属性的值')

<body>
    <input type="text" name="user">
    <input type="text" name="sex">
    <input type="text" name="sex">
    <input type="text" name="user">
</body>
<script>
   var  sex = document.getElementsByName('sex')
   console.log(sex)
</script>

方法五:通过css选择器来获取一个标签 - 方法 - document.querySelector('css选择器') - 获取到满足css选择器的第一个标签

<body>
    <input type="text" class="text1">
    <input type="text" class="text2">
    <input type="text" class="text3">
    <input type="text" class="text1">
</body>
<script>
    var text1 = document.querySelector('.text1')
    console.log(text1) //只输出一个<input type="text" class="text1">
</script>

方法六:通过css选择器来获取所有满足css选择器的标签们 - 方法 - document.querySelectorAll(css选择器)

<body>
    <input type="text" class="text1">
    <input type="text" class="text2">
    <input type="text" class="text3">
    <input type="text" class="text1">
</body>
<script>
    var text1 = document.querySelectorAll('.text1')
    console.log(text1); 
    //输出:
    //0: input.text1
    //1: input.text1
    //length: 2
    //[[Prototype]]: NodeList

</script>


版权声明:本文为li072399原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。