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 相关文章推荐
?牟┛途W扣了一??效果出?? target=
May 27 Javascript
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
juery框架写的弹窗效果适合新手
Nov 27 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 Javascript
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
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面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
如何用php生成扭曲及旋转的验证码图片
2013/06/07 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
javascript加号&quot;+&quot;的二义性说明
2013/03/04 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
node.js超时timeout详解
2014/11/26 Javascript
JavaScript简介
2015/02/15 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
python实现大文件分割与合并
2019/07/22 Python
如何在django中添加日志功能
2020/02/06 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
代码中finally中的代码会不会执行
2012/02/06 面试题
优秀驾驶员先进事迹材料
2014/05/04 职场文书
奠基仪式策划方案
2014/05/15 职场文书
宣传普通话标语
2014/06/27 职场文书
岗位安全生产责任书
2014/07/28 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
党员年度个人总结
2015/02/14 职场文书
办公室岗位职责范本
2015/04/11 职场文书