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 相关文章推荐
区分JS中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 Javascript
jquery数组之存放checkbox全选值示例代码
Dec 20 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 Javascript
Angular实现form自动布局
Jan 28 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
JavaScript高阶函数_动力节点Java学院整理
Jun 28 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 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
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
杏林同学录(七)
2006/10/09 PHP
function.inc.php超越php
2006/12/09 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
2015/06/10 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
js+html制作简单验证码
2017/02/16 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
vue实现图片上传功能
2020/05/28 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
使用python装饰器验证配置文件示例
2014/02/24 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
园艺师求职信
2014/03/10 职场文书
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle