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 第二代身份证号码的验证机制代码
May 12 Javascript
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
js图片处理示例代码
May 12 Javascript
Javascript基础教程之switch语句
Jan 18 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 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
用来给图片加水印的PHP类
2008/04/09 PHP
PHP通用分页类page.php[仿google分页]
2008/08/31 PHP
php 数学运算验证码实现代码
2009/10/11 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
joomla组件开发入门教程
2016/05/04 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
jquery提示 &quot;object expected&quot;的解决方法
2009/12/13 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
layui table 参数设置方法
2018/08/14 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
js实现微信聊天效果
2020/08/09 Javascript
python实现排序算法
2014/02/14 Python
python字符串连接方法分析
2016/04/12 Python
django用户登录和注销的实现方法
2018/07/16 Python
python web框架 django wsgi原理解析
2019/08/20 Python
python numpy 矩阵堆叠实例
2020/01/17 Python
Python读取VOC中的xml目标框实例
2020/03/10 Python
python异步Web框架sanic的实现
2020/04/27 Python
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
总经理驾驶员岗位职责
2013/12/04 职场文书
信息服务专业毕业生求职信
2014/03/02 职场文书
公司委托书格式范文
2014/10/09 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
出国留学单位推荐信
2015/03/26 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js