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的自定义事件代码,触发,绑定简单实例
Aug 01 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
angularjs中ng-attr的用法详解
Dec 31 Javascript
vue跨域解决方法
Oct 15 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
Typescript3.9 常用新特性一览(推荐)
May 14 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
php单一接口的实现方法
2015/06/20 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
Python实现二维数组输出为图片
2018/04/03 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
linux安装python修改默认python版本方法
2019/03/31 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
python程序 创建多线程过程详解
2019/09/23 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
python中四舍五入的正确打开方式
2021/01/18 Python
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
PHP经典面试题
2016/09/03 面试题
煤矿安全生产标语
2014/06/06 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
Python趣味挑战之教你用pygame画进度条
2021/05/31 Python
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis