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 单引号 传递方法
Jun 22 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
Jquery结合HTML5实现文件上传
Jun 25 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 Javascript
实现JavaScript的组成----BOM和DOM详解
May 18 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 Javascript
详解微信小程序中组件通讯
Oct 30 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/03 冲泡冲煮
php,ajax实现分页
2008/03/27 PHP
MySQL连接数超过限制的解决方法
2011/07/17 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
动态表格Table类的实现
2009/08/26 Javascript
最常用的12种设计模式小结
2011/08/09 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
jQuery中:input选择器用法实例
2015/01/03 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
Python面向对象编程之继承与多态详解
2018/01/16 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
Windows下python3.6.4安装教程
2018/07/31 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
tensorflow 实现数据类型转换
2020/02/17 Python
倩碧美国官网:Clinique美国
2016/07/20 全球购物
Python是如何进行类型转换的
2013/06/09 面试题
机电一体化专业应届本科生求职信
2013/09/27 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
2015年电教工作总结
2015/05/26 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
创业计划书之干洗店
2019/09/10 职场文书
Python实现位图分割的效果
2021/11/20 Python
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS