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 相关文章推荐
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
js局部刷新页面时间具体实现
Jul 04 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
vue项目打包部署_nginx代理访问方法详解
Sep 20 Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 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中删除数组的第一个元素和最后一个元素的函数
2015/03/07 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
下载糗事百科的内容_python版
2008/12/07 Python
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
Python创建字典的八种方式
2019/02/27 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
如何使用python进行pdf文件分割
2019/11/11 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
基于FME使用Python过程图解
2020/05/13 Python
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
怎样在程序里获得一个空指针
2015/01/24 面试题
奉献演讲稿范文
2014/05/21 职场文书
弄虚作假心得体会
2014/09/10 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
社区宣传标语口号
2015/12/26 职场文书
中学教代会开幕词
2016/03/04 职场文书