初探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标记名称得到一个相对应的对象数组。
如：
<tr> <td>one</td> <td>two</td> </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.元素节点：
<HTML>
<HEAD>
<TITLE>区分nodeName和nodeValue</TITLE>
</HEAD>
<BODY>
<table>
<tr>
<td id="Jackie" name="myname">Jackie Z</td>
</tr>
</table>
<script>
var d = document.getElementById("Jackie");
alert(d.nodeType);
alert(d.nodeName);
alert(d.nodeValue) ;
</script>
</BODY>
</HTML>
运行结果为：
nodeType：1
nodeName：td
nodeValue：null
2.属性节点：
<HTML>
<HEAD>
<TITLE>区分nodeName和nodeValue</TITLE>
</HEAD>
<BODY>
<table>
<tr>
<td id="Jackie" name="myname">Jackie Z</td>
</tr>
</table>
<script>
var d = document.getElementById("Jackie").getAttributeNode("name");
alert(d.nodeType);
alert(d.nodeName);
alert(d.nodeValue) ;
</script>
</BODY>
</HTML>
运行结果如下：
nodeType：2
nodeName：name
nodeValue：myname
3.文本节点：
<HTML>
<HEAD>
<TITLE>区分nodeName和nodeValue</TITLE>
</HEAD>
<BODY>
<table>
<tr>
<td id="Jackie" name="myname">Jackie Z</td>
</tr>
</table>
<script>
var d = documentgetElementsByTagName("td")[0].firstChild;
alert(d.nodeType);
alert(d.nodeName);
alert(d.nodeValue) ;
</script>
</BODY>
</HTML>
运行结果如下：
nodeType：3
nodeName：#text（对于所有文本节点nodeName都是固定的）
nodeValue：Jackie Z
本文链接：《初探JavaScript（一）——也谈元素节点、属性节点、文本节点》
如果对你有用，欢迎点赞哦，也欢迎加群讨论。
友情赞助
如果你觉得博主的文章对你那么一点小帮助，恰巧你又有想打赏博主的小冲动，那么事不宜迟，赶紧扫一扫，小额地赞助下，攒个奶粉钱，也是让博主有动力继续努力，写出更好的文章^^。
1. 支付宝 2. 微信
初探JavaScript（一）——也谈元素节点、属性节点、文本节点的更多相关文章
- 认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构（节点树）。
认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...
- contents() 查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容
contents() V1.2概述 查找匹配元素内部所有的子节点(包括文本节点).如果元素是一个iframe,则查找文档内容 示例 描述:大理石平台检定规程 查找所有文本节点并加粗 HTML 代码 ...
- Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理
节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType : ...
- js | javascript获取和设置元素的属性
获取和设置元素的内容: var nv = document.getElementById("pid"); alert(nv.innerHTML); nv.innerHTML=&qu ...
- 使用DOM解析XML文件，、读取xml文件、保存xml、增加节点、修改节点属性、删除节点
使用的xml文件 <?xml version="1.0" encoding="GB2312" ?> <PhoneInfo> <Br ...
- 解析xml节点属性及子节点内容
xml样例 <microNearlyThreeYearsOverdueInfo subReportType="13204" subReportTypeCost="9 ...
- XML SelectSingleNode的使用 根据节点属性获取该节点
unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Form ...
- 从元素抽取属性，文本和HTML
问题 在解析获得一个Document实例对象,并查找到一些元素之后,你希望取得在这些元素中的数据. 方法 要取得一个属性的值,可以使用Node.attr(String key) 方法 对于一个元素中的 ...
- 004 作业二（单击弹跳li节点的每个文本节点的值；点击每个 li 节点, 若 li 节点的文本值没有 ^^ 开头, 加上，有，则去除）
1.需求 点击每个 li 节点, 都弹出其文本值 2.程序 <!DOCTYPE html> <html> <head> <meta charset=" ...
- jacascript DOM节点——元素节点、属性节点、文本节点
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! DOM节点的三个种类:元素节点.文本节点.属性节点: 元素节点 元素节点就是 HTML 标签元素,元素节点 ...
随机推荐
- 条件随机场matlab程序下载
19:44:23 1 http://www.cs.ubc.ca/~murphyk/Software/CRF/crf.html matlab程序包: 该条件随机场程序(CRF)是针对语句进行标注,mat ...
- iOS上简单推送通知（Push Notification）的实现
iOS上简单推送通知(Push Notification)的实现 根据这篇很好的教程(http://www.raywenderlich.com/3443/apple-push-notification ...
- linux上创建ftp服务器下载文件///使用AWS服务器作为代理，下载sbt相关的包
最近觉得自己下载有些jar的速度太慢了,就在aws上下好了,然后转到我电脑上来,在aws上开了ftp服务器.结果就倒腾了一上午,作个记录,以便后面查看. 1.安装vsftpd yum -y insta ...
- 解剖SQLSERVER 第十四篇 Vardecimals 存储格式揭秘（译）
解剖SQLSERVER 第十四篇 Vardecimals 存储格式揭秘(译) http://improve.dk/how-are-vardecimals-stored/ 在这篇文章,我将深入研究 ...
- 关于提高webview里下载apk安装包成功率的研究
移动互联网发展到当下,各种领域出现了一些大的app平台,这些app共同的特点就是拥有大量忠实活跃用户, 要知道,有用户就有money啊~ 于是乎其他不太知名的平台,开始在他们上面疯狂投放广告,做活动推 ...
- 岁末年初3Q大战惊现高潮，360震撼推出Android "3Q" IM即时通讯
岁末年初3Q大战惊现高潮,360震撼推出Android "3Q" IM即时通讯 看过了QQ和360斗争的开端高潮,当然现在还不能说这场斗争已经结束,在我看来这次的事件未尝不是一个适 ...
- 找回忘记的Ubuntu用户名和密码
找回忘记的Ubuntu用户名和密码 前端时间使用VMWare安装了个Ubuntn的虚拟机,但是烦于安装后显卡驱动的问题,看着操作界面就有点厌烦,就扔下了.今天打开虚拟机登陆的时候忘了密码,寻思着难道要 ...
- SQL SERVER 内存学习系列（二）-DMV查看内存信息
内存管理在SQL Server中有一个三级结构.底部是内存节点,这是最低级的分配器,用于SQL Server的内存.第二个层次是由内存Clerk组成,这是用来访问内存节点和缓存存储,缓存存储则用于缓存 ...
- 打造自己的视频会议系统 GGMeeting（附送源码）
自从在博客园发布广域网即时通信系统GG(QQ高仿版)以来,结识了很多做IM的朋友,然后我和我的伙伴们也接到了很多与IM相关的项目.相比在发布GG之前难以接到项目的状况相比,现在简直太幸福了,虽然做项目 ...
- 浅谈 SOLID 原则的具体使用
SOLID 是面向对象设计5大重要原则的首字母缩写,当我们设计类和模块时,遵守 SOLID 原则可以让软件更加健壮和稳定.那么,什么是 SOLID 原则呢?本篇文章我将谈谈 SOLID 原则在软件开发 ...