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添加输出窗口的代码
Feb 07 Javascript
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
js中判断用户输入的值是否为空的简单实例
Dec 23 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
JS简单实现数组去重的方法示例
Mar 27 Javascript
Vue.js中数据绑定的语法教程
Jun 02 Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 Javascript
详解vue几种主动刷新的方法总结
Feb 19 Javascript
js控制随机数生成概率代码实例
Mar 21 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通过COM使用ADODB的简单例子
2006/12/31 PHP
php 中的4种标记风格介绍
2012/05/10 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
PHP函数checkdnsrr用法详解(Windows平台用法)
2016/03/21 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
Javascript 函数对象的多重身份
2009/06/28 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
js单向链表的具体实现实例
2013/06/21 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
详解Python中如何写控制台进度条的整理
2018/03/07 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
什么是python的必选参数
2020/06/21 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
TobyDeals美国:在电子产品上获得最好的优惠和折扣
2019/08/11 全球购物
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
场地使用证明模板
2014/10/25 职场文书
销售员岗位职责
2015/02/10 职场文书
入学证明
2015/06/23 职场文书