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 相关文章推荐
jquery 可排列的表实现代码
Nov 13 Javascript
jquery maxlength使用说明
Sep 09 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 Javascript
小程序实现搜索框
Jun 19 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
vue实现循环滚动列表
Jun 30 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 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教程 预定义变量
2009/10/23 PHP
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
二进制交叉权限微型php类分享
2014/02/07 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
Python导入txt数据到mysql的方法
2015/04/08 Python
Python中使用partial改变方法默认参数实例
2015/04/28 Python
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
Python异常处理操作实例详解
2018/05/10 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
浅谈python常用程序算法
2019/03/22 Python
详解python函数的闭包问题(内部函数与外部函数详述)
2019/05/17 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
python实现最小二乘法线性拟合
2019/07/19 Python
Django之模板层的实现代码
2019/09/09 Python
do you have any Best Practice for testing
2016/06/04 面试题
医药营销个人求职信
2014/04/12 职场文书
实践单位评语
2014/04/26 职场文书
表彰大会策划方案
2014/05/13 职场文书
商业项目策划方案
2014/06/05 职场文书
干部竞争上岗演讲稿
2014/09/11 职场文书
新入职员工工作总结
2015/10/15 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL