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 相关文章推荐
JQuery在光标位置插入内容的实现代码
Jun 18 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
ES6入门教程之let和const命令详解
May 17 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 Javascript
新手简单了解vue
May 29 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
jquery实现拖拽小方块效果
Dec 10 jQuery
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
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入门源程序
2006/10/09 PHP
PHP伪静态写法附代码
2008/06/20 PHP
PHP中输出转义JavaScript代码的实现代码
2011/04/22 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
thinkPHP引入类的方法详解
2016/12/08 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
暇步士官网:Hush Puppies
2016/09/22 全球购物
公司司机岗位职责
2014/02/07 职场文书
师说教学反思
2014/02/07 职场文书
工程质量承诺书
2014/03/27 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
毕业生对母校寄语
2015/02/26 职场文书
食品药品安全责任书
2015/05/11 职场文书
工作证明格式范文
2015/06/15 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
Python爬取某拍短视频
2021/06/11 Python