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通过closest选择器修改上级元素的方法
Mar 17 Javascript
js如何实现点击标签文字,文字在文本框出现
Aug 05 Javascript
简单谈谈javascript Date类型
Sep 06 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
jquery dialog获取焦点的方法
Feb 09 Javascript
js获取指定时间的前几秒
Apr 05 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
JS实现网页抢购功能(触发,终止脚本)
Nov 27 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 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
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
解读Python中degrees()方法的使用
2015/05/18 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
Python如何对XML 解析
2020/06/28 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
什么是SCM(软件配置管理)
2014/08/16 面试题
内容编辑个人求职信
2013/12/10 职场文书
高二政治教学反思
2014/02/01 职场文书
调解员先进事迹材料
2014/02/07 职场文书
协议书模板
2014/04/23 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
学生上课说话检讨书
2014/10/25 职场文书
环卫工作汇报材料
2014/10/28 职场文书
办公室岗位职责范本
2015/04/11 职场文书
python模板入门教程之flask Jinja
2022/04/11 Python
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server