JS DOM 基础
2013-12-24 15:24
302 查看
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操作综合实例。
本案例中,要实现添加和删除分类信息,主要用到创建节点、插入节点、删除节点、设置元素节点属性等操作。运行效果及代码如下。
按 Ctrl+C 复制代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>domdemo</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<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>
按 Ctrl+C 复制代码
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操作综合实例。
本案例中,要实现添加和删除分类信息,主要用到创建节点、插入节点、删除节点、设置元素节点属性等操作。运行效果及代码如下。
按 Ctrl+C 复制代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>domdemo</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<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>
按 Ctrl+C 复制代码
相关文章推荐
- OpenGL基础之基本图元
- 性能测试调整基础
- shell基础收集
- 红皮书c#高级编程(第6版)_第2章_c#基础_命名空间
- 培训实习生-----面向对象基础
- Android UI开发专题(二) 之绘图基础
- js dom
- 有关View的几个基础知识点-IOS开发
- sql基础
- JAVA基础语法(八)
- 黑马程序员--Java基础加强(一)
- QML基础——UI布局管理
- java基础<IO输出与输入>--->IO流<字符流>
- 【Python】读书笔记,基础函数
- Hive优化----基础知识以及效率的优化
- 【Heritrix基础教程之2】Heritrix基本内容介绍
- 3.JavaWeb基础 Scriptlet
- 黑马程序员——OC基础—核心语法(上)
- Jvm基础(2)-Java内存模型
- linux基础:1、Centos系统安装