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

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

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

    // 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="<h2style='color:yellow'>这是一个标题</h2>";
    // outerHTML
    console.log(oWrap.outerHTML);
    // innerText   获取/设置元素的文本内容
    console.log(oWrap.innerText);
    console.log(oItem.innerText);
    // oWrap.innerText="<h2style='color:yellow'>这是一个标题</h2>";
    // outerText
    console.log(oItem.outerText);

    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)";
    }