why
通过HTML DOM,可访问JavaScript HTML文档所有元素
what
how
JavaScript可以对HTML元素、属性、CSS样式以及所有事件做出反应
step1:找到元素:
- 通过ID:var x=document.getElementById(“intro”);
- 通过标签:
Var y=document.getElementByTagName(“p”);//所有的P元素
step2:改变内容
- 改变HTML内容:
改变输出流:document.write();
改变内容:document.getElementById(“id”).innerHTML=new HTML
改变属性:document.getElementById(“id”).attribute=new value; - 改变CSS:
document.getElementById(id).style.property=new style;
step3:事件响应
- 事件类型:onclick,onload,onunload,onchange,onmouseover,onmouseout,onmousedown,onmouseup
- 为HTML元素分配事件:
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>//方式一:直接写JavaScript语句来响应
<button onclick="displayDate()">点击这里</button>//方式二:为事件分配函数
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>//方式三:通过插入脚本来分配事件
else
DOM节点:
- 创建节点:
首先创建HTML元素,然后追加给父元素
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
- 删除节点:
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
简单删除节点的办法可以用parentNode属性:var child=document.getElementById(“p1”);
child.parentNode.removeChild(child);