DOM标签属性和对象属性

DOM元素的属性分为两种

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

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

1.标签属性

　　(1)设置标签属性

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

　　<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. 　　每个元素都有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", {

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

巴特西

DOM标签属性和对象属性

最新文章

热门文章