DOM下的节点属性和操作小结


Posted in Javascript onMay 14, 2009

属性:
1 .nodeName
节点名称,相当于tagName.属性节点返回属性名,文本节点返回#text。nodeName,是只读的。
2 .nodeType
值:1,元素节点;2,属性节点;3,文本节点。nodeType是只读的。
3 .nodeValue
返回一个字符串,指示这个节点的值。元素节点返回null,属性节点返回属性值,文本节点返回文本。nodeValue可读可写,这是对元素节点不能写。一般只用于设置文本节点的值。
4 .childNodes
返回子节点数组。文本和属性节点的childNodes永远是null。可以用hasChildNodes()来判断是否有子节点。只读属性,要删除添加节点可不能用操作childNodes数组的办法呃。
5 .firstChild
返回第一个子节点。文本和属性节点没有子节点,会返回一个空数组,这是针对这二位的特殊待遇。对于元素节点,若是没有子节点会返回null.有一个等价式:firstChild=childNodes[0].
6 .lastChild
返回最后一个子节点。返回值同firstChild,三方待遇参考上面。有一个等价式:lastChide=childNodes[childNodes.length-1].
7 .nextSibling()
返回节点的下一个兄弟节点。如果没有下一个兄弟节点的话,返回null。只读属性,不可以更改应用。
8 .previousSibling()
返回节点的上一个兄弟节点。同上。
9 .parentNode()
返回节点的父节点。document.parentNode()返回null,其他的情况下都将返回一个元素节点,因为只有元素节点拥有子节点,出了document外任何节点都拥有父节点。parentNode(),又是一个只读的家伙。

操作:
1. 创建节点
createElement('tagName');
如:var oP=document.createElement('p');创建了一个<p></p>标签。
2. 创建文本节点
createTextNode('text');
如:var oText=document.createTextNode('This is a paragh!');
3. 附加子节点
appendChild(o);其中o为节点对象。
如:document.body.appendChildNode(o);在body末尾追加
document.forms[0].appendChildNode(o);在form表单末尾追加
oP.appendChildNode(o);在元素内部的末尾追加,其总oP为节点对象。
4. 创建文档片断
createDocumentFragment();
如:var oF=document.createDocumentFragment();
5. 删除节点
removeChild(oP);
如:document.body.removeChild(oP),从body中移除oP节点对象。
6. 替换节点
replaceChid(newOp,targetOp);将目标节点targetOp替换为newOp
如:document.body.replayChild(oPa,oPb).ps:怎会这样特殊?源和目地操作数都是参数,为何调用者是document.body?记住先,别多管。——被替换的必须是body的子节点,可以用其他element替代document.body,前提一样,被替换的要是这个element的子节点。
7. 插入节点
insertBefor(newOp,targetOp);
insertAfter(newOp,targetOp);
8. 设置或得到属性节点
setAttribute('key','value');
getAttribute('key','value')
9.复制节点。
cloneNode(true/false)

Javascript 相关文章推荐
Javascript isArray 数组类型检测函数
Oct 08 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
微信小程序实现搜索历史功能
Mar 26 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 #Javascript
JavaScript 动态将数字金额转化为中文大写金额
May 14 #Javascript
JS面向对象、prototype、call()、apply()
May 14 #Javascript
JavaScript Date对象使用总结
May 14 #Javascript
jQuery 技巧大全(新手入门篇)
May 12 #Javascript
JS 字符串连接[性能比较]
May 10 #Javascript
javascript获取当前ip的代码
May 10 #Javascript
You might like
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
php中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
js版本A*寻路算法
2006/12/22 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
js获取事件源及触发该事件的对象
2013/10/24 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
angular.bind使用心得
2015/10/26 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
Python 加密的实例详解
2017/10/09 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
校园歌咏比赛主持词
2014/03/18 职场文书
卫生系统先进事迹
2014/05/13 职场文书
迎新晚会策划方案
2014/06/13 职场文书
化工专业求职信
2014/07/01 职场文书
中学推普周活动总结
2015/05/07 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
离职信范本
2015/06/23 职场文书
开学第一周总结
2015/07/16 职场文书