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 相关文章推荐
Apply an AutoFormat to an Excel Spreadsheet
Jun 12 Javascript
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
JS实现的自动打字效果示例
Mar 10 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
gulp安装以及打包合并的方法教程
Nov 19 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 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 翻页 实例代码
2009/08/07 PHP
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
php中文验证码实现方法
2015/06/18 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
javascript 限制输入脚本大全
2009/11/03 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
django实现分页的方法
2015/05/26 Python
Python编程实现正则删除命令功能
2017/08/30 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
HTML5 CSS3给网站设计带来出色效果
2009/07/16 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
印度在线购物网站:Paytmmall
2019/07/24 全球购物
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
商务英语专业毕业生自荐信
2013/11/05 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
法学专业求职信范文
2015/03/19 职场文书
父亲去世追悼词
2015/06/23 职场文书