DOM 基本方法


Posted in Javascript onJuly 18, 2009

直接引用结点
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);
}

删除所有空白结点:
<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>
nodetype=3结点类型是文本\s匹配所有空白
将结点插入指定索引位置
function insertAt(parentNode,newNode,index)
{
if(!parentNode.hasChildNodes())
{
parentNode.appendChild(newNode);
return newNode;
}
//使用try捕获索引不存在出现的异常
try{
parentNode.insertBefore(newNode,parentNode.childNodes[index]);
}
catch(e){
return null;
}
return newNode;

Javascript 相关文章推荐
常用一些Javascript判断函数
Aug 14 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
javascript动态生成树形菜单的方法
Nov 14 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
通过js给网页加上水印背景实例
Jun 17 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
微信小程序前端promise封装代码实例
Aug 24 Javascript
npm全局环境变量配置详解
Dec 15 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
javascript 全角转换实现代码
Jul 17 #Javascript
JavaScript 创建对象
Jul 17 #Javascript
prototype 学习笔记整理
Jul 17 #Javascript
表单元素事件 (Form Element Events)
Jul 17 #Javascript
优化 JavaScript 代码的方法小结
Jul 16 #Javascript
Javascript 事件流和事件绑定
Jul 16 #Javascript
js 对象是否存在判断
Jul 15 #Javascript
You might like
PHP获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
CCPry JS类库 代码
2009/10/30 Javascript
为Extjs加加速(javascript加速)
2010/08/19 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
JAVA招聘远程笔试题
2015/07/23 面试题
人事部主管岗位职责
2013/12/26 职场文书
经济管理专业自荐信
2013/12/30 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
新年晚会主持词
2014/03/24 职场文书
群众路线对照检查材料
2014/09/22 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
2015入党自传格式范文
2015/06/26 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书