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 相关文章推荐
为数据添加append,remove功能
Oct 03 Javascript
基于jquery的direction图片渐变动画效果
May 24 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
vue之浏览器存储方法封装实例
Mar 15 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
package.json配置文件构成详解
Aug 27 Javascript
vue全屏事件开发详解
Jun 17 Javascript
Javascript类型判断相关例题及解析
Aug 26 Javascript
详解JavaScript执行模型
Nov 16 Javascript
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内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
将list转换为json失败的原因
2013/12/17 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
Vue组件模板的几种书写形式(3种)
2020/02/19 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
利用python实现数据分析
2017/01/11 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
python实现趣味图片字符化
2019/04/30 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
数字漫画:comiXology
2020/06/13 全球购物
医院护士求职自荐信格式
2013/09/21 职场文书
物业保安员岗位职责制度
2014/01/30 职场文书
铁路工务反思材料
2014/02/07 职场文书
食堂采购员岗位职责
2014/03/17 职场文书
教书育人演讲稿
2014/09/11 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
社区党建工作总结2015
2015/05/13 职场文书
金榜题名主持词
2015/07/02 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python
vue postcss-px2rem 自适应布局
2022/05/15 Vue.js