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 动态生成私有变量访问器
Dec 06 Javascript
JavaScript DOM 学习第三章 内容表格
Feb 19 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
Apr 12 Javascript
功能强大的Bootstrap使用手册(一)
Aug 02 Javascript
JS实现重新加载当前页面
Nov 29 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
记一次用vue做的活动页的方法步骤
Apr 11 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 Javascript
JS数据类型分类及常用判断方法
Nov 19 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图片裁剪函数(保持图像不变形)
2014/05/04 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
使用js 设置url参数
2013/07/08 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
jquery图片轮播特效代码分享
2020/04/20 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
python绘制漏斗图步骤详解
2019/03/04 Python
python利用opencv实现颜色检测
2021/02/23 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
电信专业应届生自荐信
2013/09/28 职场文书
我的大学生活职业生涯规划
2014/01/02 职场文书
质检员工作总结2015
2015/04/25 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书
Python OpenCV之常用滤波器使用详解
2022/04/07 Python