正文

javascript进阶篇——(dom—节点---属性访问节点)—笔记整理

默  2022-02-09  278

关键词：

节点属性
在文档对象模型 (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属性。
语法：

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。
语法：

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>

运行结果:

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

访问祖节点:

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>

运行结果:

parentNode获取指点节点的父节点
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 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
语法：

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

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

nodeObject.previousSibling 
//如果无此节点，则该属性返回 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>

运行结果:

LI = javascript
nextsibling: LI = jquery

javascript进阶学习——dom对象

DOM对象1认识DOM2getElementByName方法3getElementByTagName方法4区别getElementByIdgetElementByNamegetElementByTagName5getAttribute方法6setAttrubute方法7节点属性8访问子节点childNodes9访问子节点的第一个最后项10访问父节点parentNode11访问兄弟节点12插入节点a 查看详情

javascript进阶篇——总结--dom案例+选项卡效果

断断续续的把慕课的JavaScript基础和进阶看完了，期间不怎么应用有的都忘记了，接下来多开始写些效果，进行实际应用。制作一个表格，显示班级的学生信息。1.鼠标移到不同行上时背景色改为色值为#f2f2f2，移开鼠标... 查看详情

＃笔记＃javascript进阶篇一

＃JavaScript进阶篇http://www.imooc.com/learn/10 ＃认识DOM ＃window对象　　浏览器窗口可视区域监测—— 在不同浏览器（PC）都实用的JavaScript方案：varw=document.documentElement.clientWidth||document.body.clientW 查看详情

javascript--jquerydom篇

DOM创建节点及节点属性通过JavaScript可以很方便的获取DOM节点，从而进行一系列的DOM操作。但实际上一般开发者都习惯性的先定义好HTML结构，但这样就非常不灵活了。浏览器提供的一些原生的方法：创建流程比较简单，大体如下... 查看详情

jquery——dom篇（转）

DOM创建节点及节点属性通过JavaScript可以很方便的获取DOM节点，从而进行一系列的DOM操作。但实际上一般开发者都习惯性的先定义好HTML结构，但这样就非常不灵活了。试想下这样的情况：如果我们通过AJAX获取到数据之后然后才能... 查看详情

jquery-dom篇

一.Dom创建节点及节点属性通过JavaScript可以很方便的获取DOM节点，从而进行一系列的DOM操作。但实际上一般开发者都习惯性的先定义好HTML结构，但这样就非常不灵活了。试想下这样的情况：如果我们通过AJAX获取到数据之后然后... 查看详情

十dom进阶

十六、DOM进阶　　DOM自身存在很多类型，在DOM基础课程中大部分都有所接触，比如Element类型：表示的是元素节点，再比如Text类型：表示的是文本节点。DOM也提供了一些扩展功能。 1.DOM类型　　DOM基础课程中，我们了解... 查看详情

javascript之dom操作

这一篇写写常用并且通用的操作节点的一些方法。1.节点方法1>appendChild()向childNodes列表的末尾添加一个节点，语法 varaChild=element.appendChild(aChild); 需要注意的是，如果被传入的节点在文档中已经存在，那结果会将该节点... 查看详情

慕课网javascript进阶篇第九章编程练习

把平常撸的码来博客上再撸一遍既可以加深理解，又可以理清思维。还是很纯很纯的小白，各位看官老爷们，不要嫌弃。最近都是晚睡，昨晚也不例外，两点多睡的。故，八点起来的人不是很舒服，脑袋有点晕呼呼，鉴于昨晚看... 查看详情

第一百一十四节，javascript文档对象，dom进阶

JavaScript文档对象，DOM进阶学习要点：1.DOM类型2.DOM扩展3.DOM操作内容查看详情

javascript进阶之dom

JavaScript进阶之DOM(一)目录总览一、WebAPI介绍1.API的概念API是一些预先定义的函数。无需理解其内部工作机制细节，只需直接调用使用即可。例如，javascript中函数alert()，2.WebAPI的概念WebAPI是浏览器提供的一套操... 查看详情

javascript进阶之dom

...以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。当网页被加载时，浏览器会创建页面的文档对象模型（DocumentObjec 查看详情

javascript-进阶篇

JavaScript的内置对象JavaScript中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法对象的属性：反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等；对象的方法：能够在对象上执行的... 查看详情

javascript进阶之dom(代码片段)

学习笔记js进阶语法一dom基础

内容整理自《从0到1Javascript快速上手》下半部分-进阶语法篇 getElementById()和getElementsByTagName()区别：1、 getElementById()获取的是一个元素，而getElementsByTagName()获取的是多个元素，即“类数组”（也成伪数组）... 查看详情

轻松学习javascript二十一：dom编程学习之获取元素节点的子节点和属性节点

我们这里所说的获取元素节点的全部子节点包括元素子节点和文本节点两种。还是拿上一篇博文的代码实例进行分析：<spanstyle="font-size:18px;"><spanstyle="font-size:18px;"><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transiti... 查看详情

dom节点篇

...，创建元素document.createElement(‘要创建的元素名‘);2.插入节点appendChild和insertBefore 3.删除节点removeChild 用法 removeChild(‘要删除的是哪个节点‘);例子，将两种节点的对比，以及删除//插入节点，有两种方式，appendChild和... 查看详情