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+XML 操作
Sep 20 Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
Dec 06 Javascript
Vue Cli3 创建项目的方法步骤
Oct 15 Javascript
Node+OCR实现图像文字识别功能
Nov 26 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 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/09/23 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
详解react-redux插件入门
2018/04/19 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python实现html转ubb代码(html2ubb)
2014/07/03 Python
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
python logging模块的使用
2020/09/07 Python
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
美国正宗设计师眼镜在线零售商:EYEZZ
2019/03/23 全球购物
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
介绍一下Mysql的存储引擎
2015/02/12 面试题
参观监狱心得体会
2014/01/02 职场文书
《火烧云》教学反思
2014/04/12 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
Python3 类型标注支持操作
2021/06/02 Python
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技