-
JS DOM--document object model 文档对象模型 将网页的元素构成一个有层次节点的文档。
1.DOM的属性：
childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。
children：获取作为对象直接后代的 DHTML 对象的集合
firstChild : 返回第一个子节点
lastChild : 返回最后一个子节点
nextSibling :获取该节点的下一个同级节点对象
previousSibling :获取该节点的上一个同级节点对象
Elements :获取表单对象的下所有表单元素
ALL :所有的HTML元素节点[直接与间接节点]
2.DOM的方法
setAttribute(key,value)--给节点的某个属性设值 也可以直接设置 标签.type=""等
createElement(element) ：创建一个指定标签名创建一个新的元素节点，返回值为指向新建元素节点的引用指针
appendChild(node) ：插入节点（往节点内部）
removeChild(node) ：将从一个给定元素利删除一个子节点，返回一个指向已被删除的子节点的引用指针。
getElementById():寻找一个有着给定id属性值的元素，返回一个元素节点
getElementsByTagName()通过标签名获取元素
getElementsByClassName()通过类名获取元素
3.节点通用属性：
nodeName 返回节点名称（大写）
nodeType 返回节点类型
nodeValue 返回节点值
-
history学习
history是用来封装访问页面历史记录（地址）
history.back() :回退一个页面，相当于浏览上的回退按钮
history.forward() ：前进以一个页面，相当于浏览器的前进按钮
history.go():传一个整数位参数
1.正整数--向前跳指定页面个数
2.负整数--向后跳指定的页面个数
-
Location对象的学习：
location--浏览器地址
reload--刷新页面
参数：true---缓存
assin--加载新的文档
-
下面代码实现动态为表格填删除行，用节点方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script type="text/javascript">
/**
* 实现动态为表格删除新增行
*/
function addNewClow(){
var new_tr=document.createElement("tr");
var new_td1=document.createElement("input");
new_td1.value="输入试试";
new_td1.type="text";
var new_td2=document.createElement("input");
new_td2.value="删除";
new_td2.type="button";
new_td2.onclick=function(){
document.getElementById("tb_1").removeChild(new_tr);
}
new_tr.appendChild(new_td1);
new_tr.appendChild(new_td2);
document.getElementById("tb_1").appendChild(new_tr);
}
function addNewClow2(){
}
</script>
</head>
<body>
<table border="red 2px solid" width="400px" height="100px" id="tb_1">
<tr>
<td>文本值</td>
<td><input type="button" name="" id="add_new" value="新增1" onclick="addNewClow()" />
<input type="button" name="" id="add_new2" value="新增2" onclick="addNewClow2()" />
</td>
</tr>
</table>
</body>
</html>
效果图：
