1:节点
HTML DOM中,所有的事物都是节点。
整个文档是一个文档节点;
每个HTML元素是一个元素节点;
每个元素内的文本是一个文本节点;
每个属性是一个属性节点;
每个注释是一个注释节点;
2:方法
首先理解“编程接口”的概念:我们可以通过编程语言(如javaScript)对HTML DOM进行访问,这里把HTML元素视为对象,编程接口就是对象的方法和属性。通过方法和属性来对对象进行操作。
HTML DOM方法是可以在节点上执行的动作。
常用的HTML DOM方法:
getElementById(id):获取带有指定id的节点(元素);
getElementsByTagName(tagName):获取包含指定标签名称的所有元素的节点列表(集合、数组);
getElementsByClassName(className):获取包含指定类名的所有元素的节点列表(集合、数组);
appendChild(node):插入新的子节点;
removeChild(node):删除子节点;
点击查看更多
3:属性
HTML DOM属性是节点上能够获取或设置的值。
innerHTML属性:获取元素内容,对于获取或替换HTML元素的内容很有用。
nodeName属性:规定节点的名称。它是只读的。元素节点的nodeName与标签名相同,属性节点的nodeName与属性名相同,文本节点的nodeName为#text,文档节点的nodeName为#document。
nodeValue属性:规定节点的值。元素节点的nodeValue为undefined或者null,文本节点的nodeValue为文本内容,属性节点的nodeValue为属性值。
nodeType属性:返回节点的类型,是只读的。元素节点的nodeType为1,属性节点的nodeType为2,文本节点的nodeType为3,注释节点的nodeType为8,文档节点的nodeType为9。
4:访问
访问节点也就是查找HTML的元素。
对HTML DOM节点的访问主要通过上文所说的方法来进行。
5:修改
修改HTML DOM意味着很多方面的内容,如:
该表HTML内容、改变CSS样式、改变HTML属性、创建新的HTML元素等等。
创建HTML内容:最简单的方式是使用innerHTML属性。如:
document.getEmlemntById("p1").innerHTML="新文本";
改变HMTL样式:如:
document.getElementById("p1").style.color="red";
document.getElementById("p1").style.fontSize="larger";
创建新的HTML元素:需要先创建新节点,然后把它追加到已有的元素节点上。如:
var para = document.creatElement("p");
var node = document.creatTextNode("这是一个新段落");
para.appendChild(node);
document.getElementById("div1").appendChild(para);
6:事件
HTML DOM允许JavaScript对HTML事件做出反应。当事件发生时,可以执行JavaScript。比如用户点击某个元素时执行代码。
事件属性:使用事件属性来向元素分配事件。如:
<button onclick="displayDate()">点我</button> //向botton属性分配了onclick事件。
使用HTML DOM来分配事件:如:
document.getElementById("p1").onclick=function(){displayDate()};
onload和onunload事件:当用户进入和离开页面时,会触发onload和onunload事件。它们可用于检查浏览器类型、处理cookies。
onchange时间:常用于输入字段的验证。当焦点离开时会触发。如:
<input type="text" id="fname" onchange="upperCase()">
onmouseover和onmouseout事件:当鼠标指针移动到或离开元素时会触发。
onmousedowm、onmouseup及onclick事件:他们是一次鼠标点击的全部过程。当鼠标按钮被点击时,出发onmousedown,鼠标按钮松开时,触发nomouseup,最后鼠标点击完成,触发onclick。也就意味着,需要定义一次点击事件时,可以直接使用onclick。当需要点击和松开事件时,需要另外两个。
7:导航
在HTML DOM中通过节点关系来进行导航。
节点列表:节点列表是一个节点数组,通过下标可以访问相应的节点。与数组相似,通过length属性可以返回数组长度(节点个数)。
节点关系:可以使用三个节点属性,分别是:parentNode、firstChild及lastChild。
根属性:document.documentElement:全部文档; document.body:文档的主体。
childNodes和nodeValue:除了使用innerHTML,还可以使用childNodes和nodeValue属性来获取元素内容。如:
txt = document.getElementById("intro").childNodes[0].nodeValue; //获取id为intro的元素的第一个子元素的值