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 相关文章推荐
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
JS实现往下不断流动网页背景的方法
Feb 27 Javascript
JavaScript中函数(Function)的apply与call理解
Jul 08 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 Javascript
Vue3.0写自定义指令的简单步骤记录
Jun 27 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
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
2019/04/17 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
Python 爬虫模拟登陆知乎
2016/09/23 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
详解Python with/as使用说明
2018/12/13 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
python中如何写类
2020/06/29 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
公司委托书范本
2014/04/04 职场文书
教师个人自我评价范文
2014/04/13 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
服装设计师求职信
2014/06/04 职场文书
庆七一宣传标语
2014/10/08 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
大学生个人学习总结
2015/02/15 职场文书
爱国电影观后感
2015/06/19 职场文书
创业计划书之便利店
2019/09/05 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS