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判断对象是否为数组
Dec 22 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 Javascript
vue使用echarts实现折线图
Mar 21 Vue.js
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
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+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
JS装饰器函数用法总结
2018/04/21 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
Django中间件实现拦截器的方法
2018/06/01 Python
Python hashlib模块用法实例分析
2018/06/12 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
PHP面试题大全
2015/10/16 面试题
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
设计总监岗位职责
2013/12/07 职场文书
合作意向书范本
2019/04/17 职场文书
2019各种保证书范文
2019/06/24 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
Java 多态分析
2022/04/26 Java/Android