[toc] ## DOM对象 >#### 1. HTML DOM: 当网页被加载时，浏览器会创建页面的文档对象模型(Document Object Model) 1. js能够改变页面中的所有html元素 2. js能够改变页面中的所有html属性 3. js能够改变页面中的所有css样式 4. js能对页面中的所有事件做出反应 >#### 2. DOM操作HTML 1. 改变HTML输出流 注意：绝对不要在文档加载完成之后使用document.write(). 这会覆盖该文档 2. 寻找元素: 通过id找到html元素 通过标签名找到html元素 3. 改变HTML内容: 使用属性: innerHTML ``` <h1 id="title">last time</h1> <button onclick="this.innerHTML = 'ok!'">thats ok?</button> <input type="button" id="btn" value="try" onclick="change()"> <script> function change(){ var title = document.getElementById("title"); title.innerHTML = "we do it"; } </script> ``` 4. 改变HTML属性: 使用属性: attribute ``` <div><img id="img" src="images/image-01.jpg" alt="" onclick="change()"></div> <p>点击图片切换</p> <script> var img = document.getElementById("img"); function change(){ if(img.src.match("images/image-01.jpg")){ img.src = "images/image-02.jpg"; }else { img.src = "images/image-01.jpg"; } } </script> ``` >#### 3. DOM操作CSS 通过DOM对象改变CSS 语法: document.getElementById(id).style.property = new style ``` <h1 id="title">改变css样式</h1> <button id="change" onclick="change()">点击改变</button> <script> function change(){ title = document.getElementById("title"); title.style.fontSize = "50px"; title.style.color = "yellow"; } </script> ``` >#### 4. DOM EventListener 1. DOM EvenListener: 方法: addEventListener(): removeEventListener(): 2. addEventListener(): 方法用于向指定元素添加句柄 3. removeEventListener(): 移除方法添加的事件句柄 ``` /*原本实现点击事件方法*/ <button id="btn" onclick="change()">button</button> <script> function change() { alert("hello"); } </script> /*添加句柄实现方法*/ <button id="btn">button</button> <script> var x = document.getElementById("x"); x.addEventListener("click", hello); function hello(){ alert("hello"); } </script> ```