JavaScriopt DOM有三大节点：元素节点、属性节点、文本节点。

其中获取元素节点的三种主要方法有：

1.document.getElementById();此方法根据节点的唯一id值获取节点。

　　如<li id = "hamigua">哈密瓜</li>,document.getElementById("hamigua");

2.document.getElementByTagName();此方法根据节点的标签名获取节点。

　　如<li></li>标签，document.getElementByTagName("li");

3.document.getElementsByName();此方法根据节点的name属性获取节点。

　　如<input type = "text" name = "n_hamigua" value = "哈密瓜"/>,document.getElementsByName("n_hamigua");

　　但是这个方法只能获取有name属性的节点，如<li name = "li_hamigua"></li>,document.getElementsByName(li_hamigua);是获取不到的，使用时应注意这个问题。

而属性节点和文本节点都是需要先获取到元素节点之后，再获取。

属性节点：<input type = "text" id = "input_hamihua" value = "value_hamigua"/>;document.getElementById("input_hamigua").getAttributeNode("value");

这样才可以获取到input标签的value属性, 即获取到"value_hamigua"这个属性值。

文本节点：<li id = "li_hamigua">哈密瓜</li>;document.getElementById("li_hamigua").firstChild;

这样才可以获取到input标签的文本节点，即获取到"哈密瓜"这个文本值。

在这里解释一下三个节点的区别：

　　①元素节点：类似于<body></body>、<li></li>、<input/>这样的节点。

　　②属性节点：类似于<input type="text" name="text"/>中的"name='text'"这样的节点。

　　③文本节点：类似于<li>HelloWorld</li>中的"HelloWorld"这样的节点。

JavaScript之获取节点的更多相关文章

  1. 【转】JavaScript获取节点类型、节点名称和节点值

    DOM节点信息包括节点类型(nodeType).节点名称(nodeName)和节点值(nodeValue). 节点类型 DOM节点中,每个节点都拥有不同的类型.W3C规范中常用的 DOM节点类型有以下 ...

  2. 总结获取原生JS(javascript)的父节点、子节点、兄弟节点

    关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了-- 话不多说看代码 获取父节点 及 父节点下所有子节点(兄弟节点) <ul> <l ...

  3. JavaScript -- 练习，Dom 获取节点

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. document获取节点byId&byName

    <script type="text/javascript"> /* *需要:获取页面中的DIV节点: *思路: *通过docment对象完成.因为div节点有ID属性 ...

  5. 封装常用的js（Base.js）——【01】理解库，获取节点，连缀，

    封装常用的js(Base.js)——[01]理解库,获取节点,连缀,  youjobit07 2014-10-10 15:32:59 前言:       现如今有太多优秀的开源javascript库, ...

  6. javascript中获取非行间样式的方法

    我们都知道一般在javascript中获取样式一般用的是nodeObj.style.attr这个属性的,但是这个属性只能获取行间样式非行间样式比如写在样式表中的样式那么用nodeObj.style.a ...

  7. JS获取节点方法

    1. 通过顶层document节点获取:(1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有 ...

  8. js dom操作获取节点的一些方法

    在复习javascript基础的时候,整理了一下js中获取节点的一些常用的方法,见代码: //js获取下一个兄弟节点 function getNextSibling(eleObj){ var next ...

  9. JavaScript快速查找节点

    我们在实际的开发中,经常要获取页面中某个html元素,动态更新元素的样式.内容属性等. 我们已经知道在JavaScript中提供下面的方法获取子.父.兄节点的方法: 常规 通过父节点获取子节点: pa ...

随机推荐

  1. .NET 跨平台界面框架和为什么你首先要考虑再三

    ​​​原文地址 现在用 C# 来开发​跨平台应用已经有很成熟的方案,即共用非界面代码,而每个操作系统搭配特定的用户界面代码.这个方案的好处是可以直接使用操作系统原生的控件和第三方控件,还能够和操作系统 ...

  2. JAVA程序打包成exe小程序的过程

    编程软件:myeclipse2014 打包exe软件:exe4j 1:在myeclipse2014新建java项目编写程序 2:打包成jar,分两种情况(有无外部依赖包) 无外部依赖包:点击项目--- ...

  3. Unity3D-Shader-人物残影效果

    [旧博客转移 - 2016年1月7日 00:24 ] 前面的话 上一篇讲了一下人物边缘发光效果,链接: Unity-ShaderLab-实现X光效果,这次我们利用这个Shader来实现人物残影效果 先 ...

  4. python多线程爬虫设计及实现示例

    爬虫的基本步骤分为:获取,解析,存储.假设这里获取和存储为io密集型(访问网络和数据存储),解析为cpu密集型.那么在设计多线程爬虫时主要有两种方案:第一种方案是一个线程完成三个步骤,然后运行多个线程 ...

  5. ArrayList源码浅析（jdk1.8）

    ArrayList的实质就是动态数组.所以可以通过下标准确的找到目标元素,因此查找的效率高.但是添加或删除元素会涉及到大量元素的位置移动,所以效率低. 一.构造方法 ArrayList提供了3个构造方 ...

  6. shiro整合oauth

    一.基本思路脑图 二.客户端shiro配置 shiro配置文件 <?xml version="1.0" encoding="UTF-8"?> < ...

  7. Android实现模拟表单上传

    很久以前,写过一篇关于下载的文章:基于HTTP协议的下载功能实现,今天对于Android上的文件上传,也简单的提两笔.在Android上,一般使用Http 模拟表单或者FTP来进行文件上传,使用FTP ...

  8. （转）CentOS 7.0关闭默认防火墙启用iptables防火墙

    场景:在本地虚拟机上使用ftp软件需要进行相应的端口设置,不可避免要访问Cnetos的防火墙,默认firewall操作不方便,所以需要进行相应的替换. 1 配置防火墙,开启80端口.3306端口 1. ...

  9. 1分钟选好最合适你的JavaScript框架

    欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~​ Javascript框架(以下简称框架)也被称为Javascript库,是一组包含丰富功能和函数的JavaScript代码集, ...

  10. 【JS】ajax 实现无刷新文件上传

    一.摘要 最近在做个东西,需要实现页面无刷新文件上传,目前看到的方法有两种 1) 通过隐藏iframe 实现页面无刷新,适用于不关心上传结果 <form target="hiddenF ...