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 相关文章推荐
javascript 有趣而诡异的数组
Apr 06 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
React key值的作用和使用详解
Aug 23 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 Javascript
js 图片懒加载的实现
Oct 21 Javascript
浅谈react useEffect闭包的坑
Jun 08 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
德生1994机评
2021/03/02 无线电
Sublime里直接运行PHP配置方法
2014/11/28 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
Python中实例化class的执行顺序示例详解
2018/10/14 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
大学生志愿者感言
2014/01/15 职场文书
同学聚会老师邀请函
2014/01/28 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
公司开业主持词
2015/07/02 职场文书
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android