当前位置:首页 > 日记 > 正文

js访问DOM节点方法详解

js访问DOM节点方法详解
本文演示了用js访问DOM节点的方法,供大家参考,如下所示:

查找和访问节点

您可以找到许多方法来查找要操作的元素:

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

利用其父节点,第一个孩子,和一个元素节点的属性lastchild

GetElementById()和getElementsByTagName()

这两种方法,包括()和getElementsByTagName(),可以发现在整个HTML文档的任何HTML元素。

这两种方法忽略了文档的结构。如果你想查找文档中的所有元素,getElementsByTagName()会发现他们所有人,不论水平在该元素在文档。同时,getElementById()方法也会返回正确的元素,不管它在哪里隐藏在文档结构。

这两种方法将为您提供所需的任何HTML元素,无论文档中的HTML元素在何处!

GetElementById()可以通过指定ID返回元素:

GetElementById()语法
document.getelementbyid(ID);

注:getElementById()不能在XML,XML文档,你必须具有的ID类型的属性搜索,这种类型必须在XML DTD声明。

相对应()方法返回的所有元素(使用指定的标签名称)作为一个节点列表。这些元素是在使用此方法时使用的元素的后代。

GetElementsByTagName()可以用于任何HTML元素:

GetElementsByTagName()语法
document.getelementsbytagname(标签名称);

或:
document.getelementbyid('id')。GetElementsByTagName(标签名称);

例1

下面的示例返回文档中所有元素的节点列表:
document.getelementsbytagname(P);

例2

以下示例返回所有元素的节点列表,这些元素必须是ID的元素的后代为maindiv :
document.getelementbyid('maindiv)。GetElementsByTagName(P);

节点列表(列表)

当我们使用一个节点列表时,我们通常将这个列表保存在一个变量中,比如:
var x = document.getelementsbytagname(P);

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

注:引号从0开始。

您可以使用长度属性循环遍历节点列表:
var x = document.getelementsbytagname(P);
对于(var i = 0;i < x.length;i++)
{
每个段落的内容
}

还可以通过引号访问特定元素。

要访问第三个元素,您可以编写这个:
var = { 2 };

ParentNode,第一个孩子,和lastchild

这三个属性的父节点,第一个孩子,和lastchild,可以按照文件结构和文件中的短距离旅行。

请看下面的HTML片段。

约翰
雌鹿
阿拉斯加

在上面的HTML代码,第一是元素的第一个子元素(第一个孩子),和最后一个元素的最后一个子元素(lastchild)。

此外,它的每个元素的父节点(父节点)。

有关感兴趣的读者的Javascript相关内容的更多内容可以查看主题:

希望本文能对javascript程序设计有所帮助。

相关文章

MySQL非安装程序使用步骤和忘记密

MySQL非安装程序使用步骤和忘记密

忘记密码,安装程序,步骤,解决方案,电脑软件,第一步是解压压缩包到相应的磁盘。 第二步打开CMD到bin目录下的文件夹并运行mysql安装解压。 第三步打开服务:CMD进入解压文件夹并执行启动MySQL。 第四步是安装图像界面的Navicat。 忘记密码…

PS滤镜制作黑白城市艺术

PS滤镜制作黑白城市艺术

滤镜,黑白,艺术,城市,电脑软件,虽然效果图只用了一个简单的动态模糊滤镜,但是效果非常有创意,建筑有动态效果,画面也很简单。你喜欢的学生可以试试看。最后效果。 PS滤镜制作黑白城市艺术图片 原来的地图 首先打开材质图片并复制背景图层。选…

一个简单的ajax实现方法,选择删除

一个简单的ajax实现方法,选择删除

选择,删除,方法,简单,电脑软件,本例介绍了ajax实现的简单方法,选择删除。供大家分享,供大家参考,如下: 删除 箭头选择复选框 到删除条目,同一类型,操作方便,和聪明的输入的ID值,方便地访问。 所有的功能(){ 如果($(' # ckb_selectall '),('检查')){ $(…

如何在WPS文本中制作索引目录WPS表

如何在WPS文本中制作索引目录WPS表

教程,索引,目录,如何在,电脑软件,编辑文档时,常常需要添加索引和目录。然后我们可以通过WPS文本中的操作来实现它。让萧边告诉你如何在WPS文字添加索引和目录。 WPS文本索引目录制作教程 1。打开WPS软件,选择标题1中的类型(标题1是目录中标…

词是如何用一种技巧来建立一个奇数

词是如何用一种技巧来建立一个奇数

奇数,偶数,建立一个,如何用,技巧,当我们打印word文档时,有时为了方便查看或保存纸张资源,将打印的文件两边都是奇数甚至偶数页分别打印,那么我们怎么能在word文档集打印奇数页或偶数页与小系列一起阅读呢。 Word设置打印奇数页或偶数页的步骤…

HTML实现颜色块动态显示的报告效果

HTML实现颜色块动态显示的报告效果

动态显示,示例代码,报告,颜色,效果,使用HTML颜色块动态显示数据 * { 填充:0; 保证金:0; } 。tubiao,。Jihua。Shiji。Riqi { 宽度:100%; 溢出:隐藏; 边距:10px; } 左{。 宽度:10%; 浮点数:左; 文本对齐:中心; 身高:25px; 行高:25px; } 右{。 宽度:90%; 浮子:右边; 身…

Windows7安装教程Oracle11g

Windows7安装教程Oracle11g

安装教程,电脑软件,Oracle11g,今天,下一个Oracle已经安装好了。比方说,我也了解了一些关于互联网的下一个step.ps,加上我自己的理解,我把所有的截图安装的详细过程,希望。 它可以帮助你顺利安装它。 然后解压 点击setup.exe 我使用了D盘的默认…

了解如何从PPT中去除不必要的视觉

了解如何从PPT中去除不必要的视觉

不必要,视觉效果,电脑软件,PPT,在传统的PPT制作,我们通常强调简洁的画面,直观的信息和清晰的关系图,但为了使元素在页面看起来乏味,他们经常添加一些颜色和效果来丰富页面,但他们恰恰相反。以下是小编给你带来了不必要的删除了视觉效果,希望对你…

WPS文本如何插入图表WPS文本教程

WPS文本如何插入图表WPS文本教程

文本,教程,图表,电脑软件,WPS,在WPS文本中,你经常画一些表格来帮助文字描述。如何在WPS文本中插入图表让我们告诉你萧边插入WPS图成图。 在WPS文本中插入图形的一种方法: 1,打开WPS文本,单击菜单栏——插入图表——在文本中生成一个自确定的…

原结合PS图象处理软件重点改进缺陷

原结合PS图象处理软件重点改进缺陷

缺陷,图象,处理软件,重点,电脑软件,眼睛是心灵的窗户。无论是肖像还是宠物,我们经常需要把眼睛的部分看得很清楚,相对来说,拍一些照片比较好,而拍起来要困难得多。当我们长时间自动按下快门时,我们无法以较慢的速度获得理想的动态。 在这种情况…

MySQL的列被修改为一行,并显示了数

MySQL的列被修改为一行,并显示了数

数据,修改,显示,简单实现,电脑软件,创建测试表: 如果存在测试下拉表; 创建表(测试) '年份' int(11)默认NULL, int(11)默认NULL, '金额'双默认NULL InnoDB引擎=默认的字符集utf8); 插入数据: 插入`测试`值('1991',‘1','1.1); 插入`测试`值('1991,2,'1.…

excel2007版中excel快速删除空白行

excel2007版中excel快速删除空白行

方法,删除,两种,版中,空白,在使用excel的过程中,数据修改和删除过程中通常会有许多空白。如何快速删除空白行今天,萧边教你两如何删除空白行快速在Excel 2007版。 一种快速删除excel 2007版空白行的方法 通过位置条件快速删除空白行 首先,…