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. 访问Access日期字段

    在使用sql访问Access日期字段,应在变量前后加#,例子: s:=Format(select xueshID,name,times,qukbz,skdate,banji from dianmjil ...

  2. [基础架构]PeopleSoft都有哪些进程运行在进程服务器上

    PSPRCSRV:(PSPRCSRV.EXE) 该进程负责启动所有服务进程. 每隔15s,该进程就会去看进程调度器中是否有需要运行的进程请求.如果没有需要运行的则sleep15s,然后再次检查. 如果 ...

  3. Spring Security @PreAuthorize 拦截无效

    1. 在使用spring security的时候使用注解,@PreAuthorize("hasAnyRole('ROLE_Admin')") 放在对方法的访问权限进行控制失效,其中 ...

  4. Python基础之模块、数据类型及数据类型转换

    一.模块 1.标准库 不需要安装,直接调入使用的模块. import sys模块: import sys print(sys.path) #打印环境变量绝对路径 print(sys.argv) #打印 ...

  5. 2、微信小程序之弹幕的实现(无后台)

    对弹幕功能主要利用环信来实现的,读者也许对环信这个东西很陌生,请先自行了解这环信再来看这文章. 环信开发文档:http://docs.easemob.com/im/400webimintegratio ...

  6. 回味Python2.7——笔记1

    一.基本知识 1.一个值可以同时赋给几个变量: >>> x = y = z = 0 # Zero x, y and z >>> x 0 >>> y ...

  7. Linux常用命令和常见问题解决<------>第一章

    查看文件下面所有的隐藏目录:ls -al ~ ls -al ~ls -a -l ~可以发现三条命令执行结果是一致的,原因:因为ls为命令 后面的参数要以空格来区分,不论几个空格 shell都会视为一体 ...

  8. [技术] 如何正确食用cnblogs的CSS定制

    用过cnblogs的估计都知道cnblogs提供了相对比较开放的个性化选项,其中最为突出的估计就是页面CSS定制了.但是没学过Web前端的人可能并不会用这个东西... 所以我打算在此分享一些定制CSS ...

  9. 用Eclipse生成JPA元模型

    在JPA criteria 动态查询中,有个"元模型"的东西,它是根据"实体"类动态生成的一个类,它的主要作用是实现JPA criteria查询的"类 ...

  10. ASP.NET前台table通过Ajax获取绑定后台查询的json数据

    上一篇<ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据>写了前台提交数据后台保存到数据库,数据处理以后用户肯定要查询.接下来就写一个前台table通过ajax  J ...