JavaScript HTML DOM

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);