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 相关文章推荐
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
js实现上传图片之上传前预览图片
Mar 25 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
屏蔽相应键盘按钮操作
Mar 10 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
简单三步实现报表页面集成天气
Dec 15 Javascript
基于JavaScript实现带缩略图的轮播效果
Jan 12 Javascript
微信小程序实现省市区三级地址选择
Jun 21 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
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
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
javascript动画对象支持加速、减速、缓入、缓出的实现代码
2012/09/30 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
2013/12/30 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
form+iframe解决跨域上传文件的方法
2016/11/18 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
python使用opencv进行人脸识别
2017/04/07 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
python入门教程 python入门神图一张
2018/03/05 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
python绘制直线的方法
2018/06/30 Python
python使用matplotlib画饼状图
2018/09/25 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
wxPython实现整点报时
2019/11/18 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
苹果Mac升级:MacSales.com
2017/11/20 全球购物
西雅图电动自行车公司:Rad Power Bikes
2020/02/02 全球购物
咖啡馆创业计划书
2014/01/26 职场文书
顶撞老师检讨书
2014/02/07 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
报名委托书
2015/01/29 职场文书
红色经典电影观后感
2015/06/18 职场文书