2018-06-19 js DOM对象
DOM对象：
Doucument Object Model即文档对象
DOM对象的操作：
1.找元素 返回元素对象；
var obj=document.getElementById();//通过Id查找元素
document.getElementsByName();//通过name属性值查找元素对象集合
document.getElementsByTagName();//通过标签名查找元素对象集合
document.getElementsByClassName();//通过类名查找元素对象集合
后三者返回的是对象集合数组；操作元素对象时需要指定对象数组中的对象；
2.操作元素内容
非表单元素：obj.innerHTML="值";
表单元素：obj.value="值";
3.操作元素属性
标准属性
直接用<.属性>即可
obj.id
onj.className
obj.title
obj.style
obj.method
obj.action
……
非标准属性
obj.setAttribute(' 属性名称 ' , ' 值 ');
obj.getAttribute('属性名称');
此方法也可以适用标准属性
标签的js属性
obj.tagName->获取标签名
obj.innerHTMl->获取标签内部的内容
obj.outerHTML->获取本标签的所有内容（包括本标签）
obj.textContent->获取本标签内的文本内容
4.操作元素样式
obj.style.color="颜色";
5.操作元素事件
obj.onclick = function(){}
obj.addEventListener('click',f1);//obj对象被点击时执行方法f1
6.创建删除元素
obj.remove();//删除obj对象；
var tr = doucument.createElement("tr");//创建tr标签 对象
tab.appendChild(tr);//将创建的tr标签对象追加到tab对象中
7.增加删除元素小实例
<body>
<button onclick='add()'>点击增加一行</button>
<hr>
<table id='tab' border='1' >
<tr>
<td >
aaa
</td>
</tr>
</table>
</body>
<script>
function add(){
tab = document.getElementById('tab');
tr = document.createElement('tr');
td = document.createElement('td');
td.innerHTML = "<button onclick='removetd(this)'>点我消失</button>";
tr.appendChild(td);
tab.appendChild(tr);
}
function removetd(obj){
obj.parentNode.parentNode.style.display = "none";
}
</script>
http://www.w3school.com.cn/jsref/dom_obj_all.asp
