HTML DOM学习总结

来源：互联网发布：杭州行知小学分校编辑：程序博客网时间：2024/06/06 04:29

什么是HTML DOM

HTML DOM（针对html文档的标准模型）。大家应该熟知html里面的内容是以“开闭合标签”来组织的：

<html>                 <!--html标签--><head>                       <!--head标签--><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><!--head标签结束--><body><!--body标签--><div>Hello</div></body> <!--body标签结束--></html> <!--html标签结束-->

从上面可以看出：第零层：html这个文件（document）包含html这个标签；第一层：html包含head，body；第二层：head包含meta，title；body包含div；第三层：title包含“无标题文档”文本，div包含“hello“文本；形成一种树的形式：

整个html文件由此可以理解为一棵节点树。

它把html文档的内容分为五类，“文档节点（document）”，“元素节点（element）”，“属性节点（attribute）”，“文本节点（text）”，“注释节点（note）”。

说明：html文件就是属于文档节点；html，head，body等这些有”<>“的标签属于元素标签；div标签里面可以使用width，height这些属性设置宽高，这些属性及它们的值就是属性节点；上面的例子中div标签中间的”hello“就是属于文本节点；上面例子中的注释属于注释节点；

这些节点层层包含，最终汇聚于一个节点（html文件，文档节点（document））。通过遍历我们可以找到文档中的任何一个节点，这就为我们操作html文档创造了条件。

注意：上述代码中body标签后直接换行后，接着写了<div>hello</div>,再次换行。这里body下的第一个子节点是文本节点（换行或者空格也属于文本节点），而不是div，同理body下的最后一个节点也不是div，而是文本节点。

如何操作HTML

把html文件理解为一个html对象（document），那么就会有对象方法，和对象属性。

方法是您能够执行的动作（比如添加或修改元素）。

属性是您能够获取或设置的值（比如节点的名称或内容）。

这里有一些常用的方法和属性：

方法：

getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）

属性：

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
firstChild - 节点（元素）的第一个子节点
lastChild- 节点（元素）的最后一个子节点

一般情况下，我们操作这些东西需要一个编程接口，而上面的方法和属性就是这个编程接口，它们可以在Javascript代码里面调用。

要操作这些东西，我们首先要找到它们。怎么找到它们？

HTML DOM提供的方法里面有几个可以帮助我们访问它们：

getElementById(id) 通过标签的id属性值获取到该节点；

getElementsByTagName(tagName) 通过标签名称获取一组节点；

getElementsByClassName(className) 通过标签的类名获取一组节点；//这个方法在IE9之前不支持。

我们能做哪些操作呢？

改变 HTML 内容
改变 CSS 样式
改变 HTML 属性
创建新的 HTML 元素
删除已有的 HTML 元素
改变事件（处理程序）

改变HTML内容举例（一般通过innerHTML改变文本节点内容）：

<span style="color:#ff9900;"><strong><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script>function changeText(){var pItem=document.getElementById("pItem");pItem.innerHTML="我很好啊！";}</script></head><body><p id="pItem">你好吗？</p><button onclick="changeText()">更改文本</button></body></html></strong></span>

改变CSS样式（先找到元素节点，再找到style属性节点，并更改其内容）：

<strong><span style="color:#ff9900;"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script>function changeStyle(){var pItem=document.getElementById("pItem");pItem.style.color="red";pItem.style.fontSize="20px";}</script></head><body><p id="pItem">你好吗？</p><button onclick="changeStyle()">更改文本</button></body></html></span></strong>

改变html属性（访问属性节点，并重新赋值）：

<strong><span style="color:#ff9900;"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script>function changeWidth(){var pItem=document.getElementById("show");pItem.width="100px";}</script></head><body><div id="show" width="150px" height="50px"></div><button onclick="changeWidth()">改变宽度</button></body></html></span></strong>

创建新的html元素（使用createElement()方法创建，使用createTextNode创建文本节点，使用appendChild()方法插入节点）：

<strong><span style="color:#ff9900;"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script>function addPara(){var oDiv=document.getElementById("container");var para=document.createElement("p");var text=document.createTextNode("第四个段落");para.appendChild(text);oDiv.appendChild(para);}</script></head><body><div id="container"><p>第一个段落</p><p>第二个段落</p><p>第三个段落</p></div><button onclick="addPara()">添加段落</button></body></html></span></strong>

删除已有的html元素（removeChild（））：

<strong><span style="color:#ff9900;"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script>function deletePara(){var deletedpara=document.getElementById("junk");var parent=deletedpara.parentNode;parent.removeChild(deletedpara)}</script></head><body><div id="container"><p>第一个段落</p><p id="junk">第二个段落</p><p>第三个段落</p></div><button onclick="deletePara()">删除段落</button></body></html></span></strong>

还有替换元素（replaceChild（para，child），para替换child；由父元素调用执行）。

增删节点的操作都和父元素有关。

HTML DOM的目的在于易于操作html，增强网页的动态交互性！

就写到这里了！还不明白的家伙请查看以下链接：

HTML DOM 教程

0 0