1.DOM 的4个基本接口
Document Node NodeList NamedNodeMap
2.DOM 基本对象
（1）Document 对象
（2）Node 对象
nodeType 属性返回节点的类型：Element（1）、Attr（2）、Text（3）、Comment（8）、Document（9）、DocumentFragment（11）
（3）NodeList 对象
（4）Elment 对象
（5）Attr 对象
3.判断文本是否空格的方法：
if(node.nodeType == 3 && !/\s/.test(node.nodeValue)){...}
4.DOM操作综合实例。
本案例中，要实现添加和删除分类信息，主要用到创建节点、插入节点、删除节点、设置元素节点属性等操作。运行效果及代码如下。
<script language="javascript" type="text/javascript">
var id = 0;
function addSort(){
var txtInput = document.getElementById("txt");
if(txtInput.value == ""){
alert("请输入分类名称！");
txtInput.focus();
return;
}
var row = document.createElement("tr");
var rowId = id;
row.setAttribute("id",rowId);
row.bgColor="#99FF99";
var cell = document.createElement("td");
cell.bgColor="#6699CC";
var txtNode = document.createTextNode(txtInput.value);
cell.appendChild(txtNode);
row.appendChild(cell);
var deleteButton = document.createElement("input");
deleteButton.setAttribute("type","button");
deleteButton.setAttribute("value","删 除");
deleteButton.onclick = function(){deleteSort(rowId)};
cell = document.createElement("td");
cell.appendChild(deleteButton);
row.appendChild(cell);
document.getElementById("sortList").appendChild(row);
txtInput.value = "";
id++;
}
function deleteSort(id){
if(null != id){
var rowToDelete = document.getElementById(id);
var sortList = document.getElementById("sortList");
sortList.removeChild(rowToDelete);
}
}
</script>
</head>
<body>
<table border="1" width="80%" align="center" bgColor="#99ccff">
<tbody>
<tr>
<td colspan="3" align="center"><b>分类管理</b></td>
</tr>
<tr>
<td>请输入分类名称：</td>
<td><input id="txt" type="text" size="40"/></td>
<td><input id="addBtn" type="button" value="添加" onclick="addSort()"/></td>
</tr>
<tr>
<td colspan="3" align="center"><b>已添加的分类</b></td>
</tr>
</tbody>
</table>
<table border="1" align="center" width="80%">
<tr height="30">
<td width="80%">分类名称</td>
<td>操作</td>
</tr>
<tbody id="sortList"></tbody>
</table>
</body>
</html>
相关推荐
**DOM基础** DOM，全称为Document Object Model，中文译为文档对象模型，是W3C组织制定的一个标准，用于表示XML或HTML文档的一种结构化表示方式。DOM将整个文档视为一个由节点组成的树形结构，其中每个节点代表文档...
标题《DOM基础》和描述《JavaScript DOM基础》表明这是一份关于JavaScript文档对象模型（Document Object Model，简称DOM）的入门级教学内容。DOM是编程语言中一个用于HTML和XML文档的API，它提供了一种方式，使得...
JvavScript之dom基础（源代码）JvavScript之dom基础（源代码）JvavScript之dom基础（源代码）JvavScript之dom基础（源代码）JvavScript之dom基础（源代码）JvavScript之dom基础（源代码）JvavScript之dom基础（源...
DOM 首页 DOM 简介 DOM 节点 DOM 节点树 DOM 节点访问 DOM 节点信息 DOM How To DOM 参考 DOM 总结 DOM 实例 DOM 实例 DOM 对象 DOM Window DOM Navigator DOM Screen DOM History DOM Location DOM ...
DOM基础学习主要包括以下几个方面： 1. **DOM结构**：DOM将HTML文档解析为一棵由节点组成的树，其中每个元素、属性和文本都对应一个节点。根节点是`<html>`，下面包含`<head>`和`<body>`两个子节点。元素节点有子...
这个“XML DOM基础教程”显然是为了帮助初学者理解和掌握XML与DOM的核心概念。 XML的主要用途是存储和传输结构化数据。它与HTML不同，HTML主要用于显示数据，而XML则专注于数据的结构和意义。XML文档由一系列元素...
文档对象模型（DOM，Document Object Model）是Web开发...以上是DOM基础中涉及到的关键知识点，它们构成了网页动态交互和内容管理的基础。通过深入理解和应用这些知识点，可以有效地控制网页元素的动态行为和样式表现。
总的来说，DOM基础是JavaScript中进行动态网页开发的关键技能，通过熟练掌握DOM节点的操作和元素属性的控制，开发者可以实现丰富的交互效果和动态内容更新，提升用户体验。对于想要深入学习JavaScript和Web开发的人...
【DOM基础】 DOM，全称为Document Object Model，是一种基于标准的、与语言无关的、平台无关的接口，用于访问和操作HTML、XML文档。它将网页内容抽象为一棵树形结构，允许开发者通过JavaScript或其他编程语言来遍历...
**Ajax完全自学手册-DOM基础及高级DOM技术** 在Web开发中，DOM（Document Object Model）扮演着核心角色，它是HTML和XML文档的结构化表示，允许编程语言与页面内容进行交互。本手册深入浅出地讲解了DOM的基础概念...
**DOM基础** DOM，全称为Document Object Model，是HTML和XML文档的标准模型。它提供了一个结构化的表示方式，使得程序可以方便地访问和操作文档内容、结构以及样式。DOM将HTML或XML文档解析为一个由节点组成的树形...
### DOM基础和基本API知识点详解 #### 一、什么是DOM？ DOM（Document Object Model）是一种文档对象模型，它是W3C组织推荐的标准之一，用于表示和处理结构化的文档（如HTML或XML）。DOM提供了一种方式，使得程序...
这篇学习笔记主要围绕DOM基础展开，涵盖了JavaScript操作DOM的各种方法和技术。 在JavaScript中，DOM被视为一个树形结构，其中每个节点代表了页面上的一个元素、属性或文本。DOM的基础主要包括以下几个方面： 1. *...
XML&DOM基础教程.CHM
文档对象模型（DOM，Document Object Model）是一个跨平台和语言独立的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM将HTML或XML文档表示为树结构，每个节点代表文档中的一个部分（例如一个...
DOM Day 3的学习重点可能涵盖DOM的基本概念、操作DOM节点、事件处理以及DOM遍历等方面。 一、DOM基本概念 DOM是“文档对象模型”的缩写，它将HTML或XML文档解析为一个由节点组成的树形结构。每个节点代表文档的一...
在给定的文件内容中，我们看到了对JavaScript基础操作的介绍，特别是在DOM操作方面的实例小结。 ### 一、子节点 在DOM中，每个节点可以有零个或多个子节点。子节点包括元素节点、文本节点等。通过`childNodes`属性...
1. **DOM基础**：解释DOM是什么，它是如何工作的，以及它在Web开发中的角色。 2. **节点与节点类型**：包括元素节点、属性节点、文本节点等，以及它们之间的关系和遍历方法。 3. **选择节点**：如何使用`...
每个元素、属性、文本等都是一个节点，通过DOM API，我们可以对这些节点进行操作，实现对XML文档的增删改查。在PHP中，DOM扩展提供了DOMDocument和DOMElement等类，使得我们可以方便地处理XML数据。 在上述文档中，...