DOM-（Document Object Model）即文档对象模型。
JavaScript可以动态地修改DOM，从而来修改HTML的内容。
查找HTML元素
通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素
设置样式总结：
className:用于为DOM元素直接添加一个样式类
style:用于为DOM元素添加某一个样式值，注意驼峰写法
styleText:用于为DOM元素一次添加多个样式
创建和增加节点:
createElement():创建节点
appendChild():末尾追加方式插入节点
insertBefore()在指定节点前插入新节点
cloneNode():克隆节点
相关练习代码：
动态添加内容
<script type="text/javascript">
window.onload = function() {
var d = document.getElementById('d');
//创建一个节点,里面是节点标签的名字
//定义个变量，等于创建好的标签，然后在再向其中添加内容
var a = document.createElement('a');
a.href = '01.html';
a.innerText = '添加的新内容';
//添加元素到div里
d.appendChild(a);
//在指定节点前插入新的节点
var p = document.createElement('p');
//添加文本内容
p.innerText = "这是被添加的内容";
// d.appendChild(p);
//参数1：要添加的元素，参数2：指定节点
d.insertBefore(p,a);
//克隆节点
var span = document.getElementById(s);
//克隆元素
//cloneNode()有个参数，默认是false，修改为true，可以将原来的标签也克隆出来
var spanc = span.cloneNode(true);
d.appendChild(spanc);
}
</script>
<body>
<div id="d">
</div>
<span id="s">
span标签内的内容
</span>
</body>根据层次关系查找节点
<script>
window.onload = function() {
//通过id找到所需要的td
var t1 = document.getElementById('t1');
//获取父节点元素
var tr = t1.parentNode;
tr.style.backgroundColor = 'red';
//获取子节点元素
var tt3 = document.getElementById('tt3');
tr.lastElementChild;
tt3.innerText = 'blue';
//前一个元素节点
var t4 = t3.previousElementSibling;
t4.innerText = "000000";
//后一个元素节点
var t5 = t4.nextElementSibling;
t5.innerText = "XXXXXX";
}
</script>
<body>
<table>
<tr>
<td id = "t1">1</td>
<td id = "t2">2</td>
<td id = "t3">3</td>
</tr>
<tr>
<td id = "tt1">1</td>
<td id = "tt2">2</td>
<td id = "tt3">3</td>
</tr>
</table>
</body>
设置样式
<script type="text/javascript">
window.onload=function(){
/* 文档就绪函数*/
var d = document.getElementById('d');
//添加文本信息
/* d.innerText = "添加文本信息";
d.innerHTML = "可以直接添加文本信息，还可以添加标签";*/
var abc = document.getElementsByName('abc');
/*错误，ByName返回的是个数组，要通过数组来选取*/abc.href = "";
/*ByName 通过数组下标得到对应元素*/
abc[0].innerText = "修改原先的内容,改变文本信息";
/*传递标签名字，给标签添加内容，该标签无ID，也无class属性*/
var span = document.getElementsByTagName('span');
span[0].innerText("添加的文本信息");
/*通过className找对应元素*/
var c =document.getElementsByClassName('c');
for(var i = 0; i < c.length; i++){
c[i].innerText = "把它原先的内容去改变";
}
/*属性是成对出现，属性名+属性方法*/
document.getElementById("food").className = "fruit";
document.getElementById("food").style.color = "red";
document.getElementById("food").style.size = "20px";
}
</script>
<body>
<div id="d">
</div>
<a href="" name="abc">属性名字abc</a>
<span>
</span>
</body>