初探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标记，主意这里得到的是一个对象。

getElement s ByTagName（）：根据跟定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

初探JavaScript（一）——也谈元素节点、属性节点、文本节点相关推荐

【Groovy】自定义 Xml 生成器 BuilderSupport ( 构造 Xml 节点类 | 封装节点名称、节点值、节点属性、子节点 | 将封装的节点数据转为 Xml 字符串 )
文章目录一.构造 Xml 节点类 1.封装节点名称.节点值.节点属性.子节点 2.将封装的节点数据转为 Xml 字符串二.Xml 节点类完整代码一.构造 Xml 节点类生成 Xml 数据前 , ...
jsoup 标准化html代码,Jsoup从元素抽取属性，文本和HTML
在解析获得一个Document实例对象,并查找到一些元素之后,你希望取得在这些元素中的数据.要取得一个属性的值,可以使用Node.attr(String key) 方法对于一个元素中的文本,可以使用 ...
HTMLDOM中三种元素节点、属性节点、文本节点的测试案例
HTML dom中常用的三种节点分别是元素节点.属性节点.文本节点. 具体指的内容可参考下图: 以下为测试用例: <!DOCTYPE html> <html><head& ...
文档对象模型DOM（获取元素节点、设置节点属性）
练习题: 制作一个表格,显示班级的学生信息. 要求: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3. 点 ...
DOM中元素节点、属性节点、文本节点的理解
节点信息每个节点都拥有包含着关于节点某些信息的属性.这些属性是: nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可 ...
节点属性、offset*获取元素尺寸、offsetLeft获取元素定位
1.节点属性节点属性汇总 - nodeType nodeName nodeValue 元素节点 1 大写标签名 null 属性节点 2 属性名属性值文本节点 3 #text 文本内容注释节点 ...
[js高手之路] dom常用节点属性兼容性详解与应用
一.每个DOM节点都有一个nodeType属性,表示节点类型, NodeType一共有12种类型,我们可以通过遍历内置的Node构造函数获取 window.onload = function(){va ...
【JavaScript】获取网页元素
特殊元素: 分别获取body和html,全局仅有一个,比较特殊.格式固定,元素名可以自己另外起 var bodyElement=document.body var htmlElemnt=documen ...
轻松学习JavaScript二十：DOM编程学习之获取节点
我们这里所说的获取节点包含元素节点,属性节点和文本节点.通常,通过DOM我们就能够操作HTML元素.为了做到这件事情,您必须首先找到该元素.W3C提供了比较方便简单的定位节点的方法和属性,以便我们快 ...

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

初探JavaScript（一）——也谈元素节点、属性节点、文本节点相关推荐

最新文章

热门文章