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代码
Feb 11 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
多种js图片预加载实现方式分享
Feb 19 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
javascript中this用法实例详解
Apr 06 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 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
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
JavaScript格式化数字的函数代码
2010/11/30 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
理解javascript正则表达式
2016/03/08 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
Python 实现一个颜色色值转换的小工具
2016/12/06 Python
django反向解析和正向解析的方式
2018/06/05 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
团支书的期末学习总结自我评价
2013/11/01 职场文书
精彩的大学生自我评价
2013/11/17 职场文书
新学期校长寄语
2014/01/18 职场文书
开业典礼主持词
2014/03/21 职场文书
拓展策划方案
2014/06/03 职场文书
房展策划方案
2014/06/07 职场文书
乡镇干部先进性教育活动个人整改措施
2014/09/16 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
2014年绩效考核工作总结
2014/12/11 职场文书
解决Golang time.Parse和time.Format的时区问题
2021/04/29 Golang
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL