DOM小基础知识

1.获取页面中的HTML元素
2.获取或改变页面中的HTML元素内容
3.获取或改变页面中的HTML属性
4.获取或改变页面中的CSS样式
5.为元素绑定事件
6.创建HTML元素
7.删除已有的HTML元素

通过id查找HTML元素(唯一)
var p=document.getElementById(‘unit’)
通过class查找HTML元素(不唯一)
var article=document.getElementByClass(‘shoppingInfo’)
通过标签名查找HTML元素(不唯一)
var h6=document.getElementByTagName(‘h6’)
二.获取或改变页面中的HTML元素内容
document.getElementById(id).innerHTML(获取)
document.getElementById(id).innerHTML=新的 HTML(改变)
三.获取或改变页面中的HTML元素属性
document.getElementById(id).src(获取)
document.getElementById(id).attribute=新属性值(改变)
四.获取或改变页面中的HTML元素样式
document.getElementById(id).style.property(获取)
document.getElementById(id).style.property=新样式
五.创建新的HTML元素

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
​
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
​
document.getElementById("div1").appendChild(para);
​
</script>

删除节点

div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

找到父节点
var parent=document.getElementById(“div1”);
找到要删除的节点
var child=document.getElementById(“p1”);
删除节点
parent.removeChild(child);