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 相关文章推荐
JS request函数 用来获取url参数
May 17 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
Jul 10 Javascript
js文件Cookie存取值示例代码
Feb 20 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 Javascript
electron demo项目npm install安装失败的解决方法
Feb 06 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
使用Vue生成动态表单
Nov 26 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
cache_lite试用
2007/02/14 PHP
PHP详解ASCII码对照表与字符转换
2011/12/05 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
php上传excel表格并获取数据
2017/04/27 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
详解AngularJS 模块化
2017/06/14 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
Python实现从订阅源下载图片的方法
2015/03/11 Python
Python 通过pip安装Django详细介绍
2017/04/28 Python
学习Python爬虫的几点建议
2020/08/05 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
我的教育故事演讲稿
2014/05/04 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
防汛工作情况汇报
2014/10/28 职场文书
个人年底工作总结
2015/03/10 职场文书
感恩教师主题班会
2015/08/12 职场文书
协议书格式模板
2016/03/24 职场文书