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 1.0.2
Oct 11 Javascript
JavaScript和ActionScript的交互实现代码
Aug 01 Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
JavaScript获取一个范围内日期的方法
Apr 24 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 Javascript
何时使用Map来代替普通的JS对象
Apr 29 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
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
python实现决策树分类算法
2017/12/21 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
python 字典套字典或列表的示例
2019/12/16 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
python 模块导入问题汇总
2021/02/01 Python
使用python实现学生信息管理系统
2021/02/25 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
若干个Java基础面试题
2015/05/19 面试题
法学专业个人求职信
2013/09/26 职场文书
村优秀党员事迹材料
2014/01/15 职场文书
补充协议书范本
2014/04/23 职场文书
班组拓展活动方案
2014/08/14 职场文书
培训心得体会怎么写
2016/01/25 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers
python 实现定时任务的四种方式
2021/04/01 Python
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
PyTorch的Debug指南
2021/05/07 Python