1.Node对象属性一
            * nodeName
            * nodeType
            * nodeValue

* 使用dom解析html时候，需要html里面的标签，属性和文本都封装成对象

<body>

    <span id="spanid">哈哈呵呵</span>

    <script type="text/javascript">

        //获取标签对象

        var span1 = document.getElementById("spanid");

        //alert(span1.nodeType);   //  1

        ///alert(span1.nodeName);   // SPAN

        ///alert(span1.nodeValue);  // null

        //获取属性对象

        var id1 = span1.getAttributeNode("id");

        //alert(id1.nodeType);  // 2

        //alert(id1.nodeName);  // id

        //alert(id1.nodeValue); // spanid

        //获取文本

        var text1 = span1.firstChild;

        alert(text1.nodeType);  //  3

        alert(text1.nodeName);  // #text

        alert(text1.nodeValue); // 内容

    </script>

 </body>

* 标签节点对应的值
                       nodeType： 1
                       nodeName： 大写标签名称 比如SPAN
                       nodeValue: null
            * 属性节点对应的值
                       nodeType： 2
                       nodeName： 属性名称
                       nodeValue: 属性的值
            * 文本节点对应的值
                       nodeType： 3
                       nodeName： #text
                       nodeValue: 文本内容

2.Node对象的属性二
           <ul>
                   <li>qqqqq</li>
                   <li>wwww</li>
          </ul>

* 父节点
                     - ul是li的父节点
                     - parentNode
                     - //得到li1
                    var li1 = document.getElementById("li1");
                      //得到ul
                       var ul1 = li1.parentNode;
                      alert(ul1.id);

* 子节点
                    - li是ul的子节点
                    - childNodes：得到所有子节点，但是兼容性很差

- firstChild：获取第一个子节点
                              - //获取ul的第一个子节点 id=li1
                               //得到ul
                               var ul1 = document.getElementById("ulid");
                               //第一个子节点
                               var li1 = ul1.firstChild;
                               alert(li1.id);
                    - lastChild：获取最后一个子节点
                               //得到最后一个子节点
                               var li4 = ul1.lastChild;
                               alert(li4.id);

* 同辈节点
                    - li直接关系是同辈节点
                    - nextSibling: 返回一个给定节点的下一个兄弟节点。
                      previousSibling：返回一个给定节点的上一个兄弟节点。

- //获取li的id是li3的上一个和下一个兄弟节点
                                 var li3 = document.getElementById("li3");
                                //alert(li3.nextSibling.id);
                                 alert(li3.previousSibling.id);

 <body>

    <ul id="ulid">

        <li id="li1" value="qqq">qqqqq</li>

        <li id="li2">wwww</li>

        <li id="li3">yyyyyy</li>

        <li id="li4">test1111</li>

    </ul>

    <script type="text/javascript">

        //得到li1

        var li1 = document.getElementById("li1");

        //得到ul

        var ul1 = li1.parentNode;

    //    alert(ul1.id);

        //获取ul的第一个子节点 id=li1

        //得到ul

        var ul1 = document.getElementById("ulid");

        //第一个子节点

        var li1 = ul1.firstChild;

        //alert(li1.id);

        //得到最后一个子节点

        var li4 = ul1.lastChild;

        //alert(li4.id);

        //获取li的id是li3的上一个和下一个兄弟节点

        var li3 = document.getElementById("li3");

        alert(li3.nextSibling.id);

        alert(li3.previousSibling.id);

    </script>

 </body>

