HTML node相关的一些资料整理

 更新时间:2010年01月01日 23:23:54   作者:   我要评论
HTML node相关的一些资料整理
一、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>

相关文章

  • js中this的用法实例分析

    js中this的用法实例分析

    这篇文章主要介绍了js中this的用法,实例分析了js中this的4种常见用法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • 手挽手带你学React之React-router4.x的使用

    手挽手带你学React之React-router4.x的使用

    这篇文章主要介绍了手挽手带你学React之React-router4.x的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • JS实现移动端按首字母检索城市列表附源码下载

    JS实现移动端按首字母检索城市列表附源码下载

    我们常见的手机通讯录或微信通讯录,联系人信息是按字母顺序排列的列表,通过点击右侧的字母,会迅速定位检索到首字母对应的联系人。下面通过本文给大家分享JS实现移动端按首字母检索城市列表功能,需要的的朋友参考下吧
    2017-07-07
  • 代码详解javascript模块加载器

    代码详解javascript模块加载器

    本篇文章通过代码示例给大家详细分析了javascript基础内容模块加载器的相关知识点,一起学习下。
    2018-03-03
  • js调用activeX获取u盘序列号的代码

    js调用activeX获取u盘序列号的代码

    js调用activeX获取u盘序列号的代码,需要的朋友可以参考下。
    2011-11-11
  • JS实现图片居中悬浮效果

    JS实现图片居中悬浮效果

    这篇文章给大家分享的是通过JS实现图片垂直居中悬浮,不跟随滚动条飘动的效果,有兴趣的朋友跟着学习下吧。
    2017-12-12
  • JavaScript实现简单的星星评分效果

    JavaScript实现简单的星星评分效果

    这篇文章主要为大家详细介绍了JavaScript实现简单的星星评分效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 从QQ网站中提取的纯JS省市区三级联动菜单

    从QQ网站中提取的纯JS省市区三级联动菜单

    在浏览网页过程中发现QQ自己的JS省市区三级联动。所以研究了一下,就将其提取出来了。他的界面如下,喜欢的朋友可以学习下
    2013-12-12
  • JavaScript实现页面5秒后自动跳转的方法

    JavaScript实现页面5秒后自动跳转的方法

    这篇文章主要介绍了JavaScript实现页面5秒后自动跳转的方法,涉及javascript递归调用与计时函数setTimeout的使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • javascript验证香港身份证的格式或真实性

    javascript验证香港身份证的格式或真实性

    本文分享了利用javascript验证香港身份证的格式或真实性的代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02

最新评论