DOM学习

结构访问和修改HTML元素事件 为了学习D３，粗略的学习一下DOM。 DOM，（Document　Object　Model）文档对象模型，是针对结构化文档的接口，运行脚本动态的访问并修改文档。（也就是可以动态的修改网页元素）

结构

DOM以树形结构来描述HTML文档，称为节点树。

访问和修改HTML元素

DOM的文档对象都保存在document中，调用其属性和方法，即可访问HTML文档中的元素：

document.getElementById("test1"); //返回第一个Id为test1的元素 document.getElementsByClassName("test2"); //返回所有test2的类 document.getElementsByTagName("p"); //返回所有标签为 p 的元素

举例说明其用法：

<p>one</p> <p>two</p> <script> var test = document.getElementsByTagName("p"); test[0].innerHTML = "123"; for (var i = 0; i < test.length; i++){ console.log(test[i].innerHTML); } </script>

上述代码使用getElementsByTagName获取了文档中所有标签为p的元素，返回值保存在test中。test是一个数组，保存了所有的p节点。最后结果是控制台输出123和two这里使用了innerHTML属性，这个属性可以被赋值，赋值后web界面显示也被改变为赋值后的内容。 HTML DOM中常用的属性有以下几种：

innerHTML：元素标签内部的文本（包括HTML标签）。innerText：元素标签内部的文本（不包括HTML标签）。outerHTML：包括元素标签自身在内的文本（包括HTML标签）。parentNode：父节点。childNodes：字节点。style：元素的样式。 <p>one</p> <p>two</p> <script> var test = document.getElementsByTagName("p"); for (var i = 0; i < test.length; i++){ console.log(test[i].innerHTML); // one/two console.log(test[i].innerText); // one/two console.log(test[i].outerHTML); // <p>one</p> / <p>two</p> test[i].style.color = "red"; } </script>

上述代码使Web显示红色的one和two。

事件

HTML DOM可以通过事件与用户进行交互，如鼠标单击、鼠标移入等。 举例：

<p id="test">one</p> <script> var test = document.getElementById("test"); test.onclick = function () { this.innerHTML = "change"; } </script>

上述代码为id为test的元素添加了一个onclick事件.当用户点击该元素时,段落文字被改编为"two"。 常用事件有：

onload：页面（或图片）加载完成时。onclick：鼠标单击。ondblclick：鼠标双击。onmousedown：鼠标按钮按下。onmouseup：鼠标按钮松开。onmousemove:鼠标光标移动。onmouseover：鼠标光标移动到某元素上。onmouseout：鼠标光标从元素上移开。onkeydown：键盘某个按键按下。onkeyup：键盘某个按键松开。onkeypress：键盘某个按键按下并松开。