JS访问DOM节点方法详解


Posted in Javascript onNovember 29, 2016

本文实例讲述了JS访问DOM节点方法。分享给大家供大家参考,具体如下:

查找并访问节点

你可通过若干种方法来查找您希望操作的元素:

通过使用 getElementById() 和 getElementsByTagName() 方法

通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性

getElementById() 和 getElementsByTagName()

getElementById() 和 getElementsByTagName() 这两种方法,可查找整个 HTML 文档中的任何 HTML 元素。

这两种方法会忽略文档的结构。假如您希望查找文档中所有的 <p> 元素,getElementsByTagName() 会把它们全部找到,不管 <p> 元素处于文档中的哪个层次。同时,getElementById() 方法也会返回正确的元素,不论它被隐藏在文档结构中的什么位置。

这两种方法会像您提供任何你所需要的 HTML 元素,不论它们在文档中所处的位置!

getElementById() 可通过指定的 ID 来返回元素:

getElementById() 语法

document.getElementById("ID");

注释:getElementById() 无法工作在 XML 中。在 XML 文档中,您必须通过拥有类型 id 的属性来进行搜索,而此类型必须在 XML DTD 中进行声明。

getElementsByTagName() 方法会使用指定的标签名返回所有的元素(作为一个节点列表),这些元素是您在使用此方法时所处的元素的后代。

getElementsByTagName() 可被用于任何的 HTML 元素:

getElementsByTagName() 语法

document.getElementsByTagName("标签名称");

或者:

document.getElementById('ID').getElementsByTagName("标签名称");

实例 1

下面这个例子会返回文档中所有 <p> 元素的一个节点列表:

document.getElementsByTagName("p");

实例 2

下面这个例子会返回所有 <p> 元素的一个节点列表,且这些 <p> 元素必须是 id 为 "maindiv" 的元素的后代:

document.getElementById('maindiv').getElementsByTagName("p");

节点列表(nodeList)

当我们使用节点列表时,通常要把此列表保存在一个变量中,就像这样:

var x=document.getElementsByTagName("p");

现在,变量 x 包含着页面中所有 <p> 元素的一个列表,并且我们可以通过它们的索引号来访问这些 <p> 元素。

注释:索引号从 0 开始。

您可以通过使用 length 属性来循环遍历节点列表:

var x=document.getElementsByTagName("p");
for (var i=0;i<x.length;i++)
{
 // do something with each paragraph
}

您也可以通过索引号来访问某个具体的元素。

要访问第三个 <p> 元素,您可以这么写:

var y=x[2];

parentNode、firstChild以及lastChild

这三个属性 parentNode、firstChild 以及 lastChild 可遵循文档的结构,在文档中进行“短距离的旅行”。

请看下面这个 HTML 片段:

<table>
 <tr>
  <td>John</td>
  <td>Doe</td>
  <td>Alaska</td>
 </tr>
</table>

在上面的HTML代码中,第一个 <td> 是 <tr> 元素的首个子元素(firstChild),而最后一个 <td> 是 <tr>元素的最后一个子元素(lastChild)。

此外,<tr> 是每个 <td>元 素的父节点(parentNode)。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js+xml生成级联下拉框代码
Jul 24 Javascript
jquery链式操作的正确使用方法
Jan 06 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
基于JS实现数字+字母+中文的混合排序方法
Jun 06 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
vue中jsonp插件的使用方法示例
Sep 10 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 #Javascript
浅谈js函数的多种定义方法与区别
Nov 29 #Javascript
原生JS简单实现ajax的方法示例
Nov 29 #Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 #Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 #Javascript
js拖拽功能实现代码解析
Nov 28 #Javascript
百度搜索框智能提示案例jsonp
Nov 28 #Javascript
You might like
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
CURL状态码列表(详细)
2013/06/27 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
详解angular element()方法使用
2017/04/08 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
2019/03/07 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
微信小程序文章详情功能完整实例
2020/06/03 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
Python进程间通信之共享内存详解
2017/10/30 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
Python字典对象实现原理详解
2019/07/01 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
Python正则表达式如何匹配中文
2020/05/27 Python
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
荣耀商城:HIHONOR
2020/11/03 全球购物
院药学专业个人求职信
2013/09/21 职场文书
生产主管岗位职责
2013/11/10 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
公司宣传语大全
2015/07/13 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书