JavaScript 之 HTML DOM快速入门

摘自：www.w3school.com.cn

HTML DOM（文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型

通过可编程对象模型，JavaScript获得了足够的能力来创建动态的HTML。

• JavaScript 能够改变页面中所有的HTML元素
• JavaScript能够改变页面中所有的HTML属性
• JavaScript能够改变页面中所有的CSS样式
• JavaScript能够对页面中的所有事件作出反应

---

查找HTML元素

• 通过id找到HTML元素

  var x=document.getElementById(“intro”);

• 通过标签名找到HTML元素

  var x=document.getElementById(“main”);
  var y=x.getElementsByTagName(“p”);

• 通过类名找到HTML元素

---

如何改变HTML元素的内容（innerHTML）

document.write() 可直接向HTML输出流写内容
绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

---

修改HTML内容的最简单方法就是使用innerHTML：
document.getElementById(id).innerHTML=new HTML

---

改变HTML属性（例如img标签的src属性）
document.getElementById(id).attribute=new value

如何改变 HTML 元素的样式 (CSS)

改变HTML样式
document.getElementById(id).style.property=new style
HTML DOM Style对象参考手册

如何对 HTML DOM 事件对做出反应

当用户在点击某个元素时执行代码，请向一个HTML事件属性添加JavaScript代码：
οnclick=JavaScript
age：<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

使用HTML DOM 来分配事件

原理

先获取元素ID然后再通过onclick添加事件，即 分配事件

<script>
   document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

• onload 和 onunload 事件
• onload 和 onunload 事件会在用户进入或离开页面时被触发。
• onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
• onload 和 onunload 事件可用于处理 cookie。
• onchange 事件常结合对输入字段的验证来使用。
• onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
  HTML DOM Event 对象参考手册

如何添加或删除 HTML 元素

创建新的HTML元素

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

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

    var element=document.getElementById("div1");
    element.appendChild(para);
</script>

步骤

先创建标签:var para=document.createElement(“p”);

创建文本节点:var node=document.createTextNode(“这是新段落。”)； 为了向上一步的p标签添加内容

向节点追加这个文本:para.appendChild(node);

删除已有的HTML元素

如需删除 HTML 元素，您必须首先获得该元素的父元素：

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