小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

JS

DOM

文档==一棵树

当网页被加载的时候，浏览器就会创建文档对象模型，也就是dom
而dom可以看做一颗树

为什么要有这么一颗树呢？

1. JavaScript 能够改变页面中的所有 HTML 元素
2. JavaScript 能够改变页面中的所有 HTML 属性
3. JavaScript 能够改变页面中的所有 CSS 样式
4. JavaScript 能够对页面中的所有事件做出反应
5. 接下来我们来找一找元素吧

在树上找元素

我们如何在dom树上找到元素呢？

1. 通过 id 找到 HTML 元素

var x=document.getElementById("intro");

2. 通过标签名找到 HTML 元素

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

3. 通过类名找到 HTML 元素

var x=document.getElementsByClassName("intro");

找到元素后我们能做什么呢

改变html

1. 改变HTML内容

document.getElementById("p1").innerHTML="更改的文本";
var element=document.getElementById("header");
element.innerHTML="新标题";

2. 改变HTML属性

document.getElementById("image").src="更改图片路径";

改变css

document.getElementById("p2").style.color="blue";

dom事件

1. dom可以给元素分配事件

document.getElementById("myBtn").onclick=function(){change()};
function change(){
	alert('dom分配了的事件')
}

2. dom还可以给指定元素添加事件以及触发方式

document.getElementById("myBtn").addEventListener("click", displayDate);

element.addEventListener(event, function, useCapture);

event是触发方式，function是触发函数，useCapture是事件冒泡还是捕获

当然还有去除元素绑定事件的方法

removeEventListener() 
element.removeEventListener("mousemove", myFunction);

无中生有之创建dom元素

var element = document.getElementById("div1"); element.appendChild(para);

1. 尾部生有

var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
element.appendChild(para);

2. 头部生有

element.insertBefore('<div>1</div>');

3. 过河拆桥
   要移除一个元素，你需要知道该元素的父元素，然后再移除他

var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);

4. 移花接木

var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);