JS 获取标签对象

最新推荐文章于 2023-03-16 09:54:37 发布

珎珎啊

最新推荐文章于 2023-03-16 09:54:37 发布

阅读量2k

点赞数 1

分类专栏：前端文章标签： javascript js

本文链接：https://blog.csdn.net/qq_43363773/article/details/105149920

版权

前端专栏收录该内容

113 篇文章 1 订阅

订阅专栏

获取标签对象

document.getElementById()
通过id的属性值;获取到的是一个标签
document.querySelector()
获取一个标签对象
可以通过多种方式获取标签对象,只获取符合条件的第一个标签
方式:
‘#id属性值’
‘.class属性值’
‘标签名称’
‘css选择器’
‘[属性=“属性值”]’
‘父级标签>子级标签’
document.getElementsByClassName()
class的属性值
获取到的是有一个伪数组
可以通过[ ]语法操作,不可以通过forEach()循环遍历
document.getElementsByClassTagName()
标签名称
取到的是有一个伪数组
可以通过[ ]语法操作,不可以通过forEach()循环遍历
document.getElementsByName()
name 属性的属性值
获取到的是有一个伪数组
可以通过[ ]语法操作,不可以通过forEach()循环遍历
document.querySelector()
获取伪数组,可以forEach()循环
name 属性的属性值
获取到的是有一个伪数组
可以通过[ ]语法操作,不可以通过forEach()循环遍历

for…in 和 for循环的区别

for循环,索引是循环变量 for…in循环,索引是自定变量
for…in循环,比for循环多以一些内容
for…in循环,在循环标签伪数组时,会多获取一些内容
在 proto 中的 3个内容
之后做一些操作时,会产生报错信息,但是一般不会影响程序的正常执行
推荐:使用for循环,或者forEach()循环
只会循环遍历获取到标签和索引,不会有多余的内容

<body>
    <ul>
        <li class="li1" name="li2"></li>
        <li class="li1" name="li2"></li>
        <li class="li1" name="li2"></li>
        <li class="li1" name="li2"></li>
        <li class="li1" name="li2"></li>
    </ul>

    <script> 
   var oLis1 = document.getElementsByClassName('li1');

        var oLis2 = document.querySelectorAll('.li1');
// 两种方式获取的都是伪数组,但是获取的数组内容,不同
     console.log(oLis1);//HTMLCollection(5) [li.li1, li.li1, li.li1, li.li1, li.li1, li2: li.li1]
      console.log(oLis2);//NodeList(5) [li.li1, li.li1, li.li1, li.li1, li.li1]
	 // 不能用forEach()循环的
        // oLis1.forEach(function(v){
        //     console.log(v)
        // })

        // 如果要循环可以使用for循环    
 	  for(var i = 0 ; i <= oLis1.length-1 ; i++){
             console.log( oLis1[i] );
      }

        // 还可以使用for..in循环
        
        // 不同方式,获取的标签对象,虽然都是伪数组,但是伪数组的结构不同
        // for...in循环的结果也不同

         for(var index in oLis1){
            console.log( oLis1[index] );
        }
        
          for(var index in oLis2 ){
            console.log( oLis2[index] )
        }   

        // forEach循环的结果
        // oLis1 不能被forEach循环的

        oLis2.forEach(function(v , k){
            console.log(v , k)
        }) 
    </script>

给标签添加属性

标签对象.setAttribute(‘属性名称’ , 属性值);
一次只能定义一个属性,如果要定义多个属性,要执行多次

</body>
<style>
        #div1{
            color: red;
        } 
    </style>
</head>
<body>
    <div>我是div</div>
        <script>
        /
        // 获取标签属性的属性值
        // 标签对象.getAttribute('属性名称');
        // 获取到的结果,都是字符串类型

        var oDiv = document.querySelector('div');

        // 给 div 标签,添加属性index 属性值是0
        oDiv.setAttribute('index' , 0);
        oDiv.setAttribute('key' , '第一个div');

        // 获取标签属性的属性值
        console.log( oDiv.getAttribute('index') ); //0
        console.log( oDiv.getAttribute('key') ); //第一个div 

        // 几个特殊的属性设定方式
        // id属性  class属性  直接定义在标签对象上的方法
        // 可以直接定义或者获取,不同通过 get ,set
         console.dir(oDiv)

        // 标签对象.id = 属性值   设定id属性的属性值
        oDiv.id = 'div1';

        // 标签对象.className = 属性值   设定class属性的属性值
        oDiv.className = 'div2';

        // 标签对象.id   获取标签对象,id属性值
        console.log( oDiv.id )

        // 标签对象.className   获取标签对象,class属性值
        console.log( oDiv.className )

        // 直接操作name属性, 并不是所有的浏览器都支持的
        // 使用set,get最安全 
        oDiv.name = '张三';
        console.log(oDiv.name);

总结

可以通过 setAttribute() 设定标签所有的属性包括 id , class
可以通过 getAttribute() 所有标签所有的属性的属性值包括 id , class
所有的属性,设定或者获取,都建议,通过set,get完成
id和class属性可以直接通过标签对象.id和标签对象.className;来设定或者获取
根据不同版本的浏览器,有一些不在标签对象本身属性上的,也可以直接设定
例如 name , titile ; 但是因为浏览器兼容问题,推荐还是使用set,get
这里属性值的设定,是替换操作,会覆盖之前的设定属性;而不是新增添加属性操作

<style>
        .div1{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background: black;
            color: #fff;
        } 
        .div2{
            width: 200px;
            height: 200px;
            border: 5px solid black;
            background:red;
            color:green;
        } 
        .div3{
            width: 300px;
            height: 300px;
            border: 10px solid skyblue;
            background:orange;
            color:pink;
        }
    </style>
</head>
<body>
    <button name="btn1">皮肤1</button>
    <button name="btn2">皮肤2</button>
    <button name="btn3">皮肤3</button>
    <div class="div1">
        <span>内容</span>
    </div> 
    <script>
        // 换肤效果 --- 设定不同样式效果
        // 点击标签,设定不同的css样式
        // 可以修改 id属性值,或者class属性值

        // 获取不同的标签对象
        var oBtn1 = document.querySelector('[name="btn1"]');
        var oBtn2 = document.querySelector('[name="btn2"]');
        var oBtn3 = document.querySelector('[name="btn3"]');

        var oDiv = document.querySelector('div');

        // 给标签对象,定义不同的点击事件
        // 给标签对象添加点击事件,触发事件时,执行的程序是
        // 给div标签,设定不同的class属性值,加载不同的选择器,执行不同css样式效果

        // 再次强调,class关键词,在JavaScript中,有其他作用
        // 在JavaScript中,操作,设定class属性,统一都使用className关键词
        
        // 给第一个button标签,添加点击事件
        oBtn1.onclick = function(){
            // 触发事件时,给div标签,设定class属性值为 div1 
            oDiv.className = 'div1';
        }

        // 给第二个button标签,添加点击事件
        oBtn2.onclick = function(){
            // 触发事件时,给div标签,设定class属性值为 div2
            oDiv.className = 'div2';
        }

        // 给第三个button标签,添加点击事件
        oBtn3.onclick = function(){
            // 触发事件时,给div标签,设定class属性值为 div3
            oDiv.className = 'div3';
        }
        // 这的操作是,属性值覆盖操作,新设定的属性,会覆盖之前设定的属性值
   </script>

循环遍历添加事件

</body>
<body>
    <ul>
        <li>我是第一个li</li>
        <li>我是第二个li</li>
        <li>我是第三个li</li>
        <li>我是第四个li</li>
        <li>我是第五个li</li>
    </ul> 
    <script>
        // 通过循环遍历,给标签添加事件/操作

        // 1,获取标签对象的集合,也就是数组形式的
        var oLis = document.querySelectorAll('li');
        console.log(oLis);

        // 2,通过 forEach() 等 方式,循环遍历数组中的对象,给这些标签,添加设定/绑定事件
        // 定义的第一个形参,存储的是数组的数据对象,也就是li标签
        oLis.forEach(function( itme ){
            itme.onclick = function(){
                // 输出的是相同的内容
                console.log(123);
            }
        })

        // 通过循环,每次对一个标签进行操作
        // 循环结束,对数组中存储的所有标签,都进行操作
        // 给数组中的所有标签都绑定 click 事件

珎珎啊

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JS 获取标签对象

获取标签对象document.getElementById()通过id的属性值;获取到的是一个标签document.querySelector()获取一个标签对象可以通过多种方式获取标签对象,只获取符合条件的第一个标签方式:‘#id属性值’‘.class属性值’‘标签名称’‘css选择器’‘[属性=“属性值”]’‘父级标签>子级标签’document.g...
复制链接

扫一扫