DOM-第四周学习笔记3

操作元素：

目录

一、元素的内容：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";