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 相关文章推荐
js活用事件触发对象动作
Aug 10 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 Javascript
js 中的switch表达式使用示例
Jun 03 Javascript
jQuery Validate插件实现表单验证
Aug 19 Javascript
详解Javascript中prototype属性(推荐)
Sep 03 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
解决Layui 表单提交数据为空的问题
Aug 15 Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
解析JS在获取当前月的最后一天遇到的坑
Aug 30 Javascript
JS动态图片的实现方法完整示例
Jan 13 Javascript
jquery实现轮播图特效
Apr 12 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容易忘记的知识点分享
2013/04/30 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
PDO::prepare讲解
2019/01/29 PHP
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
使用js 设置url参数
2013/07/08 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
javascript实现扫雷简易版
2020/08/18 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
Python编写百度贴吧的简单爬虫
2015/04/02 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
Django models文件模型变更错误解决
2020/05/11 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
基于python实现坦克大战游戏
2020/10/27 Python
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
企业行政文员岗位职责
2013/12/03 职场文书
中文专业毕业生自荐书范文
2014/01/04 职场文书
空气环保标语
2014/06/12 职场文书
名人演讲稿范文
2014/09/16 职场文书
计算机实训心得体会
2016/01/14 职场文书
Python字符串的转义字符
2022/04/07 Python