节点属性
在文档对象模型 (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标签,并输出相应节点的名称、节点的值、节点的类型:

 <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>节点属性</title>
</head>
<body>
<ul>
<li>javascript</li>
<li>HTML/CSS</li>
<li>jQuery</li>
</ul>
<script type="text/javascript">
var node = document.getElementsByTagName("li");
for(var i = 0; i < node.length; i++){
document.write("节点名称:" + node[i].nodeName + "<br/>");
document.write("节点的值:" + node[i].nodeValue + "<br/>");
document.write("节点类型:" + node[i].nodeType + "<br/>");
}
</script>
</body>
</html>

运行结果:

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

elementNode.childNodes

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

代码如下:

运行结果:
IE:

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

其它浏览器:

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

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

如下图所示:


如果把代码改成这样:

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

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

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

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

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

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

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

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

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

 <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="con"><p>javascript</p><div>jQuery</div><h5>PHP</h5></div>
<script type="text/javascript">
var x=document.getElementById("con");
document.write(x.firstChild.nodeName + "<br/>");
document.write(x.lastChild.nodeName + "<br/>");
</script>
</body>
</html>

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

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

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

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

运行结果:

parentNode 获取指点节点的父节点
DIV

访问祖节点:

elementNode.parentNode.parentNode

代码如下:

 <div id="text">
<p>
parentNode
<span id="con"> 获取指点节点的父节点</span>
</p>
</div>
<script type="text/javascript">
var mynode= document.getElementById("con");
document.write(mynode.parentNode.parentNode.nodeName);
</script>

运行结果:

parentNode获取指点节点的父节点
DIV

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

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

 <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<ul id="con">
<li id="lesson1">javascript
<ul>
<li id="tcon"> 基础语法</li>
<li>流程控制语句</li>
<li>函数</li>
<li>事件</li>
<li>DOM</li>
</ul>
</li>
<li id="lesson2">das</li>
<li id="lesson3">dadf</li>
<li id="lesson4">HTML/CSS
<ul>
<li>文字</li>
<li>段落</li>
<li>表单</li>
<li>表格</li>
</ul>
</li></ul>
<script type="text/javascript">
var mylist = document.getElementById("tcon");
document.write(tcon.parentNode.parentNode.parentNode.lastChild.innerHTML)
</script>
</body>
</html>

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

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

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

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

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

 <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>nextSibling</title>
</head>
<body>
<ul id="u1">
<li id="a">javascript</li>
<li id="b">jquery</li>
<li id="c">html</li>
</ul>
<ul id="u2">
<li id="d">css3</li>
<li id="e">php</li>
<li id="f">java</li>
</ul>
<script type="text/javascript">
function get_nextSibling(n){
var x=n.nextSibling;
while (x && x.nodeType!=1){
x=x.nextSibling;
}
return x;
} var x=document.getElementsByTagName("li")[0];
document.write(x.nodeName);
document.write(" = ");
document.write(x.innerHTML); var y=get_nextSibling(x); if(y!=null){
document.write("<br />nextsibling: ");
document.write(y.nodeName);
document.write(" = ");
document.write(y.innerHTML);
}else{
document.write("<br>已经是最后一个节点");
}
</script>
</body>
</html>

运行结果:

LI = javascript
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. 调用有道翻译API

    前两天朋友说起NASA开放了数据API,今儿突然想起从来没用过外部提供的API,然而简单用得多的貌似是有道词典API,就像试试,本来觉得应该挺简单的,用urllib模块很快就实现了. 不过测试时才发现 ...

  2. RAC RMAN备份

    这篇主要介绍的是RAC 环境下的RMAN 备份. 关于Oracle 备份与恢复的一些理论知识参考我的Blog:       Oracle 备份 与 恢复 概述 http://blog.csdn.net ...

  3. eclipse安装ADT插件重启后不显示Android SDK Manager和Android Virtual Device Manager图标的一种解决办法

    通常安装,搭建安卓环境后,不显示Android SDK Manager和Android Virtual Device Manager ize解决方法:Eclipse ->window->c ...

  4. 实现html元素跟随touchmove事件的event.touches[0].clientX移动

    主要是使用了transform:translateX 实现 <!DOCTYPE html> <html lang="en"> <head> &l ...

  5. Ftp连接错误

    FTP连接上传 文件报错  windows无法访问此文件夹.请确保输入的文件名是否正确,并且您有权访问此文件.. 解决办法 : IE设置为脱机使用,文件浏览器登录ftp时调用IE浏览器,所以无法连接, ...

  6. PHP中取出字符串中的空格 逗号

    preg_replace("/\s| |,|,/","",$_str) PHP中取出字符串中的空格 逗号 (包括中文状态下)

  7. PHP二维数组排序函数

    PHP一维数组的排序可以用sort(),asort(),arsort()等函数,但是PHP二维数组的排序需要自定义. 以下函数是对一个给定的二维数组按照指定的键值进行排序,先看函数定义: functi ...

  8. AES CBC 128的实现

    原由 AES已经变成目前对称加密中最流行算法之一,AES可以使用128.192.和256位密钥,并且用128位分组加密和解密数据. 项目中需要使用AES对密码信息进行加密,由嵌入式设备使用C语言进行加 ...

  9. Spring AOP 原理

    AOP将应用系统分为两部分,核心业务逻辑(Core businessconcerns)及横向的通用逻辑,也就是所谓的方面Crosscutting enterprise concerns,例如,所有大中 ...

  10. opencv 批量图像读写

    处理图像数据集时通常要读写整个文件夹里的图像,这时就会用的图像的批量读写. 比较常用的方法就是生成一个包含所有图像的txt列表 生成txt文件的方法如下: 利用cmd进入dos 利用路径进入指定文件夹 ...