初探JavaScript(一)——也谈元素节点、属性节点、文本节点

  Javascript大行其道的时候,怎么能少了我来凑凑热闹^_^

  基本上自己对于js的知识储备很少,先前有用过JQuery实现一些简单功能,要论起JS的前世今生,来龙去脉,我就一小白。抱起一本《Javascript Dom编程艺术》,开始慢慢走近JS,与它套近乎,今天是第三天了,从目前来看,比较好相处。就此动笔,是一个回忆复习的过程,权当是自己的一份读书笔记。

  JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

  提到了JS,就很难绕开一个概念DOM(Document Object Model 文档对象模型),个人对这Dom和JS的了解还不是很透彻。按照官方说法:DOM是W3C组织推荐的处理可扩展标志语言的标准编程接口,可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说,这是表示和处理一个HTML或XML文档的常用方法。

  我的理解Dom就是能够将HTML或XML这样的文档进行模型化,将一个文档转换为一个类似树状结构等如下图所示,以便于配合JS语言进行模型中(如HTML网页)元素的添加或移除等操作。由于历史原因,DOM应运而生并成为一种标准。

  一些常用的方法如:

getElementById():根据给定id属性值得元素节点得到相对应的对象

  如:

<td id = "name"></td>

  通过document.getElementById("name")可以得到的整个td标记,主意这里得到的是一个对象

getElementsByTagName():根据跟定tag标记名称得到一个相对应的对象数组。

  如:

1 <tr>
2 
3 <td>one</td>
4 
5 <td>two</td>
6 
7 </tr>

  通过document.getElementsByTagName("td")就得到所有标记为td的一个对象数组

getAttribute():根据给定属性名称得到属性值

  如:

<p title="name">jackie is happy</p>

  通过document.getElementsByTagName("p")[0].getAttribute("title"),就可以得到name。

  注意:该方法不能通过document进行调用,只能通过一个元素节点对象来调用它。

setAttribute():设置某一个属性的值。

  如通过document.getElementsByTagName("p")[0].setAttribute("title","hobby"),则title的属性值就会由name变为hobby。

  另外这里介绍下困扰过我的一个简单的问题,众所周知,Dom有三大节点:元素节点+属性节点+文本节点

  虽然只是简单的概念,但是迫于强迫症,决定要把它们区分清楚,不想在脑海中一直残留着模糊的印象。

  针对三种节点分别从nodeType、nodeName和nodeValue三个方面进行区分比较:

  nodeType:   元素节点:1

  属性节点:2

  文本节点:3

  对于nodeName以及nodeValue根据不同的情况值也不同,下面举一个例子:

1.元素节点:

 1 <HTML>  
 2 <HEAD>  
 3 <TITLE>区分nodeName和nodeValue</TITLE>  
 4 </HEAD>  
 5 <BODY>  
 6     <table>  
 7         <tr>  
 8             <td id="Jackie" name="myname">Jackie Z</td>   
 9         </tr>  
10     </table>  
11     <script>  
12         var d = document.getElementById("Jackie");  
13         alert(d.nodeType);
14         alert(d.nodeName);  
15         alert(d.nodeValue) ; 
16     </script>  
17 </BODY>  
18 </HTML>  

  运行结果为:

  nodeType:1

  nodeName:td

  nodeValue:null

2.属性节点:

 1  <HTML>  
 2  <HEAD>  
 3  <TITLE>区分nodeName和nodeValue</TITLE>  
 4  </HEAD>  
 5  <BODY>  
 6      <table>  
 7          <tr>  
 8              <td id="Jackie" name="myname">Jackie Z</td>   
 9          </tr>  
10     </table>  
11     <script>  
12         var d = document.getElementById("Jackie").getAttributeNode("name");  
13         alert(d.nodeType);
14         alert(d.nodeName);  
15         alert(d.nodeValue) ; 
16     </script>  
17 </BODY>  
18 </HTML>  

  运行结果如下:

  nodeType:2

  nodeName:name

  nodeValue:myname

3.文本节点:

 1  <HTML>  
 2  <HEAD>  
 3  <TITLE>区分nodeName和nodeValue</TITLE>  
 4  </HEAD>  
 5  <BODY>  
 6      <table>  
 7          <tr>  
 8              <td id="Jackie" name="myname">Jackie Z</td>   
 9          </tr>  
10     </table>  
11     <script>  
12         var d = documentgetElementsByTagName("td")[0].firstChild;  
13         alert(d.nodeType);
14         alert(d.nodeName);  
15         alert(d.nodeValue) ; 
16     </script>  
17 </BODY>  
18 </HTML> 

  运行结果如下:

  nodeType:3

  nodeName:#text(对于所有文本节点nodeName都是固定的

  nodeValue:Jackie Z

  如果对你有用,欢迎点赞哦,也欢迎加群讨论。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java一日一条

19 个 JavaScript 编码小技巧

这篇文章适合任何一位基于JavaScript开发的开发者。我写这篇文章主要涉及JavaScript中一些简写的代码,帮助大家更好理解一些JavaScript的基...

10540
来自专栏达摩兵的技术空间

浅浅的分析下es6箭头函数

箭头函数作为es6重点的语法内容之一,很多开发者对其爱不释手,当也要注意其可能存在的问题,其正确的使用场景,否则会引起不必要的bug。

6510
来自专栏光变

Java编程风格

Java编程的风格介绍,主要参考乐google的java code style。对模糊部分作出了明确的选择。

22720
来自专栏cs

javascript基础知识点1.0

知识点综述: ---- 在复习JavaScript语法,主要看的是w3cschool的教程。 用法: 1.0必须位于<script></s...

362130
来自专栏原创

如何用JavaScript进行数组去重

今天的文章和大家谈一谈如何用JavaScript进行数组去重,这是一道常见的面试(笔试)题,可以很好地考察出一个人的逻辑思维及边界考虑情况,希望此文能够帮助大家...

27250
来自专栏数说工作室

【SAS Says】基础篇:读取数据(中)

特别说明:本节【SAS Says】基础篇:读取数据(上),用的是数说君学习《The little SAS book》时的中文笔记,我们认为这是打基础的最好选择。...

40150
来自专栏北京马哥教育

让你的Python代码更加pythonic

何为pythonic? pythonic如果翻译成中文的话就是很python。很+名词结构的用法在中国不少,比如:很娘,很国足,很CCTV等等。 我的理解为...

22340
来自专栏数据小魔方

左手用R右手Python系列5——数据切片与索引

今天这篇跟大家分享我的R VS Pyhton学习笔记系列5——数据索引与切片。 我之前分享过的所有学习笔记都不是从完全零基础开始的,因为没有包含任何的数据结构与...

47350
来自专栏老司机的简书

老司机出品——包教包会之玩转正则表达式

结束了CoreAnimation系列之后,老司机心里仿佛也轻松了许多。今天说说开发中的一个利器吧,正则表达式。

17630
来自专栏灯塔大数据

技术 | Python从零开始系列连载(二)

上一期学的upyter相信大家都已经会用了,我们这一期就可以愉快地学习写代码啦! Python的基本数据类型 数据类型在数据结构中的定义是一个值的集合以及定义在...

38360

扫码关注云+社区

领取腾讯云代金券