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获取并操作iframe中元素的方法
Mar 21 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
Extjs表单常见验证小结
Mar 07 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
Angular学习教程之RouterLink花式跳转
May 03 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
JS实现商品橱窗特效
Jan 09 Javascript
openlayers 3实现车辆轨迹回放
Sep 24 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导出oracle库的php代码
2009/04/20 PHP
ThinkPHP框架分布式数据库连接方法详解
2017/03/14 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
python 读写中文json的实例详解
2017/10/29 Python
Python函数返回不定数量的值方法
2019/01/22 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
python学生管理系统的实现
2020/04/05 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
数学专业毕业生自荐信
2013/11/10 职场文书
学生自我评价范文
2014/02/02 职场文书
公益广告宣传方案
2014/02/28 职场文书
销售经理竞聘书
2014/03/31 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
《画家乡》教学反思
2014/04/22 职场文书
书香校园建设方案
2014/05/02 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
借钱欠条怎么写
2015/07/03 职场文书
丧事答谢词大全
2015/09/30 职场文书
初三数学教学反思
2016/02/17 职场文书
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python