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 相关文章推荐
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
基于javascript实现单选及多选的向右和向左移动实例
Jul 25 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
解决vue页面DOM操作不生效的问题
Mar 17 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
vue+element UI实现树形表格带复选框的示例代码
Apr 16 Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
动态规划之使用备忘录来改进Javascript函数
Apr 07 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快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
js select常用操作控制代码
2010/03/16 Javascript
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
Three.js基础部分学习
2017/01/08 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
2020/07/23 Javascript
python格式化字符串实例总结
2014/09/28 Python
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
Python实现基于POS算法的区块链
2018/08/07 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
Django web框架使用url path name详解
2019/04/29 Python
Django框架模板的使用方法示例
2019/05/25 Python
python3实现高效的端口扫描
2019/08/31 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
浅析Python __name__ 是什么
2020/07/07 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
外语学院毕业生的自我鉴定
2013/11/28 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
党员廉洁自律承诺书
2014/05/26 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
学校领导班子群众路线整改措施
2014/09/16 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
先进党员事迹材料
2014/12/24 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书