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 相关文章推荐
jquery制作select列表双向选择示例代码
Sep 02 Javascript
jquery中JSON的解析方式
Mar 16 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
koa2 从入门到精通(小结)
Jul 23 Javascript
js实现超级玛丽小游戏
Mar 18 Javascript
JavaScript实现音乐导航效果
Nov 19 Javascript
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模板解析类实例
2015/07/09 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
2011/09/19 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
PHP守护进程实例
2015/03/06 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
Python学习笔记_数据排序方法
2014/05/22 Python
python中base64加密解密方法实例分析
2015/05/16 Python
对python:print打印时加u的含义详解
2018/12/15 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
python求解汉诺塔游戏
2020/07/09 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
中小学校园安全广播稿
2014/09/29 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
收银员岗位职责范本
2015/04/07 职场文书
女性健康讲座主持词
2015/07/04 职场文书
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python
使用Python拟合函数曲线
2022/04/14 Python
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS