JS实现访问DOM对象指定节点的方法示例


Posted in Javascript onApril 04, 2018

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

一 介绍

使用getElementById()方法来访问指定id的节点,并用nodeName属性、nodeType属性和nodeValue属性来显示出该节点名称、节点类型和节点值。

1、nodeName属性

该属性用来获取某一个节点的名称。

[sName=]obj.nodeName

sName:字符串变量用来存储节点的名称。

2、nodeType属性

该属性用来获取某一个节点的类型。

[sType=]obj.nodeType

sType:字符串变量,用来存储节点的类型,该类型值为数值型。该参数的类型如下表所示。

类 型 数 值 节 点 名 说 明
元素(element) 1 标记 任何HTML或XML的标记
属性(attribute) 2 属性 标记中的属性
文本(text) 3 #text 包含标记中的文本
注释(comment) 8 #comment HTML的注释
文档(document) 9 #document 文档对象
文档类型(documentType) 10 DOCTYPE DTD规范

3、nodeValue属性

该属性将返回节点的值。

[txt=]obj.nodeValue

txt:字符串变量用来存储节点的值,除文本节点类型外,其他类型的节点值都为“null”。

二 应用

访问指定节点,本示例在页面弹出的提示框中,显示了指定节点的名称、节点的类型和节点的值。

三 代码

<!DOCTYPE html>
<html>
<head>
<title>3water.com 访问指定节点</title>
</head>
<body id="b1">
<h3 >三号标题</h3>
<b>加粗内容</b>
<script language="javascript">
 <!--
 var by=document.getElementById("b1");
 var str;
 str="节点名称:"+by.nodeName+"\n";
 str+="节点类型:"+by.nodeType+"\n";
 str+="节点值:"+by.nodeValue+"\n";
 alert(str);
 -->
</script>
</body>
</html>

四 运行弹出如下提示框:

JS实现访问DOM对象指定节点的方法示例

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

Javascript 相关文章推荐
Prototype Array对象 学习
Jul 19 Javascript
Javascript remove 自定义数组删除方法
Oct 20 Javascript
JavaScript 学习笔记二 字符串拼接
Mar 28 Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
JS document文档的简单操作完整示例
Jan 13 Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 Javascript
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 18 Javascript
JS实现DOM删除节点操作示例
Apr 04 #Javascript
JS实现的DOM插入节点操作示例
Apr 04 #Javascript
AngularJS 应用模块化的使用
Apr 04 #Javascript
vue todo-list组件发布到npm上的方法
Apr 04 #Javascript
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 #Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 #Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 #Javascript
You might like
重置版宣传动画
2020/04/09 魔兽争霸
令PHP初学者头疼十四条问题大总结
2008/11/12 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
javascript 面向对象全新理练之继承与多态
2009/12/03 Javascript
基于jquery的超简单上下翻
2010/04/20 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
利用Python爬虫给孩子起个好名字
2017/02/14 Python
Python 爬虫图片简单实现
2017/06/01 Python
django实现前后台交互实例
2017/08/07 Python
详解Python如何生成词云的方法
2018/06/01 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
服装行业创业计划书范文
2014/02/05 职场文书
公益广告宣传方案
2014/02/28 职场文书
公司出纳岗位职责
2015/03/31 职场文书
会议简报格式范文
2015/07/20 职场文书
八年级历史教学反思
2016/02/19 职场文书
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL
Nginx HTTP跳转至HTTPS
2022/05/15 Servers