节点属性

在文档对象模型 (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

 

访问子结点childNodes

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

语法:

elementNode.childNodes

注意:

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

 <body>
<ul>
<li>javascript</li>
<li>jquery</li>
<li>html5</li>
</ul>
<script>
var childNode = document.getElementsByTagName("ul")[0].childNodes
document.write("ul子节点的长度"+childNode.length+"</br>") //=>7
document.write("ul第一个子节点的类型"+childNode[0].nodeType)//=>3
</script>
</body>

IE:

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

其它浏览器:

   UL子节点个数:7
节点类型:3

注意:

1. IE全系列、firefox、chrome、opera、safari兼容问题

2. 节点之间的空白符,在firefox、chrome、opera、safari浏览器是文本节点,所以IE是3,其它浏览器是7

访问子结点的第一和最后项

一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。

语法:

node.firstChild

说明:与elementNode.childNodes[0]是同样的效果。

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

语法:

node.lastChild

说明:与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。

 <body>
<ul>
<li>javascript</li>
<li>jquery</li>
<li>html5</li>
</ul>
<script>
var ul = document.getElementsByTagName("ul")[0]
var firstChild = ul.firstChild.nodeType
var lastChild = ul.lastChild.nodeName
document.write(firstChild+" "+lastChild) //=>3 , #test
</script>
</body>

访问父节点parentNode

获取指定节点的父节点

语法:

elementNode.parentNode

注意:父节点只能有一个。

访问祖节点:

elementNode.parentNode.parentNode
 <body>
<ul>
<li>javascript</li>
<li>jquery</li>
<li>html5</li>
</ul>
<script>
var li = document.getElementsByTagName("li")[0]
var parNode = li.parentNode.nodeName
var pparNode = li.parentNode.parentNode.nodeName
document.write(parNode+"</br>") //=>ul
document.write(pparNode) //=>body
</script>
</body>

访问兄弟节点

1. nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)。

语法:

nodeObject.nextSibling

说明:如果无此节点,则该属性返回 null。

2. previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层级中)。

语法:

nodeObject.previousSibling  

说明:如果无此节点,则该属性返回 null。

注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而其它浏览器不会忽略。

解决问题方法:

判断节点nodeType是否为1, 如是为元素节点,跳过。

 <body>
<ul>
<li>javascript</li>
<li>jquery</li>
<li>html5</li>
</ul>
<script>
var li = document.getElementsByTagName("li")[0]
var next = li.nextSibling
if(next.nodeType != 1){
next = next.nextSibling
}
document.write(next.innerHTML) //=>jquery </script>
</body>

DOM对象控制HTML无素——详解2的更多相关文章

  1. DOM对象控制HTML无素——详解3

    创建元素节点createElement createElement()方法可创建元素节点.此方法可返回一个 Element 对象. 语法: document.createElement(tagName ...

  2. DOM对象控制HTML无素——详解1

    getElementsByName()方法 返回带有指定名称的节点对象的集合. 语法: document.getElementsByName(name) 与getElementById() 方法不同的 ...

  3. JS DOM对象控制HTML元素详解

    JS DOM对象控制HTML元素详解 方法: getElementsByName()  获取name getElementsByTagName()  获取元素 getAttribute()  获取元素 ...

  4. Struts2使用Interceptor实现权限控制的应用实例详解

    Struts2使用Interceptor实现权限控制的应用实例详解 拦截器:是Struts2框架的核心,重点之重.因此,对于我们要向彻底学好Struts2.0.读源码和使用拦截器是必不可少的.少说了. ...

  5. C#依赖注入控制反转IOC实现详解

    原文:C#依赖注入控制反转IOC实现详解 IOC的基本概念是:不创建对象,但是描述创建它们的方式.在代码中不直接与对象和服务连接,但在配置文件中描述哪一个组件需要哪一项服务.容器负责将这些联系在一起. ...

  6. C#类、对象、方法和属性详解

    C#类.对象.方法和属性详解 一.相关概念: 1.对象:现实世界中的实体(世间万物皆对象) 2.类:具有相似属性和方法的对象的集合 3.面向对象程序设计的特点:封装 继承 多态 4.对象的三要素:属性 ...

  7. JS总结之二:DOM对象控制HTML

    DOM对象控制HTML 1.方法 getElementsByName( ) ——获取name getElementsByTagName( ) ——获取元素 getAttribute( ) ——获取元素 ...

  8. JavaScript 对象、DOM对象、jquery对象的区别、转换详解

    一.JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 访问对象的属性: [javascrip ...

  9. 18.C++-[ ]操作符使用 、函数对象与普通函数区别(详解)

    在上章17.C++-string字符串类(详解)学习了string类,发现可以通过[ ]重载操作符来访问每个字符. 比如: string s="SAD"; for(int i=0, ...

随机推荐

  1. 用Delphi直接获取bmp图片的像素

    用Delphi直接获取bmp图片的像素,并存储显示出.(此像素主要用在LED上显示).希望高手能给出代码啊!! function getImagePixels(f: string): Integer; ...

  2. 2014 牡丹江现场赛 i题 (zoj 3827 Information Entropy)

    I - Information Entropy Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%lld & %l ...

  3. poj 1064 Cable master【浮点型二分查找】

    Cable master Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 29554   Accepted: 6247 Des ...

  4. ArrStack——数组栈(procedure)

    //数组栈,对于无法预料栈的长度情况下,可能会因为原分配数组不够长而导致数据溢出,或因为数组太长而浪费空间.但是操作快,不需要额外的操作.而链表与此想法,可以动态分配内存,但是要增加额外的操作. #i ...

  5. Docker官方文档翻译之入门

    转自:http://www.cnblogs.com/vikings-blog/p/3958091.html Docker学习总结之docker入门 Understanding Docker 以下均翻译 ...

  6. oracle REPLACE 函数 介绍

    oracle REPLACE 函数是用另外一个值来替代串中的某个值. 例如,可以用一个匹配数字来替代字母的每一次出现.REPLACE 的格式如下所示: REPLACE ( char, search_s ...

  7. bzoj1222: [HNOI2001]产品加工

    注意时间都是 <= 5的.. #include<cstdio> #include<cstring> #include<cstdlib> #include< ...

  8. 常见的浏览器Hack技巧总结(转)

    如果你经常需要做前端页面,那么你一定多多少少需要解决页面的浏览器兼容问题.而浏览器兼容问题大部分也集中在对IE系列的兼容.这里就总结一下对IE系列的CSS Hack,记录一下,方便以后查阅. IE H ...

  9. ZFS+Dtrace+Zones+KVM=SMARTOS + dtrace 详细文档

    https://smartos.org/ http://dtrace.org/guide/chp-io.html http://blog.csdn.net/babyfacer/article/deta ...

  10. 首页在linux下的哪个文件夹

    /data/mindo/tomcat-live/webapps/ROOT/WEB-INF/templates/default/pages/index.jsp   svn检出地址 https://sif ...