DOM的标签属性和对象属性

一、标签属性

任何一个DOM元素，有两种属性，一个是对象属性，一个是标签属性。把写在标签上的属性称为标签属性。标签属性和对象属性是两套系统。

标签系统一般用于展现，对象数据一般用于数据的存储和设置

任何一个DOM元素都是对象模型，都可以自主的添加设置对象的属性和值

div.a=10;

    1.设置标签属性
    元素.setAttribute(属性名,属性值);
    属性名的命名不能使用驼峰式命名，通常命名时使用-区分两个单词:toggle-target
    属性值不能出现大写，并且必须是字符串
    例：div.setAttribute("abc","20");
    设置标签属性以后，可以用于多种数据使用，可以用于获取标签元素等操作
    var  d=document.querySelector("[abc='20']");
    console.log(d);

    2.获取标签属性值
    元素.getAttribute(属性名)
    console.log(div.getAttribute("abc"));
    console.log(div.getAttribute("id"));
    console.log(div.getAttribute("class"));

    3.删除标签属性
    元素.removeAttribute(属性名);
    div.removeAttribute("title");

    4.所有的标签 单属性 值和属性名相同
    var ck=document.querySelector("input");
    ck.setAttribute("checked","checked");
    ck.setAttribute("checked","");
    以上两种写法效果相同

二、对象属性

对象属性并不会显示在标签上

    1.
    var div=document.querySelector("div");
    div.a=10;
    我们认为所有DOM元素都是object，所以设置属性都是按照对象属性来设置
    console.log(div);
    //打印结果：
    例：<div id="div1" class="divs" title="nihao"></div>
    console.log(div.a);
    //打印结果：
    10
    可以查看DOM对象的属性
    console.dir(div);
    //打印结果：
    例：
    >div#div1.divs
    
    2.
    var ck=document.querySelector("input");
    ck.setAttribute("checked","");
    ck.checked=false;
    当遇到标签属性值和对象属性值冲突时，以对象属性值为准

    3.
    所有标签属性并不是都有对应的对象属性
    ck.setAttribute("abc","10");
    console.log(ck.abc);
    //abc为自设标签属性

    id title 等具有对象属性
    ck.setAttribute("id","abc");
    console.log(ck.id);

    class标签特殊，对于的对象属性为className
    var div=document.querySelector("div");
    div.setAttribute("class","div123");
    console.log(div.className);
    div.className="divsss";

    图片  src  width  height  是指图片的原始图片宽度，也可以设置更改，与标签属性一致
    表单元素 value name checked placeholder 这些标签属性和对象属性也是一致
    超链接 href 这些标签属性和对象属性也是一致的