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 相关文章推荐
jQuery Study Notes学习笔记 (二)
Aug 04 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
jQuery实现购物车数字加减效果
Mar 14 Javascript
javascript实现动态表头及表列的展现方法
Jul 14 Javascript
详解vue-cli + webpack 多页面实例应用
Apr 25 Javascript
ES6中Array.includes()函数的用法
Sep 20 Javascript
vue 设置路由的登录权限的方法
Jul 03 Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 Javascript
vue+element实现动态加载表单
Dec 13 Vue.js
javascript数组includes、reduce的基本使用
Jul 02 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中读取文件的8种方法和代码实例
2014/08/05 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
详解javascript函数的参数
2015/11/10 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python迭代器实例简析
2014/09/25 Python
python实现堆栈与队列的方法
2015/01/15 Python
Python操作CouchDB数据库简单示例
2015/03/10 Python
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
python关键字and和or用法实例
2015/05/28 Python
浅谈Python peewee 使用经验
2017/10/20 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
HTML5之语义标签介绍
2016/07/07 HTML / CSS
施华洛世奇意大利官网:SWAROVSKI意大利
2018/07/23 全球购物
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
编写strcpy函数
2014/06/24 面试题
Servlet都有哪些方法?主要作用是什么?
2014/03/04 面试题
档案接收函范文
2014/01/10 职场文书
节约用水的口号
2014/06/20 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android