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 相关文章推荐
JavaScript对象数组的排序处理方法
Oct 21 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
AngularJS实现Input格式化的方法
Nov 07 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 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
thinkphp的c方法使用示例
2014/02/24 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
js继承实现方法详解
2016/12/16 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
python实现学生信息管理系统
2020/04/05 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
python实现自动发送邮件
2018/06/20 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
python中selenium库的基本使用详解
2020/07/31 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
《最可爱的人》教学反思
2014/02/14 职场文书
出国英文推荐信
2014/05/10 职场文书
Java并发编程之Executor接口的使用
2021/06/21 Java/Android