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 相关文章推荐
云网广告中的代码,提示出错,大家找找
Nov 21 Javascript
javascript+xml技术实现分页浏览
Jul 27 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 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
自己做矿石收音机
2021/03/02 无线电
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
Python程序设计入门(1)基本语法简介
2014/06/13 Python
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
Django查询数据库的性能优化示例代码
2017/09/24 Python
Python 列表理解及使用方法
2017/10/27 Python
浅谈python jieba分词模块的基本用法
2017/11/09 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
对Django外键关系的描述
2019/07/26 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
大学生冰淇淋店商业计划书
2014/01/14 职场文书
2015年新农合工作总结
2015/03/30 职场文书
学校党支部公开承诺书
2015/04/30 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
赢在执行观后感
2015/06/16 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis