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. C#-WinForm-三级联动

    三级联动 - 查询地区,选择省份自动显示该省份的市.区县 有如下一个数据库 一.写查询方法 public class ChinaData { SqlConnection conn = null; Sq ...

  2. C# 输入ip段生成ip地址

    具体代码如下: private void button1_Click(object sender, EventArgs e)        {            string StartIp = ...

  3. 【USACO 1.3】Ski Course Design

    n个点(n<=1000)大小范围[0,100],改变一些点的值,使得极差不超过17,代价为改变值的平方. 枚举修改后的最低高度low,维护最小代价. /* TASK: skidesign LAN ...

  4. Android热身:通过网络获取资源并更新UI组件

    Android热身:通过网络获取资源并更新UI组件 目标 点击"发送请求"按钮,下载某网页的html源码,并显示在TextView控件上:点击"清空",清除Te ...

  5. BZOJ1010 [HNOI2008]玩具装箱toy

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  6. Servlet教程

    有JSP的教程,就有Servlet教程. http://www.runoob.com/servlet/servlet-tutorial.html

  7. 对接微信红包时：CA证书出错，请登录微信支付商户平台下载证书

    今天在对接微信支付的微信红包发放时,出现““CA证书出错,请登录微信支付商户平台下载证书”的错误,特此记录一下: 如果你也在对接微信红包,并且你也在这个页面上下载了demo,再就是你也参照了里面的文档 ...

  8. android颜色代码

    <?xml version="1.0" encoding="utf-8" ?> <resources> <color name=& ...

  9. Bzoj2563 阿狸和桃子的游戏

    Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 701  Solved: 496 Description 阿狸和桃子正在玩一个游戏,游戏是在一个带权图G= ...

  10. Load Average

    在Linux系统下面,有很多的命令可以查看系统的负载情况:比如top,uptime,w,示例如下: [wenchao.ren@l-cmsweb1.ops.cn1 ~]$ w 18:39:10 up 7 ...