Node对象属性的更多相关文章

  1. getSelection、range 对象属性，方法理解，解释

    网上转了一圈发现没有selection方面的解释,自己捣鼓下 以这段文字为例子.. <p><b>法国国营铁路公司(SNCF)20日承认,</b>新订购的2000列火 ...

  2. JavaScript基础10——node对象

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. xml 转换成对象(采用反射机制对对对象属性赋值)

    /// <summary> /// 采用反射机制对对对象属性赋值 /// </summary> /// <param name="node">& ...

  4. DOM对象属性(property)与HTML标签特性(attribute)

    HTML中property与attribute是极易混淆的两个概念.大多数时候这两个单词都翻译为"属性",为了区分二者,一般将property翻译为"属性",a ...

  5. DOM基础知识（Node对象、Element对象）

    5.Node对象 u  遍历节点 u 父节点 .parentNode - 获取父节点—> 元素节点或文档节点 .parentElement - 获取父元素节点—> 元素节点 u    子节 ...

  6. Node对象的一些方法

    Node对象是什么提供了 DOM的标准规范提供了Node对象,该对象主要提供了解析DOM节点树结构的属性和方法,DOM树结构主要是依靠节点进行解析,称为DOM节点树结构.Node对象是解析DOM节点树 ...

  7. 探究@property申明对象属性时copy与strong的区别

    一.问题来源 一直没有搞清楚NSString.NSArray.NSDictionary--属性描述关键字copy和strong的区别,看别人的项目中属性定义有的用copy,有的用strong.自己在开 ...

  8. [源码]Literacy 快速反射读写对象属性,字段

    Literacy 说明 Literacy使用IL指令生成方法委托,性能方面,在调用次数达到一定量的时候比反射高很多 当然,用IL指令生成一个方法也是有时间消耗的,所以在只使用一次或少数几次的情况,不但 ...

  9. 了解JavaScript 对象属性的标签

    对象属性的标签 value(属性值), writable(属性可写), enumerable(属性可枚举), configurable(属性可配置), 这些属性标签使对象所持有的属性体现出不同的特性, ...

随机推荐

  1. bootstrap-fileinput简单完整列子

    文件夹结构 版本都是3.x <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http ...

  2. html-div自动撑大

    下面提供几种解决方案,以修复该问题. 1.给父容器使用display属性 div#container { display: table; /* 建议使用 */ /*或者 display: table- ...

  3. 为简单而努力：Android封装类详解

    一.简单说明 1, IntentService IntentService继承自Service,并在其内部创建了工作线程,用来处理耗时操作,其中onHandleIntent方法就是在子线程执行的,我们 ...

  4. 【POJ 2942】Knights of the Round Table（点双连通分量，二分图染色）

    圆桌会议必须满足:奇数个人参与,相邻的不能是敌人(敌人关系是无向边). 求无论如何都不能参加会议的骑士个数.只需求哪些骑士是可以参加的. 我们求原图的补图:只要不是敌人的两个人就连边. 在补图的一个奇 ...

  5. 【转】ListView学习笔记（二）——ViewHolder

    在android开发中Listview是一个很重要的组件,它以列表的形式根据数据的长自适应展示具体内容,用户可以自由的定义listview每一列的布局,但当listview有大量的数据需要加载的时候, ...

  6. 【BZOJ-4569】萌萌哒 ST表 + 并查集

    4569: [Scoi2016]萌萌哒 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 459  Solved: 209[Submit][Status] ...

  7. linux中/和/root（~） 和 /home

    winodws是森林型目录结构,它有很多根,如C.D.E.F等都是它的根目录,然后在其实创建子目录linux是树型目录结构,它只有一个根就是/目录,然后在/目录在有子目录如/root./home./e ...

  8. 【poj1568】 Find the Winning Move

    http://poj.org/problem?id=1568 (题目链接) 题意 两人下4*4的井字棋,给出一个残局,问是否有先手必胜策略. Solution 极大极小搜索.. 这里有个强力优化,若已 ...

  9. Android成长日记-WebView使用

    在App中有时候会看到一些页面是以网页的形式展示,其原理就是运用了WebView,下面予以讲述WebView 1. 使用Intent调用系统浏览器或者第三方浏览器打开网页 调用系统浏览器打开页面 Ur ...

  10. Linux Dynamic Shared Library && LD Linker

    目录 . 动态链接的意义 . 地址无关代码: PIC . 延迟版定(PLT Procedure Linkage Table) . 动态链接相关结构 . 动态链接的步骤和实现 . Linux动态链接器实 ...