节点属性
在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：
　　1. nodeName : 节点的名称
　　2. nodeValue ：节点的值
　　3. nodeType ：节点的类型

一、nodeName 属性: 节点的名称，是只读的。
　　1. 元素节点的 nodeName 与标签名相同
　　2. 属性节点的 nodeName 是属性的名称
　　3. 文本节点的 nodeName 永远是 #text
　　4. 文档节点的 nodeName 永远是 #document

二、nodeValue 属性：节点的值
　　1. 元素节点的 nodeValue 是 undefined 或 null
　　2. 文本节点的 nodeValue 是文本自身
　　3. 属性节点的 nodeValue 是属性的值

三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:
　　元素类型 节点类型
　　元素 　　　　1
　　属性　　　　 2
　　文本　　　　 3
　　注释　　　　 8
　　文档 　　　　9

获取所有LI标签，并输出相应节点的名称、节点的值、节点的类型：

  1.  <!DOCTYPE HTML>
  2.  <html>
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.  <title>节点属性</title>
  6.  </head>
  7.  <body>
  8.      <ul>
  9.          <li>javascript</li>
  10.          <li>HTML/CSS</li>
  11.          <li>jQuery</li>
  12.      </ul>
  13.      <script type="text/javascript">
  14.          var node = document.getElementsByTagName("li");
  15.          for(var i = 0; i < node.length; i++){
  16.              document.write("节点名称：" + node[i].nodeName + "<br/>");
  17.              document.write("节点的值：" + node[i].nodeValue + "<br/>");
  18.              document.write("节点类型：" + node[i].nodeType + "<br/>");
  19.      }
  20.      </script>
  21.  </body>
  22.  </html>

运行结果：

访问子结点childNodes
访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
语法：

  1. elementNode.childNodes

如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。

代码如下:

运行结果:
IE:

  1. UL子节点个数:3
  2. 节点类型:1

其它浏览器:

  1. UL子节点个数:7
  2. 节点类型:3

注意:
　　1. IE全系列、firefox、chrome、opera、safari兼容问题
　　2. 节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7

如下图所示:


如果把代码改成这样:

  1. <ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>

运行结果:（IE和其它浏览器结果是一样的）

  1. UL子节点个数:3
  2. 节点类型:1

Internet Explorer 会忽略节点之间生成的空白文本节点，而其它浏览器不会。我们可以通过检测节点类型，过滤子节点。
判断节点nodeType是否为1, 如是为元素节点，跳过。

访问子结点的第一和最后项
一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：

  1.  node.firstChild
  2.  //与elementNode.childNodes[0]是同样的效果。

二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：

  1.  node.lastChild
  2.  //与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。

找到指定元素(div)的第一个和最后一个子节点:

  1.  <!DOCTYPE HTML>
  2.  <html>
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.  <title>无标题文档</title>
  6.  </head>
  7.  <body>
  8.      <div id="con"><p>javascript</p><div>jQuery</div><h5>PHP</h5></div>
  9.      <script type="text/javascript">
  10.          var x=document.getElementById("con");
  11.          document.write(x.firstChild.nodeName + "<br/>");
  12.          document.write(x.lastChild.nodeName + "<br/>");
  13.      </script>
  14.  </body>
  15.  </html>

访问父节点parentNode
获取指定节点的父节点
语法：

  1.  elementNode.parentNode
  2.  //父节点只能有一个。

获取 P 节点的父节点，代码如下:

  1.  <div id="text">
  2.      <p id="con"> parentNode 获取指点节点的父节点</p>
  3.  </div>
  4.  <script type="text/javascript">
  5.      var mynode= document.getElementById("con");
  6.      document.write(mynode.parentNode.nodeName);
  7.  </script>

运行结果:

  1. parentNode 获取指点节点的父节点
  2. DIV

访问祖节点:

  1. elementNode.parentNode.parentNode

代码如下:

  1.  <div id="text">
  2.      <p>
  3.      parentNode
  4.      <span id="con"> 获取指点节点的父节点</span>
  5.      </p>
  6.  </div>
  7.  <script type="text/javascript">
  8.      var mynode= document.getElementById("con");
  9.      document.write(mynode.parentNode.parentNode.nodeName);
  10.  </script>

运行结果:

  1. parentNode获取指点节点的父节点
  2. DIV

浏览器兼容问题，chrome、firefox等浏览器标签之间的空白也算是一个文本节点。

使用访问父节点parentNode，将"HTML/CSS"课程内容输出：

  1.  <!DOCTYPE HTML>
  2.  <html>
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.  <title>无标题文档</title>
  6.  </head>
  7.  <body>
  8.      <ul id="con">
  9.      <li id="lesson1">javascript
  10.          <ul>
  11.              <li id="tcon"> 基础语法</li>
  12.              <li>流程控制语句</li>
  13.              <li>函数</li>
  14.              <li>事件</li>
  15.              <li>DOM</li>
  16.          </ul>
  17.      </li>
  18.      <li id="lesson2">das</li>
  19.      <li id="lesson3">dadf</li>
  20.      <li id="lesson4">HTML/CSS
  21.      <ul>
  22.          <li>文字</li>
  23.          <li>段落</li>
  24.          <li>表单</li>
  25.          <li>表格</li>
  26.      </ul>
  27.      </li></ul>
  28.      <script  type="text/javascript">
  29.          var mylist = document.getElementById("tcon");
  30.          document.write(tcon.parentNode.parentNode.parentNode.lastChild.innerHTML)
  31.      </script>
  32.  </body>
  33.  </html>

访问兄弟节点
1. nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
语法：

  1. nodeObject.nextSibling
  2. //如果无此节点，则该属性返回 null。

2. previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。
语法：

  1. nodeObject.previousSibling
  2. //如果无此节点，则该属性返回 null。

两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。
解决问题方法:
判断节点nodeType是否为1, 如是为元素节点，跳过。

  1.  <!DOCTYPE HTML>
  2.  <html>
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.  <title>nextSibling</title>
  6.  </head>
  7.  <body>
  8.      <ul id="u1">
  9.          <li id="a">javascript</li>
  10.          <li id="b">jquery</li>
  11.          <li id="c">html</li>
  12.      </ul>
  13.      <ul id="u2">
  14.          <li id="d">css3</li>
  15.          <li id="e">php</li>
  16.          <li id="f">java</li>
  17.      </ul>
  18.      <script type="text/javascript">
  19.          function get_nextSibling(n){
  20.              var x=n.nextSibling;
  21.              while (x && x.nodeType!=1){
  22.                  x=x.nextSibling;
  23.              }
  24.              return x;
  25.          }
  26.  
  27.          var x=document.getElementsByTagName("li")[0];
  28.          document.write(x.nodeName);
  29.          document.write(" = ");
  30.          document.write(x.innerHTML);
  31.  
  32.          var y=get_nextSibling(x);
  33.  
  34.          if(y!=null){
  35.              document.write("<br />nextsibling: ");
  36.              document.write(y.nodeName);
  37.              document.write(" = ");
  38.              document.write(y.innerHTML);
  39.          }else{
  40.            document.write("<br>已经是最后一个节点");
  41.          }
  42.      </script>
  43.  </body>
  44.  </html>

运行结果:

  1. LI = javascript
  2. nextsibling: LI = jquery

Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理的更多相关文章

  1. Javascript进阶篇——(DOM—getAttribute()、setAttribute()方法)—笔记整理

    getAttribute()方法通过元素节点的属性名称获取属性的值.语法: elementNode.getAttribute(name) 1. elementNode:使用getElementById ...

  2. Javascript进阶篇——(DOM—认识DOM、ByName、ByTagName)—笔记整理

    认识DOM文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 将HTML代码分解 ...

  3. Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理

    插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点.语法: appendChild(newnode) //参数: //newnode:指定追加的节点. 为ul添加一 ...

  4. 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素

    1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...

  5. Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理

    浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...

  6. 6、JavaScript进阶篇③——浏览器对象、Dom对象

    一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...

  7. JavaScript进阶内容——DOM详解

    JavaScript进阶内容--DOM详解 当我们已经熟练掌握JavaScript的语法之后,我们就该进入更深层次的学习了 首先我们思考一下:JavaScript是用来做什么的? JavaScript ...

  8. ＃笔记＃JavaScript进阶篇一

    #JavaScript进阶篇 http://www.imooc.com/learn/10 #认识DOM #window对象 浏览器窗口可视区域监测—— 在不同浏览器(PC)都实用的 JavaScrip ...

  9. 4、JavaScript进阶篇①——基础语法

    一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...

随机推荐

  1. A.indexOf(array[i])表达的含义

    userAgentInfo.indexOf(Agents[v]): //A.indexOf(array[i]):A元素是否存在于数组array里面:如果存在就会返回对应的下标,如果不存在则返回-1. ...

  2. 关于看似简单的eclipse中tomcat小猫图标消失的问题解决

    首先,这个问题出现在我新安装的虚拟机中,自己准备重新搭一套开发环境用于学习. 所以,出于好奇,自己从官网上把eclipse的最新版neo下下来尝尝鲜,刚安装好后发现与之前用的旧版基本相同,于是把相应的 ...

  3. uva 371 - Ackermann Functions

    #include <cstdio> int main() { long int F, S, I, Count, Value, Max, J; while(scanf("%ld % ...

  4. float和double数据类型的声明，转换和计算

    声明时,只要有小数部分float必须加F/f,而double却不用 //float的声明只要有小数部分就要加F,不然会报不能隐式的将double类型转换为float类型. float f1 = 1;/ ...

  5. JavaScript中var a=b=c=d的小发现

    看了别人的博客随手记录下 先看一下以下的代码 var a=1,b=2,c=3; (function(){ var a=b=1; })(); console.log(a); console.log(b) ...

  6. destoon实现调用当前栏目分类及子分类和三级分类的方法

    调用当前栏目分类及子分类和三级分类是程序设计里常用的方法,本文就来详细讲述destoon实现调用当前栏目分类及子分类和三级分类的方法.具体操作如下: 在destoon中提供了如下的调用语句: 一级分类 ...

  7. C语言初学 比较五个整数并输出最大值和最小值2

    #include <stdio.h> int main() { int i,a[5]; int max = 0,min = 0; printf("输入5个整数(空格隔开) :\n ...

  8. spi ssp

    SSP(Synchronous Serial Port 同步串行口)某些微处理器所含有的一个通信模块(或支持的通信模式),用来和外围串行部件或其他微处理器进行通信,这些外围部件可以是串行E2PROM. ...

  9. 戏说WSGI（Python Web服务网关接口）--[转载]

    戏说WSGI(Python Web服务网关接口) 当你在Python的世界中冒险,突然遭遇一只Web怪兽,你会选择什么武器对付它?在兵器谱上,下列兵器可谓名列前茅: Zope,厚重的长枪.较早出现的武 ...

  10. 树莓派入门教程——使用Qt开发界面程序

    前言        Qt是一个1991年由奇趣科技开发的跨平台C++图形用户界面应用程序开发框架.它既可以开发GUI程序,也可用于开发非GUI程序,比如控制台工具和服务器.Qt是面向对象的框架,使用特 ...