JavaScript Day13

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.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];

innerHTML 属性 获取/设置元素的内容
获取元素的内容 包含标签

   console.log(oBox.innerHTML);

设置 可以解析标签

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

innerText 属性 获取/设置元素的文本内容

console.log(oBox.innerText);

设置 不能解析标签

    aBtns[1].onclick=function(){
        // oBox.innerHTML="这是通过innerText设置的内容"
        oBox.innerText="<b style='color:yellow'>这是通过innerText设置的内容</b>"
    }

outerHTML 属性 获取/设置元素的内容 包含自身

    console.log(oBox.outerHTML);

outerText 属性 获取/设置元素的文本内容

    console.log(oBox.outerText);

DOM中HTML改变输出属性

 <h1>03DOM中HTML改变输出属性</h1>
 <button>改变src</button>
 <button>改变class</button>
 <button>改变style</button>
 <div id="box">
 <img src="../0424/car.jpg" width="128">
 <h2 class="header">标题标签</h2>
 <p style="color:yellow;">段落标签</p>
 <span>文本标签</span>
 </div>

获取元素

    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];

src 属性 路径属性 获取/设置文件的路径

// console.log(oImage.getAttribute("src"));
 // console.log(oImage.src);
    aBtns[0].onclick=function(){
        oImage.src="./128.png"
    }

className 属性 获取/设置元素的类名

    console.log(oHeader.getAttribute("class"));
    console.log(oHeader.className);
    aBtns[1].onclick=function(){
        oHeader.className="shuishen xiaomihu"
    }

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";//驼峰
   }