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 统计时间
Mar 09 Javascript
JQuery 弹出框定位实现方法
Dec 02 Javascript
javascript学习笔记(六) Date 日期类型
Jun 19 Javascript
jQuery函数的等价原生函数代码示例
May 27 Javascript
js防止表单重复提交的两种方法
Sep 30 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
JavaScript设计模式经典之命令模式
Feb 24 Javascript
解决拦截器对ajax请求的拦截实例详解
Dec 21 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
详解如何在微信小程序中愉快地使用sass
Jul 30 Javascript
浅析我对JS延迟异步脚本的思考
Oct 12 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
星际争霸秘籍
2020/03/04 星际争霸
用PHP 快速生成 Flash 动画的方法
2007/03/06 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
python 简易计算器程序,代码就几行
2009/08/29 Python
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
利用Python开发实现简单的记事本
2016/11/15 Python
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
python编写弹球游戏的实现代码
2018/03/12 Python
python模拟表单提交登录图书馆
2018/04/27 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
提升python处理速度原理及方法实例
2019/12/25 Python
Python如何使用字符打印照片
2020/01/03 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
函授本科毕业生自我鉴定
2013/10/16 职场文书
高中生家长会演讲稿
2014/01/14 职场文书
《商鞅南门立木》教学反思
2014/02/16 职场文书
高中微机老师自我鉴定
2014/02/16 职场文书
教学质量评估实施方案
2014/03/17 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
捐款仪式主持词
2015/07/04 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA