1：DOM（Document Object Model）的概念和作用
document对象是DOM核心对象：对html中的内容，属性，样式进行操作。
节点树中节点之间的关系：父子，兄弟。
2：DOM常用属性
title：返回或设置当前文档的标题。
console.log(document.title); //打印网页标题—读
document.title="hello world"; //更改网页标题—写
all：返回所有元素的集合。
console.log(document.all);//输出网页的所有元素
forms：返回对文档中所有form对象的引用。
console.log(document.forms['formone'])
通过集合来访问相应的对象：
1.通过下标的形式。
2.通过name形式。
3：DOM查询方法
1.getElementById(id)：返回拥有指定id的（第一个）对象的引用。
console.log(document.getElementById('box'))
2.getElementsByTagName(tagName)：返回有指定标签名的对象集合。
console.log(document.getElementsByTagName('div'));
注：上面两个方法没有兼容性问题。
3.getElementsByName(name)：返回带有指定name指定名称的对象的集合。有兼容性问题。
console.log(document.getElementsByName('form1').length);
在IE9及其以下，如果该对象的标准属性包含有name,（比如说input，在input中name是input的默认属性，所以可以正常使用，但是在div中name并不是div的默认属性，所以不能正常显示），那么可以正确的使用。否则不可以使用。在火狐中，该方法可以适用于任何情况。
结论： getElementsByName(name)主要是适用于表单。
4.write：输出内容到页面。（注：网页加载完成后进行输出，则覆盖整个网页，使用时需注意）
document.write('下雪啦！');
5.getElementsByClassName()：返回带有指定className指定名称的对象的集合。有兼容性问题，适用于火狐浏览器，在IE浏览器中不可用（IE8及以下不可用）。
console.log(document.getElementsByClassName('pink'))
封装获取className值的DOM节点的兼容性的函数。
// 通过class名获取元素集合
function byClassName(sClassName) {
if(document.getElementsByClassName) {
return document.getElementsByClassName(sClassName);
} else {
// 获取所有的元素
var allTags = document.getElementsByTagName('*');
var result = [];
for(var i = 0; i < allTags.length; i++) {
if(allTags[i].className == sClassName) {
result.push(allTags[i]);
}
}
return result;
}
}
console.log(byClassName('pink').length)
4：操作内容
1.innerHTML：用来设置或获取对象起始和结束标签内（例如div框架，它只会获取div里面的内容，而不会获取div）的内容(识别html标签) 。
console.log(oBox.innerHTML);//输出内部的标签及文字
oBox.innerHTML = '<i>我是测试数据</i>'; //文字倾斜，不显示标签
2.innerText：用来设置或获取对象起始和结束标签内的内容 (只是获取文字内容)(适用于IE，最新版火狐已支持)。
textContent用来设置或获取对象起始和结束标签内的内容 (只是获取文字内容)(适用于火狐，IE8及其以下不支持)。
console.log(oBox.innerText); //只输出文字
oBox.innerText = '<i>我是测试数据</i>'; //文字不倾斜，标签当文字输出
3.outerHTML 用来设置或获取包括本对象在内的起始和结束标签内（例如div框架，不仅会获取div里面的内容，也会获取div自身的内容）的内容(识别html标签) 。
4.outerText 用来设置或获取包括本对象在内的起始和结束标签内的内容(只是获取文字内容)（火狐不支持）。
// 写入的区别
oBox.outerHTML = '<i>测试数据</i>';
oBox.outerText = '<i>测试数据</i>';
//outerHTML 替换该标签插入html标签i文字发生倾斜
//outerText 替换该标签插入文字不发生倾斜标签当文字处理
5：操作属性
1.直接操作
对象.属性。 // 获取属性。某些属性有兼容性问题，例如name（如果不是标签特有的属性，在chrome/firfox访问不到，在IE8及其以下浏览器能获取的到）。
对象.属性=值 // 设置、添加属性(属性值)。
//通过属性的方式操作读写
oBox.id = 'snow';
oBox.age = '24';
console.log(oBox.id);
console.log(oBox.age);
2.通过方法
getAttribute(“属性”)。
console.log(oBox.getAttribute('id'));
console.log(oBox.getAttribute('age'));
setAttribute(“属性”,“值”)。
Box.setAttribute('id', 'snow');
oBox.setAttribute('age', 24);
removeAttribute(“属性”)。
// 删除属性
oBox.removeAttribute('color');
6：操作样式
1.行内样式
对象.style.属性 // 获取样式属性
// 只能读取行内样式
console.log(oBox.style.width)
console.log(oBox.style.height)
console.log(oBox.style.color)
console.log(oBox.style.backgroundColor)
对象.style.属性=值 // 设置、添加样式属性。
// 只能设置行内样式
oBox.style.width = '400px';
oBox.style.backgroundColor = 'blue';
注： 遇到属性是“-”链接的，要将“-”去掉，后面的单词的首字母大写，采用驼峰式命名的方法进行书写。
2.行内样式和css层叠样式通用的方式
对象.currentStyle.属性 IE 用来获得实际的样式属性。
getComputedStyle((对象,null).属性) 火狐 用来获得实际的样式属性。
注：只能获取不能设置。
封装获取样式通用方式：
// 获取元素样式值
function getStyle(obj, attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
console.log(getStyle(oBox, 'width'));
7：DOM增删改
一：创建节点（注释和文档节点一般不需要创建）
1：创建元素节点
document.createElement("元素标签名");
2：创建属性节点
var oAttr = document.createAttribute(“属性名”);（不常用）
oAttr.value = "attr-name";
oDiv.setAttributeNode(oAttr);
对象.属性=属性值;（常用）
3：创建文本节点
对象.innerHTML = "";
var oText = document.createTextNode(“文本”); // 文本中的HTML标签实体化
oDiv.appendChild(oText);
二：追加到页面当中
父对象.appendChild(newNode) // 插入到父对象最后。
父对象.insertBefore(newNode, existsNode) // 插入到什么对象之前。
三：修改(替换)节点
父对象.replaceChild(newNode,existsNode); // 前面的替换后面的
四：删除节点
父对象.removeChild(oldNode);
如果确定要删除节点，最好也清空内存 对象=null;
五：表格操作
table.tBodies[0].rows[0].cells[0].innerHTML;
var oNewRow = table.insertRow(“行位置”);
oNewRow.insertCell(“列位置”);
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态操作表格</title>
<script type="text/javascript">
//封装$函数方便后续的使用
function $(id) {
return document.getElementById(id)
}
window.onload=function() {
var tBody=($("testtable")).tBodies[0];
var deleteBtn=document.getElementsByClassName('adelete');
console.log(deleteBtn)
binddelete();
function binddelete(){
for(var i = 0; i < deleteBtn.length; i++) {
deleteBtn[i].onclick=function() {
tBody.removeChild(this.parentNode.parentNode);
}
}
}
($("addCreateTable")).onclick=function() {
var orderNum=parseInt(tBody.rows[tBody.rows.length-1].cells[0].innerText) + 1;
if (!orderNum) {orderNum=1;}
//以上代码不要注释
//通过创建元素的方式动态创建表格（可注释的区域查看另一种方法）
/* var newtd1=document.createElement('td');
var newtd2=document.createElement('td');
var newtd3=document.createElement('td');
var newtd4=document.createElement('td');
newtd1.innerHTML=orderNum;
newtd2.innerHTML="location.hash";
newtd3.innerHTML="获取锚点";
newtd4.innerHTML="<a class='adelete' href='javascript:;'>删除</a>";
var newtr=document.createElement('tr');
newtr.appendChild(newtd1);
newtr.appendChild(newtd2);
newtr.appendChild(newtd3);
newtr.appendChild(newtd4);
tBody.appendChild(newtr);*/
//通过表格方法动态创建表格（可注释的区域查看另一种方法）
var newRow=tBody.insertRow(tBody.rows.length);
var newCell=newRow.insertCell(tBody.lastChild.cells.length);
newCell.innerHTML=orderNum;
var newCell=newRow.insertCell(tBody.lastChild.cells.length);
newCell.innerHTML=2;
var newCell=newRow.insertCell(tBody.lastChild.cells.length);
newCell.innerHTML=3;
var newCell=newRow.insertCell(tBody.lastChild.cells.length);
newCell.innerHTML="<a class='adelete' href='javascript:;'>删除</a>";
binddelete();
};
}
</script>
</head>
<body>
<table id = "testtable">
<tr>
<td>序号</td>
<td>属性</td>
<td>属性值</td>
<td>操作</td>
</tr>
<tr>
<td colspan="4" style="text-align: center;">
<a href="javascript:;" >
增加一行三列
</a>
</td>
</tr>
<tr>
<td>1</td>
<td>location.href</td>
<td>指向网页的链接地址</td>
<td><a class="adelete" href="javascript:;">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>location.search</td>
<td>指向网页的链接地址</td>
<td><a class="adelete" href="javascript:;">删除</a></td>
</tr>
</table>
</body>
</html>