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 相关文章推荐
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
JavaScript OOP面向对象介绍
Dec 02 Javascript
javascript操作css属性
Dec 30 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
JS实现浏览器打印、打印预览示例
Feb 28 Javascript
ECMAScript6--解构
Mar 30 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
微信小程序icon组件使用详解
Jan 31 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
vue实现div单选多选功能
Jul 16 Javascript
前端JS获取URL参数的4种方法总结
Apr 05 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
一个odbc连mssql分页的类
2006/10/09 PHP
php完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
PHP simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
网站用php实现paypal整合方法
2010/11/28 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
python递归计算N!的方法
2015/05/05 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
python绘制雪景图
2019/12/16 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
django form和field具体方法和属性说明
2020/07/09 Python
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
医药代表个人求职信范本
2013/12/19 职场文书
试用期员工考核制度
2014/01/22 职场文书
行政人事专员岗位职责
2014/03/05 职场文书
2015新学期家长寄语
2015/02/26 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python