HTML node相关的一些资料整理


Posted in Javascript onJanuary 01, 2010

一、HTML DOM是一个树型的对象

二、每个node都包含该节点的某些信息,分别是:

1. nodeName

nodeName 属性含有某个节点的名称。

* 元素节点的 nodeName 是标签名称
* 属性节点的 nodeName 是属性名称
* 文本节点的 nodeName 永远是 #text
* 文档节点的 nodeName 永远是 #document

注释:nodeName 所包含的 XML 元素的标签名称永远是大写的

2. nodeValue

对于文本节点,nodeValue 属性包含文本。

对于属性节点,nodeValue 属性包含属性值。

nodeValue 属性对于文档节点和元素节点是不可用的。

3. nodeType

nodeType 属性可返回节点的类型。

最重要的节点类型是:

元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
三、修改节点

1. [newfathernode].appendChild([childnode])

此操作会更改newfathernode和childnode之间的关系为父子节点,并且会自动导致childnode的oldfathernode不在拥有此childnode节点.

2. [newfathernode].removeChild([childnode])

四、程序示例

<html> 
<body> 
<div id="div1"> 
<div id="div3"> 
</div> 
</div> 
<div id="div2"> 
</div> 
<script> 
function $id(id){ 
return document.getElementById(id); 
} function CountNodes(arr){ 
var len = arr.length; 
var i = 0; 
while(len--){ 
(arr[len].nodeType==1) && i++; 
} 
return i; 
} 
window.onload = function(){ 
alert(CountNodes($id("div2").childNodes)); 
$id("div2").appendChild($id("div3")); 
alert(CountNodes($id("div1").childNodes)); 
alert(CountNodes($id("div2").childNodes)); 
} 
</script> 
</body> 
</html>
Javascript 相关文章推荐
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
javascript实现跳转菜单的具体方法
Jul 05 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
React中使用Vditor自定义图片详解
Dec 25 Javascript
Ajax是什么?Ajax高级用法之Axios技术
Apr 21 Javascript
JQery 渐变图片导航效果代码 漂亮
Jan 01 #Javascript
jquery 简短右键菜单 多浏览器兼容
Jan 01 #Javascript
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 #Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 #Javascript
url 特殊字符 传递参数解决方法
Jan 01 #Javascript
JavaScript 数组循环引起的思考
Jan 01 #Javascript
javascript eval和JSON之间的联系
Dec 31 #Javascript
You might like
法压式咖啡之制作法
2021/03/03 冲泡冲煮
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
php恢复数组的key为数字序列的方法
2015/04/28 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
基于python 字符编码的理解
2017/09/02 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
Python和Go语言的区别总结
2019/02/20 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
农民工讨薪标语
2014/06/26 职场文书
2014年企业党建工作总结
2014/12/18 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android