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 相关文章推荐
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
基于Javascript倒计时效果
Dec 22 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
解决VueCil代理本地proxytable无效报错404的问题
Nov 07 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
PHP 基本语法格式
2009/12/15 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
php简单实现无限分类树形列表的方法
2015/03/27 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
关于webpack代码拆分的解析
2017/07/20 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
jquery.pager.js实现分页效果
2019/07/29 jQuery
微信小程序绑定手机号获取验证码功能
2019/10/22 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
python list多级排序知识点总结
2019/10/23 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
用 Python 制作地球仪的方法
2020/04/24 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
python如何使用腾讯云发送短信
2020/09/17 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
教师先进事迹材料
2014/12/16 职场文书
员工聘用合同范本
2015/09/21 职场文书
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python
从原生JavaScript到React深入理解
2022/07/23 Javascript