JS DOM 操作实现代码


Posted in Javascript onAugust 01, 2010

简单的表格:

<table> 
<tr> 
<td id="TEST"> 
<input type="submit" value="确定"> 
<input type="button" value="取消"> 
</td> 
</tr> 
</table>

经测试:
var td= document.getElementById("TEST"); 
alert(td.childNodes.length);结果为4

百思不得其解,阅读相关资料后,发现原来JS中,空格也是作为一个文本节点,而两个input元素后面都有空格
所以都作为一个文本节点,所以结果为4
删除空格后结果为2
为了处理里面的空格节点,用以下函数来处理
function cleanWhitespace(element) 
{ 
for(var i=0; i<element.childNodes.length; i++) 
{ 
var node = element.childNodes[i]; 
if(node.nodeType == 3 && !/\S/.test(node.nodeValue)) 
{ 
node.parentNode.removeChild(node); 
} 
} 
}

处理结点cleanWhitespace(document.getElementById("TEST"))后,OK,解决
另附:
DOM基本方法
一.直接引用结点
1.document.getElementById(id);
--在文档里面通过id来找结点
2.document.getElementByTagName(tagName);
--返回一个数组,包含对这些结点的引用
--如:document.getElementByTagName("span");将返回所有类型为span的结点
二.间接引用结点
3.element.childNodes
--返回element的所有子结点,可以用element.childNodes[i]的方式来调用
--element.firstChild=element.childNodes[0];
--element.lastChild=element.childNodes[element.childNonts.length-1];
4.element.parentNode
--引用父结点
5.element.nextSibling; //引用下一个兄弟结点
element.previousSibling; //引用上一个兄弟结点
三.获得结点信息
6.nodeName属性获得结点名称
--对于元素结点返回的是标记名称,如:<a herf><a>返回的是"a"
--对于属性结点返回的是属性名称,如:class="test" 返回的是test
--对于文本结点返回的是文本的内容
7.nodeType返回结点的类型
--元素结点返回1
--属性结点返回2
--文本结点返回3
8.nodeValue返回结点的值
--元素结点返回null
--属性结点返回undefined
--文本结点返回文本内容
9.hasChildNodes()判断是否有子结点
10.tagName属性返回元素的标记名称
--这个属性只有元素结点才有,等同于元素结点的nodeName属性
四.处理属性结点
11.每个属性结点都是元素结点的一个属性,可以通过(元素结点.属性名称)访问
12.利用setAttribute()方法给元素结点添加属性
--elementNode.setAttribute(attributeName,attributeValue);
--attributeName为属性的名称,attributeValue为属性的值
13.使用getAttribute()方法获得属性值
--elementNode.getAttribute(attributeName);
五.处理文本结点
14.innerHTML和innerText属性,这两个方法相信大家都很熟悉,不介绍了,值得注意的是无论是ie还是firefox都容易把空格、换行、制表符等当成文本结点。所有一般通过element.childNodes[i]引用文本结点的时候,一般要处理:
<script language"javaScript" type="text/javascript"> 
function cleanWhitespace(element) 
{ 
for(var i=0; i<element.childNotes.length; i++) 
{ 
var node = element.childNodes[i]; 
if(node.nodeType == 3 && !/\S/.test(node.nodeValue)) 
{ 
node.parentNode.removeChild(node); 
} 
} 
} 
</script>

六.改变文档的层次结构
15.document.createElement()方法创建元素结点
--如:document.createElement("Span");
16.document.createTextNode()方法创建文本结点
--如:document.createTextNode(" "); //注:他不会通过html编码,也就是说这里创建的不是空格,而是字符串 
17.使用appendChild()方法添加结点
--parentElement.appendChild(childElement);
18.使用insertBefore()方法插入子节点
--parentNode.insertBefore(newNode,referenceNode);
--newNode为插入的节点,referenceNode为将插入的节点插入到这之前
19.使用replaceChild方法取代子结点
--parentNode.replaceChild(newNode,oldNode);
--注:oldNode必须是parentNode的子结点,
20.使用cloneNode方法复制结点
--node.cloneNode(includeChildren);
--includeChildren为bool,表示是否复制其子结点
21.使用removeChild方法删除子结点
--parentNode.removeChild(childNode);
七.表格的操作
--注:ie中无法直接将一个完整的表格结点插入到文档中
22.添加行和单元格
var _table=document.createElement("table"); //创建表
table.insertRow(i); //在table的第i行插入行
row.insertCell(i); //在row的第i个位置插入单元格
23.引用单元格对象
--table.rows[i].cells[i];
24.删除行和单元格
--table.deleteRow(index);
--row.deleteCell(index);
25.交换两行获得两个单元格的位置
node1.swapNode(node2);
--这个方法在firefox中将出错
通用方法:
function swapNode(node1,node2) 
{ 
var _parent=node1.parentNode; 
var _t1=node1.nextSubling; 
var _t2=node2.nextSubling; 
if(_t1)parent.insertBefore(node2,_t1); 
else _parent.appendChild(node2); 
if(_t2)parent.insertBefore(node1,_t2); 
else _parent.appendChild(node1);
Javascript 相关文章推荐
工作需要写的一个js拖拽组件
Jul 28 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
javascript实现五星评分功能
Nov 10 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
js实现登录验证码
Dec 22 Javascript
在ABP框架中使用BootstrapTable组件的方法
Jul 31 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 Javascript
原生js实现针对Dom节点的CRUD操作示例
Aug 26 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 #Javascript
基于jquery的实现简单的表格中增加或删除下一行
Aug 01 #Javascript
Jquery从头学起第四讲 jquery入门教程
Aug 01 #Javascript
关于jquery动态增减控件的一些想法和小插件
Aug 01 #Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 #Javascript
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 #Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 #Javascript
You might like
强烈声明: 不要使用(include/require)_once
2013/06/06 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
浅谈python 类方法/静态方法
2020/09/18 Python
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
便利店投资创业计划书
2014/02/08 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
代理协议书
2014/04/22 职场文书
大学新闻系应届生求职信
2014/06/02 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang
TensorFlow的自动求导原理分析
2021/05/26 Python
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript