js-dom操作

DOM是文档对象化模型（Document Object Model）的简称。DOM Tree是指通过DOM将HTML页面进行解析，并生成的HTML tree树状结构和对应访问方法。

HTML DOM 模型被构造为对象的树

DOM-树

知识体系

思维导图

改变HTML内容

document.write();可用于直接向 HTML 输出流写内容。

• 绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。

document.getElementById(id).innerHTML=new HTML

• 改变 HTML 元素的内容

<h1 id="header">Old Header</h1>

<script>
    var element=document.getElementById("header");
    element.innerHTML="New Header";
</script>

改变HTML属性

document.getElementById(id).attribute=new value

<img id="image" src="smiley.gif">

<script>
    document.getElementById("image").src="landscape.jpg";
</script>

document.getElementById(id).attribute=new value

• 改变 HTML 元素的属性

    <style>
        .a{
            width: 200px;
            height: 300px;
            background-color: bisque;
        }
        .b{
            width: 200px;
            height: 300px;
            background-color: black;
        }
    </style>

    <div id="example" class="a"></div>
    <input type="button" onclick="changeC()" value="改变颜色">
    <script>
        function changeC() {
            document.getElementById("example").className = "b";
        }
    </script>

HTML DOM 改变 CSS

• 改变 HTML 元素的样式

document.getElementById(id).style.property=new style

<div id="example" class="a"></div>
<script> 
    document.getElementById("example").style.color="blue"; 
</script>