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之锁定表格栏位
Jun 29 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
jquery $.trim()方法使用介绍
May 21 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
js电话号码验证方法
Sep 28 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
基于Angularjs实现分页功能
May 30 Javascript
微信小程序排坑指南详解
May 23 Javascript
React 源码中的依赖注入方法
Nov 07 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
vue.js实现三级菜单效果
Oct 19 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
我的论坛源代码(十)
2006/10/09 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
Python编码时应该注意的几个情况
2013/03/04 Python
Python基础篇之初识Python必看攻略
2016/06/23 Python
python函数中将变量名转换成字符串实例
2020/05/11 Python
在python image 中实现安装中文字体
2020/05/16 Python
python实现代码审查自动回复消息
2021/02/01 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
六一儿童节标语
2014/10/08 职场文书
建筑工地文明标语
2014/10/09 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
八月一日观后感
2015/06/10 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python