js DOM模型操作


Posted in Javascript onDecember 28, 2009

DOM模型中的节点:元素节点、文本节点、属性节点
例:<a href=”http://www.cnblogs.com/shuz”>私のdotnet小屋</a>
(1)a是元素节点
(2)“私のdotnet小屋”是文本节点
(3)href=”http://www.cnblogs.com/shuz”是属性节点
DOM节点的属性

属性 类型 说明
nodeName String 节点名称,根据节点的类型而定义
nodeValue String 节点的值,根据节点的类型而定义
nodeType Number 节点类型,1为元素节点,2为属性节点,3为文本节点
firstChild Node 指向childNodes列表的第一个节点
lastChild Node 指向childNodes列表的最后一个节点
childNodes NodeList 所有子节点列表,childNodes[i]可以访问第i+1个节点
parentNode Node 指向节点的父节点,如果已是根节点,则返回null
previousSibling Node 指向前一个兄弟节点,如果已是第一个节点,则返回null
nextSibling Node 指向后一个兄弟节点,如果已是最后一个节点,返回null
Attributes NameNodeMap 包含一个元素特性的Attr对象,仅用于元素节点
className String 节点的CSS类
innerHTML String 某个标记之间的所有内容,包括代码本身
DOM节点的方法
(1)访问节点:
【通过标签名】
document.getElementsByTagName(sTagName)方法:返回一个包含某个相同标签名的元素节点列表
【通过标签ID】
document.getElementById(sElementId)方法:返回Id为指定值的元素节点
【访问前一个节点】兼容IE和FireFox
(自定义)
function prevSib(oNode){ 
var oTempFirstNode=oNode.parentNode.firstChild; 
//判断是否是第一个节点,如果是则返回null 
if(oNode==oTempFirstNode) 
return null; 
var oTempNode=oNode.previousSibling; 
//逐一搜索前面的兄弟节点,直到发现元素节点为止 
while(oTempNode.nodeType!=1 && oTempNode.previousSibling!=null) 
oTempNode=oTempNode.previousSibling; 
//三目运算符,如果是元素节点则返回节点本身,否则返回null 
return (oTempNode.nodeType==1)?:oTempNode:null; 
}

【访问后一个节点】兼容IE和FireFox
(自定义)
function nextSib(oNode){ 
var oTempLastNode=oNode.parentNode.lastChild; 
//判断是否是最后一个节点,如果是则返回null 
if(oNode==oTempLastNode) 
return null; 
var oTempNode=oNode.nextSibling; 
//逐一搜索后面的兄弟节点,直到发现元素节点为止 
while(oTempNode.nodeType!=1 && oTempNode.nextSibling!=null) 
oTempNode=oTempNode.nextSibling; 
//三目运算符,如果是元素节点则返回节点本身,否则返回null 
return(oTempNode.nodeType==1)?oTempNode:null; 
}

(2)判断一个节点是否有子节点:
NodeObject.hasChildNodes()方法:当childNodes包含一个或多个节点时,返回true
(3)设置节点属性:
eleNode.getAttribute(attrNode)方法:返回eleNode元素的attrNode属性
eleNode.setAttribute(attrNode,sNewValue)方法:设置eleNode元素的attrNode属性的值为sNewValue
(4)创建节点:
document.createElement(eleNode)方法:创建一个元素节点eleNode
document.createTextNode(textNode)方法:创建一个文本节点textNode
document.createDocumentFragment()方法:创建文档碎片节点
(5)添加节点:
eleNode.appendChild(textNode)方法:将textNode节点添加到childNodes的末尾
(6)删除节点:
oNode.parentNode.removeChild(oNode)方法:从childNodes中删除oNode节点
(7)替换节点:
oNode.parentNode.replaceChild(oNewNode,oOldNode)方法:将childNodes中的oOldNode节点替换成oNewNode节点
(8)在特定节点前插入节点:
oTargetNode.parentNode.insertBefore(oNewNode,oTargetNode)方法:在childNodes中的oTargetNode节点之前插入oNewNode节点
(9)在特定节点后插入节点:
(自定义)oTargetNode.parentNode.insertAfter(oNewNode,oTargetNode)方法:在childNodes中的oTargetNode节点之后插入oNewNode节点
function insertAfter(oNewNode,oTargetNode){ 
var oParentNode=oTargetNode.parentNode; 
if(oParentNode.lastChild==oTargetNode) 
oParentNode.appendChild(oNewNode); 
else 
oParentNode.insertBefore(oNewNode,oTargetNode.nextSibling); 
}
Javascript 相关文章推荐
用正则xmlHttp实现的偷(转)
Jan 22 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
Dec 15 Javascript
简单的JavaScript互斥锁分享
Feb 02 Javascript
node.js读取文件到字符串的方法
Jun 29 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 Javascript
微信小程序生成二维码的示例代码
Mar 29 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
微信小程序实现form表单本地储存数据
Jun 27 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 #Javascript
javascript iframe编程相关代码
Dec 28 #Javascript
通过javascript设置css属性的代码
Dec 28 #Javascript
JavaScript的public、private和privileged模式
Dec 28 #Javascript
Javascript 面向对象特性
Dec 28 #Javascript
extJs 常用到的增,删,改,查操作代码
Dec 28 #Javascript
firefox和IE系列的相关区别整理 以备后用
Dec 28 #Javascript
You might like
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
python基础教程之类class定义使用方法
2014/02/20 Python
Python中获取网页状态码的两个方法
2014/11/03 Python
Python如何实现文本转语音
2016/08/08 Python
Python中装饰器学习总结
2018/02/10 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
巴黎一票通:The Paris Pass
2018/02/10 全球购物
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
C语言面试题
2013/05/19 面试题
小学教师学期末自我评价
2013/09/25 职场文书
物业门卫岗位职责
2013/12/28 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
成人成长感言如何写?
2019/08/16 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers
Python实现对齐打印 format函数的用法
2022/04/28 Python