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 相关文章推荐
JavaScript this 深入理解
Jul 30 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
Jan 10 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
Webpack打包字体font-awesome的方法示例
Apr 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
PHP应用JSON技巧讲解
2013/02/03 PHP
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
jQuery 创建Dom元素
2010/05/07 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
Python读写zip压缩文件的方法
2018/08/29 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
python与js主要区别点总结
2020/09/13 Python
python 检测图片是否有马赛克
2020/12/01 Python
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
高校学生干部的自我评价分享
2013/11/04 职场文书
医学生自荐信范文
2013/12/03 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
专项法律服务方案
2014/06/11 职场文书
学风建设主题班会
2015/08/17 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server
vue递归实现树形组件
2022/07/15 Vue.js