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. java中会存在内存泄漏吗，请简单描述。

    内存泄露就是指一个不再被程序使用的对象或变量一直被占据在内存中.Java 使用有向图的方式进行垃圾回收管理,可以消除引用循环的问题,例如有两个对象,相互引用,只要它们和根进程不可达的,那么GC也是可以 ...

  2. this action could not be completed.try again登陆appstore错误提示

    今天升级10.11后登陆appstore的时候发现报错了: this action could not be completed.try again 解决办法,终端敲入: sudo mkdir -p ...

  3. Xcode 修改工程名以及注意事项

    1.先把整个工程文件夹名改为新的工程名. 2.打开工程,单击,输入新的工程名,会出现,点击确定. 3.回到工程界面,在中选择 Manage Schemes,然后再弹出的对话框,把工程名改为新的名字. ...

  4. 【BZOJ-1131】Sta 树形DP

    1131: [POI2008]Sta Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1150  Solved: 378[Submit][Status] ...

  5. 【BZOJ-2095】Bridge 最大流 + 混合图欧拉回路 + 二分

    2095: [Poi2010]Bridges Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 604  Solved: 218[Submit][Stat ...

  6. NuGet在Push的时候提示“远程服务器返回错误：（403）已禁用”问题解决

    在使用NuGet把包push到nuget官网的时候,提示了如下信息: Failed to process request. 'The specified API key is invalid or d ...

  7. Uva1515 Pool construction

    Time Limit: 3000MS64bit IO Format: %lld & %llu 网络流 最小割 心生绝望,用了好久的网络流模板居然是错的. ↑居然之前还侥幸能过一堆(并不)题. ...

  8. Circular Queue Implementation Principle

    目录 . 引言 . 环形队列的实现原理 . 环形队列编程实现 . 环形队列的内核实现 1. 引言 环形队列是在实际编程极为有用的数据结构,它有如下特点 . 它是一个首尾相连的FIFO(First In ...

  9. RabbitMQ Exchange中的fanout类型

    fanout 多播 在之前都是使用direct直连类型的交换机,通过routingkey来决定把消息推到哪个queue中. 而fanout则是把拿到消息推到与之绑定的所有queue中. 分析业务,怎样 ...

  10. 关于git不区分文件名大小写的处理

    今天遇到了git不区分文件名大小写的问题,一开始着实郁闷了一把. 处理办法: windows下在git中修改文件的大小写 git mv --force myfile MyFile 或者 git mv ...