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 相关文章推荐
input+select(multiple) 实现下拉框输入值
May 21 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
Jan 06 Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
Aug 20 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 Javascript
学前端,css与javascript重难点浅析
Jun 11 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生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
php获取文章上一页与下一页的方法
2014/12/01 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
Python中文件操作简明介绍
2015/04/13 Python
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
大学生实习证明范本
2014/01/15 职场文书
党建工作经验交流材料
2014/05/25 职场文书
全运会口号
2014/06/20 职场文书
党支部特色活动方案
2014/08/20 职场文书
暑期培训班策划方案
2014/08/26 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android