JavaScript学习第十三天

DOM中HTML改变输出流

     document.write()

     入口函数   
     当文档加载完成后 执行
     window.onload = function () {
         document.write("改变输出流");//会覆盖文档
     }

    // 字符串
    document.write("改变输出流");
    // 解析标签
    document.write("<h2>这是h2标签</h2>");


    // 换行
    document.write("改变输出流1");
    document.write("<br/>");
    document.write("改变输出流2");
    document.write("改变输出流3");
    document.write("改变输出流4");

    // document.writeln()  换行
    document.write("<pre>");
    document.writeln("改变输出流1");
    document.writeln("改变输出流2");
    document.writeln("改变输出流3");
    document.writeln("改变输出流4");
    document.write("<pre/>");

DOM中HTML改变输出内容

    例： 获取元素
    var oBox=document.getElementById("box");
    var oHeader=document.getElementsByTagName("h2")[0];
    var oPara=document.getElementsByTagName("p")[0];
    var oSpan=document.getElementsByTagName("span")[0];
    var aBtns=document.getElementsByTagName("button");
    
    1. innerHTML 属性  获取/设置元素的内容  
     获取元素的内容  包含标签
    console.log(oBox.innerHTML);

    1.1设置   可以解析标签
    aBtns[0].onclick=function(){
        // oBox.innerHTML="这是通过innerHTML设置的内容"
        oBox.innerHTML="<b style='color:yellow'>这是通过innerHTML设置的内容</b>"
    }

    2. innerText 属性   获取/设置元素的文本内容
    console.log(oBox.innerText);
    2.1 设置  不能解析标签
    aBtns[1].onclick=function(){
        // oBox.innerHTML="这是通过innerText设置的内容"
        oBox.innerText="<b style='color:yellow'>这是通过innerText设置的内容</b>"
    }

    3. outerHTML  属性 获取/设置元素的内容  包含自身
    console.log(oBox.outerHTML);

    4. outerText 属性 获取/设置元素的文本内容
    console.log(oBox.outerText);

DOM中HTML改变输出属性

    例： 获取元素
    var oBox=document.getElementById("box");
    var oHeader=document.getElementsByTagName("h2")[0];
    var oPara=document.getElementsByTagName("p")[0];
    var oSpan=document.getElementsByTagName("span")[0];
    var aBtns=document.getElementsByTagName("button");
    var oImage=document.getElementsByTagName("img")[0];
    
    1. src 属性 路径属性  获取/设置文件的路径
    // console.log(oImage.getAttribute("src"));
    // console.log(oImage.src);
    aBtns[0].onclick=function(){
        oImage.src="./128.png"
    }

    2. className 属性  获取/设置元素的类名 
    console.log(oHeader.getAttribute("class"));
    console.log(oHeader.className);
    aBtns[1].onclick=function(){
        oHeader.className="shuishen xiaomihu"
    }
    3. style 属性  获取/设置元素的样式  
    // 行内样式
    console.log(oHeader.style);//返回样式对象
    console.log(oPara.style.color);
    aBtns[2].onclick=function(){
        // oHeader.style="color:pink"
        // oHeader.style.color="pink"
        // oHeader.style="background-color:pink"
        oHeader.style.backgroundColor="pink";//驼峰
    }