思维导图
HTML DOM 简介
HTML 文档对象模型(HTML Document Object Model)定义了访问和处理 HTML 文档的标准方法。
在继续学习之前,您需要对下面的知识有基本的了解:
HTML / XHTML
JavaScript
什么是 DOM?
通过 JavaScript,您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。
要改变页面的某个东西,JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。
这个入口,连同对 HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。
在 1998 年,W3C 发布了第一级的 DOM 规范。这个规范允许访问和操作 HTML 页面中的每一个单独的元素。
所有的浏览器都执行了这个标准,因此,DOM 的兼容性问题也几乎难觅踪影了。
DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。
DOM 被分为不同的部分(核心、XML及HTML)和级别(DOM Level 1/2/3):
Core DOM
定义了一套标准的针对任何结构化文档的对象
XML DOM
定义了一套标准的针对 XML 文档的对象
HTML DOM
定义了一套标准的针对 HTML 文档的对象。
* DHTML:是很多技术的简称
** html: 封装数据
** css:使用属性和属性值设置样式
** dom:操作html文档(标记型文档)
** javascript:专门指的是js的语法语句(ECMAScript)
HTML DOM 节点
HTML文档中的每个成分都是一个节点。
节点(Node)
根据DOM,HTML文档中的每个成分都是一个节点。
DOM 是这样规定的:
1、整个文档是一个文档节点 (Document)
2、每个 HTML 标签是一个元素节点 (Element)
3、包含在 HTML 元素中的文本是文本节点
4、每一个 HTML 属性是一个属性节点
5、注释属于注释节点
Node 层次
节点彼此都有等级关系。
HTML 文档中的所有节点组成了一个文档树(或节点树)。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。
树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。
下面这个图片表示一个文档树(节点树):
HTML DOM 访问节点
通过 DOM,您可访问 HTML 文档中的每个节点。
查找并访问节点
你可通过若干种方法来查找您希望操作的元素:
通过使用 getElementById() 和 getElementsByTagName() 方法
通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性
* getElementById() 和 getElementsByTagName() 这两种方法,可查找整个 HTML 文档中的任何 HTML 元素。
这两种方法会忽略文档的结构。假如您希望查找文档中所有的 <p> 元素,
getElementsByTagName() 会把它们全部找到,不管 <p> 元素处于文档中的哪个层次。
同时,getElementById() 方法也会返回正确的元素,不论它被隐藏在文档结构中的什么位置。
节点列表(nodeList)
parentNode、firstChild以及lastChild
这三个属性 parentNode、firstChild 以及 lastChild 可遵循文档的结构,在文档中进行“短距离的旅行”。
请看下面这个 HTML 片段:
<table>
<tr>
<td>John</td>
<td>Doe</td>
<td>Alaska</td>
</tr>
</table>
在上面的HTML代码中,第一个 <td> 是 <tr> 元素的首个子元素(firstChild),
而最后一个 <td> 是 <tr>元素的最后一个子元素(lastChild)。
此外,<tr> 是每个 <td>元 素的父节点(parentNode)。
对 firstChild 属性最普遍的用法是访问某个元素的文本:
var x=[a paragraph];
var text=x.firstChild.nodeValue;
parentNode 属性常被用来改变文档的结构。假设您希望从文档中删除带有 id 为 "maindiv" 的节点:
var x=document.getElementById("maindiv");
x.parentNode.removeChild(x);
首先,您需要找到带有指定 id 的节点,然后移至其父节点并执行 removeChild() 方法。
根节点
有两种特殊的文档属性可用来访问根节点:
document.documentElement
document.body
第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。
第二个属性是对 HTML 页面的特殊扩展,提供了对 <body> 标签的直接访问。
HTML DOM 节点信息
nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。
节点信息
每个节点都拥有包含着关于节点某些信息的属性。这些属性是:
nodeType(节点类型)
nodeName(节点名称)
nodeValue(节点值)
========================
nodeType 属性可返回节点的类型。
元素类型 节点类型
元素 1
属性 2
文本 3
nodeName 属性含有某个节点的名称。
元素节点的 nodeName 是标签名称,如 input, div, img ...
属性节点的 nodeName 是属性名称, 如 id, name, src ...
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
注释:nodeName 所包含的 XML 元素的标签名称永远是大写的
nodeValue
nodeValue 属性对于 元素节点 和 文档节点 是不可用的。
对于属性节点,nodeValue 属性包含属性值。
对于文本节点,nodeValue 属性包含文本。
实际应用
1、Document对象
Document创建标签.
createElement(); -----创建一个元素标签
createTextNode(); -----创建一个文本节点
node对象.appendChild(node);
案例:
<BODY>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</BODY>
<SCRIPT LANGUAGE="JavaScript">
// 需求:创建一个<li>深圳</li> 将其放在ul中
// 1.创建li标签 <li></li>
var liElement = document.createElement("li");
// 2.创建一个文本节点 深圳
var textElement = document.createTextNode("深圳");
// 3.将文本内容添加到li中 <li>深圳</li>
liElement.appendChild(textElement);
// 4.将li添加到ul中.(查找ul.)
var city = document.getElementById("city");
city.appendChild(liElement);
</SCRIPT>
write()方法:
向页面输出变量(值)
向页面输出html代码
2、Element对象(了解)
** 如何获取标签的子标签(唯一有效办法)(*********)
- 使用getElementsByTagName方法
元素对象:元素(标签)
元素对象操作属性
getAttribute(“属性的名”); // 获得属性的值
setAttribute(“属性名”,”属性值”); // 添加和修改,(value值设置不了)
removeAttribute(“属性名”); // 移除属性
案例:操作元素的属性
// 操作属性 (对属性进行增加 修改 删除)
3、Node对象(了解)
节点对象的属性:父节点 子节点及同辈节点
parentNode
节点的插入
appendChild(); 剪切粘贴的效果
insertBefore(newNode,oldNode);
删除和替换节点.
removeChild() //必须是 父节点.removeChild(子节点)
replaceChild(newNode,oldNode)
复制节点
cloneNode(boolean); boolean:true 克隆的时候 带着子节点一起克隆;
false 只克隆当前节点,默认false