DOM中HTML的改变

DOM中HTML的改变

一、DOM中HTML改变输出流

 document.write()

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

1、字符串

2、解析标签

3、换行

4、docunment.write()换行:与 <pre></pre> 连用

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

二、DOM中HTML改变输出内容

1、innerHTML 属性 获取/设置元素的内容

获取元素的内容 包含标签，可以解析标签

2、innerText 属性 获取/设置元素的文本内容，不能解析标签

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

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

三、DOM中HTML改变输出属性

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