JavaScript学习笔记——DOM属性

		<img 
        src="https://img-blog.csdnimg.cn/20200905163335124.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vem9taTA2MDk=,size_16,color_FFFFFF,t_70#pic_center" class="image-box" 
        title="美女图片" 
        alt="地铁一瞥" 
        id="a1">

以下举例均采用上述标签

获取节点的属性值

方式1

    元素节点.属性名;
    元素节点[属性名];

		var imgNode = document.getElementsByTagName("img")[0];
            
        console.log(imgNode.src);
        console.log(imgNode.className);//注意是className，不是class
        console.log(imgNode.title);

        console.log("------------");

        console.log(imgNode["src"]);
        console.log(imgNode["className"]); //注意，是className，不是class
        console.log(imgNode["title"]);

方式二

    元素节点.getAttribute("属性名称");

		var imgNode = document.getElementsByTagName("img")[0];
		console.log(imgNode.getAttribute("src"));
		console.log(imgNode.getAttribute("class")); //注意是class，不是className
		console.log(imgNode.getAttribute("title"));
		//输出结果与上图类似

区别

方式1和方式2的区别在于：

前者是直接操作标签，后者是把标签作为DOM节点，推荐方法二

设置节点的属性值

方式1

    imgNode.src = "https://img-blog.csdnimg.cn/20200907111034735.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vem9taTA2MDk=,size_16,color_FFFFFF,t_70#pic_center"   //修改src的属性值
    imgNode.className = "image2-box";  //修改class的name

方式二

	元素节点.setAttribute(属性名, 新的属性值);

	imgNode.setAttribute("src","https://img-blog.csdnimg.cn/20200907111034735.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vem9taTA2MDk=,size_16,color_FFFFFF,t_70#pic_center"); //修改src的属性值

	imgNode.setAttribute("class","image3-box");

删除节点的属性

    元素节点.removeAttribute(属性名);

    imgNode.removeAttribute("class");
    imgNode.removeAttribute("id");

总结：

获取节点的属性值和设置节点的属性值，都有两种方式，但这两种方式是有区别的

• 方式一的元素节点.属性和元素节点[属性]:绑定的属性值不会出现在标签上
• 方式二的get/set/removeAttribut: 绑定的属性值会出现在标签上

因为方式一操作的是属性，方式二操作的是标签本身

注意：
这两种方式不能交换使用，get值和set值必须使用用一种方法