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（一）——也谈元素节点、属性节点、文本节点的更多相关文章

  1. 认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构（节点树）。

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  2. contents() 查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容

    contents() V1.2概述 查找匹配元素内部所有的子节点(包括文本节点).如果元素是一个iframe,则查找文档内容   示例 描述:大理石平台检定规程 查找所有文本节点并加粗 HTML 代码 ...

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

    节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType : ...

  4. js | javascript获取和设置元素的属性

    获取和设置元素的内容: var nv = document.getElementById("pid"); alert(nv.innerHTML); nv.innerHTML=&qu ...

  5. 使用DOM解析XML文件，、读取xml文件、保存xml、增加节点、修改节点属性、删除节点

    使用的xml文件 <?xml version="1.0" encoding="GB2312" ?> <PhoneInfo> <Br ...

  6. 解析xml节点属性及子节点内容

    xml样例 <microNearlyThreeYearsOverdueInfo subReportType="13204" subReportTypeCost="9 ...

  7. XML SelectSingleNode的使用 根据节点属性获取该节点

    unit Unit1; interface uses  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Form ...

  8. 从元素抽取属性，文本和HTML

    问题 在解析获得一个Document实例对象,并查找到一些元素之后,你希望取得在这些元素中的数据. 方法 要取得一个属性的值,可以使用Node.attr(String key) 方法 对于一个元素中的 ...

  9. 004 作业二（单击弹跳li节点的每个文本节点的值；点击每个 li 节点, 若 li 节点的文本值没有 ^^ 开头, 加上，有，则去除）

    1.需求 点击每个 li 节点, 都弹出其文本值 2.程序 <!DOCTYPE html> <html> <head> <meta charset=" ...

  10. jacascript DOM节点——元素节点、属性节点、文本节点

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! DOM节点的三个种类:元素节点.文本节点.属性节点: 元素节点 元素节点就是 HTML 标签元素,元素节点 ...

随机推荐

  1. 转：给 C# 开发者的代码审查清单

      给 C# 开发者的代码审查清单   [感谢@L就是L 的热心翻译.如果其他朋友也有不错的原创或译文,可以尝试推荐给伯乐在线.] 这是为C#开发者准备的通用性代码审查清单,可以当做开发过程中的参考. ...

  2. Inno Setup 下载安装

    Inno Setup 是一个免费的 Windows 安装程序制作软件.第一次发表是在 1997 年,Inno Setup 今天在功能设置和稳定性上的竞争力可能已经超过一些商业的安装程序制作软件. 目前 ...

  3. [leetcode 24] Swap Nodes in k-Group

    1 题目: 目前被墙,看不了. 2 思路: 比较简单,注意处理边界点就好 3 代码: public ListNode swapPairs(ListNode head) { int temp; if(h ...

  4. Node.js系列之node.js初探

    官方介绍:Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable n ...

  5. 分享：写了一个 java 调用 C语言 开发的动态库的范例

    分享:写了一个 java 调用 C语言 开发的动态库的范例 cfunction.h   代码#pragma once#ifdef __cplusplusextern "C" {#e ...

  6. ListView 加载更多列表 Load More mono forandroid 项目笔记

    今天项目经理找我说Listview加载更多的时候会出现一些问题,主要表现在会顿一下.让我我就去找Java的方法看看.自己写出了mono 的加载更多功能.和大家分享一下 先看效果 首先是模型类ListI ...

  7. [教程]怎么用百度云观看和下载"磁力链接"无需下载直接观看.

    1, 打开网址 http://okbt.net/  输入你想要看的电影名字, 点搜索,鼠标右键点击拷贝磁力链接.或者 电脑装了迅雷的话.可以直接点击.用迅雷下载. 磁力链接都是这种格式的.例: mag ...

  8. .Net Core CLI windows安装

    下载官方的msi安装包official MSI installer双击安装就可以了. 默认会安装到C:\Program Files\dotnet\目录下,如果找不到可以用命令 where dotnet ...

  9. Web Essentials之JavaScript，TypeScript和CoffeeScript

    返回Web Essentials功能目录 一些Javascript功能也可以用于TypeScript. 本篇目录 功能 智能提示 TypeScript CoffeeScript 功能 JSHint J ...

  10. JS、LUA都可以开发移动应用

    蓝色互动,大众点评.韩都衣舍.汉庭.携程旅游.华夏基金.中国农业银行等好多知名APP开发商,正在使用, 领先的快速移动应用开发平台 http://www.deviceone.net?00001 应用开 ...