Javascript进阶篇——(DOM—节点---属性、访问节点)

节点属性
在文档对象模型 (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—节点---属性、访问节点)—笔记整理的更多相关文章

Javascript进阶篇——(DOM—getAttribute()、setAttribute()方法)—笔记整理
getAttribute()方法通过元素节点的属性名称获取属性的值.语法: elementNode.getAttribute(name) 1. elementNode:使用getElementById ...
Javascript进阶篇——(DOM—认识DOM、ByName、ByTagName)—笔记整理
认识DOM文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 将HTML代码分解 ...
Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理
插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点.语法: appendChild(newnode) //参数: //newnode:指定追加的节点. 为ul添加一 ...
二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象控制HTML元素
1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...
Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理
浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...
6、JavaScript进阶篇③——浏览器对象、Dom对象
一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...
JavaScript进阶内容——DOM详解
JavaScript进阶内容--DOM详解当我们已经熟练掌握JavaScript的语法之后,我们就该进入更深层次的学习了首先我们思考一下:JavaScript是用来做什么的? JavaScript ...
＃笔记＃JavaScript进阶篇一
#JavaScript进阶篇 http://www.imooc.com/learn/10 #认识DOM #window对象浏览器窗口可视区域监测—— 在不同浏览器(PC)都实用的 JavaScrip ...
4、JavaScript进阶篇①——基础语法
一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...

随机推荐

Android WifiDirect 学习（三）一些基础知识和问题
P2P架构介绍 P2P架构中定义了三个组件,一个设备,两种角色.这三个组件分别是: P2P Device:它是P2P架构中角色的实体,读者可把它当做一个Wi-Fi设备. P2P Group Owner ...
.net ADF 中 Ajax 的调用过程.
图示是 .net ADF Ajax调用过程的简略过程: 1,2)当页面初始化之后, 浏览器一旦触发回调事件, 脚本函数负责处理回调信息, 并调用 ASP.NET 2.0/3.5 中的 WebForm_ ...
武汉科技大学ACM ：1009: 零起点学算法63——弓型矩阵
Problem Description 输出n*m的弓型矩阵 Input 多组测试数据每组输入2个整数 n和m(不大于20) Output 输出n*m的弓型矩阵,要求左上角元素是1,(每个元素占2个 ...
sql语句各种九九乘法表
下面用while 和 if 条件写的SQL语句的四种九九乘法表 --9x9 左下角 ) BEGIN SET @S='' WHILE @J<=@I BEGIN )))))) END PRINT @ ...
angularjs——module
1.创建module //第一个参数是模块的名称 var head=angular.module('headApp',[]); head.controller("User",[&q ...
python中的redis定义
redis官方介绍,python的redis客户端可以一处定义,处处使用.到底是不是这样呢?是不是只要在配置文件里定义一次,不管在哪都可以使用了? 下面用代码说明: import redis impo ...
Python socket 广播信息到所有连接的客户端
Python3,多线程,多客户端,广播数据 #!/usr/bin/env python3 import time import threading import queue import socket ...
C 猜数游戏
char c; clock_t start,end; time_t a,b; double var; int i,guess; srand(time(NULL));loop: printf(" ...
IIC协议总结
1.起始和停止条件: 起始信号:时钟线SCL为高电平时,数据线SDA从高电平拉到低电平,表示通信开始. 停止信号:时钟线SCL为高电平时,数据线SDA从低电平拉到高电平,表示通信结束. 2.时钟线的上 ...
MCS-51单片机实用子程序库
目前已有若干版本的子程序库公开发表,它们各有特色.本程序库中的开平方算法为快速逼近算法,它能达到牛顿迭代法同样的精度,而速度加快二十倍左右,超过双字节定点除法的速度. 本子程序库对<单片机应用程 ...

Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理

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

随机推荐

热门专题