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. 「个人vim插件+配置」

    2016.10.4 filetype indent on syntax on set nu ai ci si set sw= ts= set autochdir set backspace= colo ...

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

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

  3. Thinking in java学习笔记之垃圾回收器如何工作

    垃圾回收器使得java在堆上分配空间的速度可以和其他语言从堆栈上分配空间的速度媲美.

  4. c# 文件转换成base64

    private static void ReadFromFile() { FileStream fsForRead = new FileStream("c9a78c8a-29b0-410d- ...

  5. 【BZOJ-2839】集合计数 容斥原理 + 线性推逆元 + 排列组合

    2839: 集合计数 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 229  Solved: 120[Submit][Status][Discuss] ...

  6. BZOJ1407 [Noi2002]Savage

    Description Input 第1行为一个整数N(1<=N<=15),即野人的数目. 第2行到第N+1每行为三个整数Ci, Pi, Li表示每个野人所住的初始洞穴编号,每年走过的洞穴 ...

  7. Visual Studio多版本进行切换的研究

    最近在升级公司内部的项目到最新的开发工具Visual Studio 2015,可能在团队开发上会遇到这些问题: 1.团队成员的电脑和系统,设置安装的开发工具参差不齐 2.有些成员的Visual Stu ...

  8. AngularJs form.FormController、ngModel.NgModelController

    form.FormController FormController跟踪所有他所控制的和嵌套表单以及他们的状态,就像有效/无效或者脏值/原始. 每个表单指令创建一个FormController实例. ...

  9. Post请求和get请求乱码方式解决

    POST提交,提交页面显示中文乱码 //设置请求的编码格式 request.setCharacterEncoding("utf-8"); //设置响应的编码格式,与第一句的编码格式 ...

  10. NOIp2010 关押罪犯

    二分+2-SAT 先预处理出所有的v,然后离散化一下,在那个的基础上二分,对于每次二分出的值约束边权超过所二分出的边权的两点. //OJ 1322 //by Cydiater //2015.8.26 ...