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 jsFiddle JSBin在线调试器
Mar 14 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
Vue中的异步组件函数实现代码
Jul 20 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 Javascript
vue 限制input只能输入正数的操作
Aug 05 Javascript
ES6字符串的扩展实例
Dec 21 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 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 操作excel文件的方法小结
2009/12/31 PHP
php数据库密码的找回的步骤
2011/01/12 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
python获取豆瓣电影简介代码分享
2014/01/16 Python
python中尾递归用法实例详解
2015/04/28 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
Python3.6简单反射操作示例
2018/06/14 Python
python让列表倒序输出的实例
2018/06/25 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
PyTorch预训练的实现
2019/09/18 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
艺术专业大学生自我评价
2013/09/22 职场文书
店长岗位的工作内容
2013/11/12 职场文书
名人演讲稿范文
2013/12/28 职场文书
餐饮营销方案
2014/02/23 职场文书
阳光体育活动总结
2014/04/30 职场文书
法律专业自荐信
2014/06/03 职场文书
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js