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 相关文章推荐
Json字符串转换为JS对象的高效方法实例
May 01 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
js报$ is not a function 的问题的解决方法
Jan 20 Javascript
JavaScript DOM节点添加示例
Jul 16 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
详解Vue之父子组件传值
Apr 01 Javascript
JS自定义右键菜单实现代码解析
Jul 16 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 Javascript
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
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小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
回调函数的意义以及python实现实例
2017/06/20 Python
python入门:这篇文章带你直接学会python
2018/09/14 Python
代码详解django中数据库设置
2019/01/28 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
python中time tzset()函数实例用法
2021/02/18 Python
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
教师教学评估方案
2014/05/09 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
安全教育观后感
2015/06/17 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
Redis可视化客户端小结
2021/06/10 Redis
Java死锁的排查
2022/05/11 Java/Android