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 相关文章推荐
默认让页面的第一个控件选中的javascript代码
Dec 26 Javascript
javascript string字符串优化问题
Jul 31 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
Jan 15 Javascript
innerText和textContent对比及使用介绍
Feb 27 Javascript
node.js操作mysql(增删改查)
Jul 24 Javascript
BootStrap 附加导航组件
Jul 22 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 Javascript
three.js如何实现3D动态文字效果
Mar 03 Javascript
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
基于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分页函数
2006/10/09 PHP
8个出色的WordPress SEO插件收集
2011/02/26 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
如何判断php mysqli扩展类是否开启
2016/12/24 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
Python文件操作的面试题
2013/06/22 面试题
设计毕业生简历中的自我评价
2013/10/01 职场文书
敬老文明号事迹材料
2014/01/16 职场文书
护理专业大学生自我推荐信
2014/01/25 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
中学生操行评语
2014/04/24 职场文书
门面房租房协议书
2014/08/20 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android