DOM标签属性和对象属性

DOM元素的属性分为两种

　　(1)标签属性　　直接写在标签上的属性

　　(2)对象属性　　由于所有的DOM元素都是Object类型,所以我们可以通过对象的方式为DOM元素设置属性

1.标签属性

　　(1)设置标签属性

　　　　elem.setAttribute(属性名,属性值);

　　　<div></div>

　　<script>　　 

　　　　　　 var div=document.querySelector("div");  

 

      　　  div.setAttribute("abc","123");   //为div添加属性  属性名abc  属性值为123

       　　 console.log(div);    //打印结果:  <div abc="123"></div>

　　</script>

 　　注意:  

　　　　　　(1)属性名单词之间通常用"    -     "连接, 并且不使用驼峰式     例如    div-one

　　　　　　(2)属性值必须为小写字符串

　　　　　　(3)可以通过标签属性获取元素      例如:   document.querySelector("[abc='123']");

 　　(2)获取标签属性值,并返回

　　　　elem.getAttribute(属性名);

　　　　var str=div.getAttribute("abc"); 

　　　　console.log(str);    //打印结果:  123

 　　(3)删除标签属性

 　　　　elem.removeAttribute(属性名);

　　　　div.removeAttribute("abc");
　　　　console.log(div);  //打印结果:   <div></div>

 　(4)标签的单属性属性值和属性名相同

　　　　示例:

    <input type="checkbox">
    <script>
        var input=document.querySelector("input");  //获取input
        input.setAttribute("checked","");　　　　　　//写法1
        input.setAttribute("checked","checked");　　　//写法2</script>
　　　//写法1 和写法2  都会使复选框被选中

 1.对象属性

 　　(1)设置对象属性  使用点语法

　　　　　　　　elem.属性名=属性值;

　　　　获取对象属性值:

　　　　　　　　elem.属性名    

        var div = document.querySelector("div");  //获取div1
        div.abc="123";    //为div添加abc属性  属性值为 123
        console.log(div);   //打印div
        console.log(div.abc); //获取并打印div的 abc属性值

 

 　　这时我们发现对象属性并不会显示在标签上

 　　(2)对象属性优先级高于标签属性

    <input type="checkbox">DOM属性

    <script>
        var input=document.querySelector("input");  //获取input
        input.checked=false;                        //设置对象属性
        input.setAttribute("checked","");　　　　 　　//设置标签属性
    </script>     

 

　　(3)标签属性  与   对应的对象属性

　　　　(a) checked   id   title  等  标签属性有对应的对象属性   自定义属性没有

　　　　(b)class较为特殊,对应的对象属性为  className

        input.className="check1";
        console.log(input);   //打印结果:  <input type="checkbox" class="check1">

 　　(4)style属性　　　

1. 1. 　　每个元素都有style属性
   2. 　　可以通过字符串添加修改行内样式
   3. 　　可用设置队形属性设置方式,添加修改行内样式
   4. 　　通常用对象的写法

　　　示例: 创建标签并设置样式

        function ce(type, style) {
            var elem = document.createElement(type);
            // ES6的方法   将后面的对象中的属性复制到前面对象中
            Object.assign(elem.style, style);
            return elem;
        }
        console.log(typeof (div));

　　　　//用法: ce(标签名,样式)

　　　　　　var div = ce("div", {

　　　　　　　　　　 "30px",
　　　　　　　　　　height: "30px",
　　　　　　　　　　border: "1px solid",
　　　　　　　　　　backgroundColor: "red"
　　　　　　});
　　　　　　document.body.appendChild(div);  //将创建好的元素添加至body