js中 DOM属性操作

详细看源码中的注释:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        onload = function () {

            //操作属性节点就是属性的增删改查
            var div = document.querySelectorAll('#dv')[0];

            /*
            * 增加属性方法
            * */
            //第一种
            //使用setAttribute添加属性
            //添加自定义,非标准属性
            div.setAttribute('webname','修远兮');

            //第二种
            //使用.xxx = vvv 添加属性
            //添加标准属性(html-dom)
            div.className = 'c';

            //第三种
            //使用DOM节点方法
            var attr = document.createAttribute('test');
            attr.nodeValue = '测试';
            div.setAttributeNode(attr);

            /*
            * 删除属性方法
            * */
            //下面为删除checkbox默认选中状态的方法
            //删除方法一
            //var ck = document.querySelectorAll('#ck')[0];
            //直接删除checked属性
            //ck.removeAttribute('checked');

            //删除方法二  以对象的方法删除
            //var attr = ck.getAttributeNode('checked');
            //ck.removeAttributeNode(attr);

            //删除checked方法三  直接设为false
            var ck = document.querySelectorAll('#ck')[0];
            //ck.checked = false;  该取值为boolen值,即true或false
            //如果下面用 ck.checked = 'checked'; 意思是先将字符串checked先转化成布尔值,再进行赋值
            ck.checked = false;

        }
    </script>
</head>
<body>
<h2>DOM属性操作</h2>
<div id="dv"></div>
<input type="checkbox" checked="checked" id="ck">
</body>
</html>

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND