HTML DOM详细知识

清疚 2022-05-21 23:54 228阅读 0赞

1：节点

HTML DOM中，所有的事物都是节点。

整个文档是一个文档节点；

每个HTML元素是一个元素节点；

每个元素内的文本是一个文本节点；

每个属性是一个属性节点；

每个注释是一个注释节点；

2：方法

首先理解“编程接口”的概念：我们可以通过编程语言（如javaScript）对HTML DOM进行访问，这里把HTML元素视为对象，编程接口就是对象的方法和属性。通过方法和属性来对对象进行操作。

HTML DOM方法是可以在节点上执行的动作。

常用的HTML DOM方法：

getElementById(id)：获取带有指定id的节点（元素）；

getElementsByTagName(tagName)：获取包含指定标签名称的所有元素的节点列表（集合、数组）；

getElementsByClassName(className)：获取包含指定类名的所有元素的节点列表（集合、数组）；

appendChild(node)：插入新的子节点；

removeChild(node)：删除子节点；

[点击查看更多][Link 1]

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 οnclick="displayDate()">点我</button>    //向botton属性分配了onclick事件。

使用HTML DOM来分配事件：如：

document.getElementById("p1").οnclick=function(){displayDate()};

onload和onunload事件：当用户进入和离开页面时，会触发onload和onunload事件。它们可用于检查浏览器类型、处理cookies。

onchange时间：常用于输入字段的验证。当焦点离开时会触发。如：

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的元素的第一个子元素的值

[相关参考手册][Link 2]

[Link 1]: http://www.runoob.com/htmldom/htmldom-methods.html
[Link 2]: http://www.runoob.com/jsref/jsref-tutorial.html