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中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
vuejs使用FormData实现ajax上传图片文件
Aug 08 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
JS实现的类似微信聊天效果示例
Jan 29 Javascript
JS实现json数组排序操作实例分析
Oct 28 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 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程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
javascript简单写的判断电话号码实例
2017/05/24 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
JS如何生成动态列表
2020/09/22 Javascript
Python中多线程的创建及基本调用方法
2016/07/08 Python
python itchat实现微信自动回复的示例代码
2017/08/14 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
美国在线宠物商店:Chewy
2019/01/12 全球购物
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
小区门卫岗位职责
2013/12/31 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
文明家庭事迹材料
2014/12/20 职场文书
千手观音观后感
2015/06/03 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL