0
点赞
收藏
分享

微信扫一扫

DOM-第四周学习笔记3

玩物励志老乐 2022-05-04 阅读 52

操作元素:

目录

一、元素的内容:3个

二、元素的属性:

三、元素的样式:



一、元素的内容:3个

        1、innerHTML:获取 和 设置元素的内容,并且识别标签 - 没有兼容性问题,老IE也支持
        获取:elem.innerHTML;    -   往往用于判断
        设置:elem.innerHTML="新内容"    -   添加/修改

        2、textContent:获取 和 设置元素的文本,不能识别标签 - 有兼容性问题老IE不支持
        获取:elem.textContent;    -   往往用于判断
        设置:elem.textContent="新文本"    -   添加/修改
        解决:innerText - 小三上位了,此方法本来是属于老IE的,但是现在主流浏览器也支持

        3、value:获取 和 设置input的内容
        获取:input.value;    -   往往用于判断
        设置:input.value="新文本"    -   添加/修改
    


二、元素的属性:


        1、获取属性值: - 往往用于判断
        核心DOM:elem.getAttribute("属性名");    -   虽然API比较繁琐,但是无敌的

        HTML DOM:elem.属性名      -    虽然简单,但是不能操作自定义属性

          2、设置属性值: - 添加/修改
        核心DOM:elem.setAttribute("属性名","属性值");    -   虽然API比较繁琐,但是无敌的

        HTML DOM:elem.属性名="属性值"      -    虽然简单,但是不能操作自定义属性

        3、删除属性值:
           *核心DOM:elem.removeAttribute("属性名") - 完整删除整个属性节点

        HTML DOM:elem.属性名=""      -  删不干净,只能删掉属性值,属性节点依然存在,而有的属性,只需要写出属性名就已经有作用(比如:href、disabled、readonly)了

        4、判断有没有 - 垃圾
        elem.hasAttribute("属性名"); - 结果是一个布尔值,但是没有用,只能判断有没有,不能判断具体属性值是什么
        真正推荐判断,你还是使用获取属性值

    建议:以后优先使用HTML DOM,HTML DOM实现不了在用核心DOM补充
        tips:① class要写为className
                   ②不能操作自定义属性

三、元素的样式:

        1、内联样式:
        优点:1、优先级高    2、不会牵一发动全身
        获取:elem.style.css属性名;
        设置:elem.style.css属性名="css属性值";

        特殊:1、css属性名,把横线去掉换成小驼峰命名法
              2、获取也只能获取内联样式 - 小缺点

        2、样式表:
        //1、获取你想要操作的样式表
        var sheet=document.styleSheets[i];
        //2、获取所有样式规则
        var rules=sheet.cssRules;
        //3、数出 你需要操作的某个样式规则
        var rule=rules[i];
        //4、对此规则做获取或者设置
        console.log(rule.style.background);
        rule.style.background="purple";

举报

相关推荐

DOM-第四周学习笔记2

第四周学习周记:

第四周学习总结

第四周

大二寒假第四周学习笔记

DVWA(第四周)

0 条评论