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 相关文章推荐
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
JQuery与Ajax常用代码实现对比
Oct 03 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
js获取视频时长代码
Apr 10 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
JavaScript日期时间与时间戳的转换函数分享
Jan 31 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
JQuery发送ajax请求时中文乱码问题解决
Nov 14 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 和 MySQL 基础教程(四)
2006/10/09 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
PHP生成器简单实例
2015/05/13 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
动态调用CSS文件的JS代码
2010/07/29 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
2016/06/15 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
详解Django配置JWT认证方式
2020/05/09 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
幼儿园开学家长寄语
2014/01/19 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
Python if else条件语句形式详解
2022/03/24 Python
基于Redission的分布式锁实战
2022/08/14 Redis