JavaScript中DOM操作之设定标签属性

Posted 2021-03-03 不懂老爱瞎逼逼

一、标签属性值的设定和获取

标签对象.steAttribute(‘属性名称‘,属性值)；
一次只能定义一个，如果要定义多个，需要多次执行
获取标签属性值
标签对象.getAttribute(‘属性名称‘);
获取的结果都是字符串

//获取所有div的标签
var oDiv1 = document.querySelector(‘div‘);
//并且将属性设置为index=0
oDiv1.setAttribute(‘index‘,0);
//输出设定后的结果
console.log( oDiv1 ); 
//获取属性名称为index的属性值
oDiv2 = oDiv1.getAttribute(‘index‘);
//输出属性名称为index的属性值
console.log( oDiv2); 

二、特殊属性值的设定

// 标签对象.id = 属性值 设定id属性的属性值
oDiv.id = ‘div1‘;
//输出id为div1的属性值
console.log( oDiv.id )
// 标签对象.className = 属性值 设定class属性的属性值
oDiv.className = ‘div3‘;
//输出class为div2的属性值
console.log( oDiv.className )
//直接使用name操作，部分浏览器可以用，存在兼容性问题主要还是使用set,get最安全 
//不推荐
oDiv.name = ‘张三‘;
console.log(oDiv.name);

总结：
A:getAttributesetAttribute是所有属性标签都通用的，建议使用
B：id设定：标签对象.id = 属性值，也可以用，最好用get和set
C：class设定：标签对象.className = 属性值，也可以用，最好用get和set
D：name设定：标签对象.className = 属性值，最好不要用，直接用get和set
E、属性值的设定是替换操作，会覆盖之前的、写在前面设的属性

三、设定标签属性值
1、标签本身具有属性，可以直接操作，也可以用gat/set来操作

var oDiv = document.querySelector(‘div‘);
oDiv.className = ‘div1‘;
oDiv.setAttribute(‘class‘,‘div1‘)

2、单选框、复选框、checked属性

//不同浏览器存在兼容性问题，有时不能正确获取值，输出结果为undefined
var oSpan = document.querySelector(‘span‘);
oSpan.setAttribute(‘name‘,‘spanspan)‘;
oSpan.setAttribute(‘index‘,‘第一个‘);
console.log(oSpan.name)
console.log(oSpan.index)

3、value属性值一般用于input标签

var oBtn1 = document.querySelector(‘[name="btn1"]‘);
oBtn1.onclick = function(){
    var oFile = document.querySelector(‘[type="file"]‘);
    // 设定在标签内部的value属性,不起作用的,获取的结果是 空字符串
    // 通过点击选择上传内容之后,可以通过value属性,正确获取数据参数 
    console.log(oFile.value);
}
var oBtn2 = document.querySelector(‘[name="btn2"]‘);
oBtn2.onclick = function(){
    var oText = document.querySelector(‘textarea‘);
    // 设定在标签内部的value属性,不起作用的,获取的结果是 空字符串
    // 设定标签内容,或者写入内容之后,可以通过value属性获取标签数据 
    console.log(oText.value);
}

注：
A、直接使用是classname和class的值，例如 id,class,checked
B、set方法是class和class的值，例如 index , number , res , idNumber....
C、有时会存在兼容性问题，可以互相试试