通过DOM对HTML文档的元素内容和CSS样式进行操作

通过前面的学习我们应该可以了解到，通过DOM我们可以操作HTMl文档中的任意的元素及属性，文本内容。其实实际工作中我们用到最多的是怎样通过DOM操作HTML文档中的CSS样式。

HTML代码：

    <button id="btn">切换</button>
    <div class="wrap" id="wrap" style="color: yellow;">
        <p id="text" class="text">这是一个段落</p>
        <ul class="list">
            列表
            <li class="item">列表01</li>
            <li>列表02</li>
            <li>列表03</li>
            <li>列表04</li>
        </ul>
        <!-- <img src="../../CSS/0421/car.gif" alt=""> -->
        <div class="box"></div>
    </div>

CSS代码：

     
    .box{
        width: 200px;
        height: 200px;
        background: url("../../CSS/0421/car.gif") no-repeat center/100% 100%;
    }

1.有关HTML的操作

    // DOM中有关HTML的操作
    var oWrap=document.getElementsByClassName("wrap")[0];
    var oText=document.getElementById("text");
    var oList=document.getElementsByClassName("list")[0];
    var oImg=document.querySelector("img");
    var oItem=document.getElementsByClassName("item")[0];

    // innerHTML 获取/设置元素的内容 包含标签
    console.log(oWrap.innerHTML);
    // oWrap.innerHTML="<h2 style='color:yellow'>这是一个标题</h2>";
    // outerHTML
    console.log(oWrap.outerHTML);



    // innerText 获取/设置元素的文本内容
    console.log(oWrap.innerText);
    console.log(oItem.innerText);
    // oWrap.innerText="<h2 style='color:yellow'>这是一个标题</h2>";

    // outerText
    console.log(oItem.outerText);

2.通过DOM操作CSS样式

    var oWrap=document.getElementsByClassName("wrap")[0];
    var oText=document.getElementById("text");
    var oList=document.getElementsByClassName("list")[0];
    var oImg=document.querySelector(".box");
    var oItem=document.getElementsByClassName("item")[0];
    var oBtn=document.getElementById("btn");

    // 获取css样式
    // 语法：element.style 只可以获取行内样式
    console.log(oWrap.style);
    console.log(oWrap.getAttribute("style"));


    // 设置css样式：
    // 语法：element.style.样式属性名="样式属性值"
    oList.style.color="blue";

    // css属性中 有 - 的 改为驼峰peiw
    // oList.style.backgroundColor="pink";
    oList.setAttribute("style","background-color:hotpink");
    oBtn.onclick=function(){
        // oImg.src="../../CSS/0421/car.jpg";
        oImg.style.backgroundImage="url(../../CSS/0421/car.jpg)";
    }

注意： inndeHTML和outerHHML的区别很好区分，但是innerText和outerText的区别却不好区分，其实innerText和outerText的主要区别在于设置属性时的区别。

• innerHTML 设置或获取位于对象起始和结束标签内的 HTML。
• outerHTML 设置或获取对象及其内容的 HTML 形式。
• innerText 设置或获取位于对象起始和结束标签内的文本。
• outerText 设置(包括标签)或获取(不包括标签)对象的文本。

视频讲解链接：
https://www.bilibili.com/video/BV1fg4y1B7Uz/