JS实现访问DOM对象指定节点的方法示例

本文实例讲述了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>www.jb51.net 访问指定节点</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>

四 运行弹出如下提示框：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

  • javascript中html字符串转化为jquery dom对象的方法
  • javascript转换字符串为dom对象（字符串动态创建dom）
  • javascript 删除dom对象的事件函数代码
  • js基础之DOM中元素对象的属性方法详解
  • JavaScript简单遍历DOM对象所有属性的实现方法
  • JavaScript基础语法、dom操作树及document对象
  • JS实现DOM删除节点操作示例
  • JS实现的DOM插入节点操作示例
  • javascript获取dom的下一个节点方法
  • JS/jQuery判断DOM节点是否存在的简单方法
  • JavaScript DOM节点操作方法总结
赞 (0)

相关推荐

  • javascript获取dom的下一个节点方法

    javascript获取dom的下一个节点方法

    利用javascript 写一个在页面点击加减按钮实现数字的累加. 简略的html大概如此.看得懂就好不要在意这些细节啊 <input type="button" value="+" onclick="jia(this)" /> <label class="num">0</label> <input type="button" value="-"

  • JS/jQuery判断DOM节点是否存在的简单方法

    JS原生判断DOM节点是否存在页面中 JavaScript原生函数没有提供判断DOM节点是否存在方法,我们通常获取DOM节点几乎都是document.getElement..方法,会返回一个object数组合集,我们可以通过object[0],object[1]这样来访问这个合集的每一个对象.既然返回的是数组合集,那么就有length属性,而length大于等于1即表示DOM节点存在页面中 代码: Object.prototype.exist = function(){ if(typeof th

  • JavaScript DOM节点操作方法总结

    JavaScript DOM节点操作方法总结

    节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进行增删改之前,首先要找到对应的元素.具体的查找方法如下: getElementByID() // 得到单个节点 getElementsByTagName() // 得到节点数组 NodeList getElementsByName() // 得到节点数组 NodeList 同时还可以利用元素节点的属性获取它的

  • JS实现DOM删除节点操作示例

    JS实现DOM删除节点操作示例

    本文实例讲述了JS实现DOM删除节点操作.分享给大家供大家参考,具体如下: 一 介绍 删除节点通过使用removeChild()方法来实现. removeChild()方法用来删除一个子节点. obj. removeChild(oldChild) oldChild:表示需要删除的节点. 二 应用 删除节点,本示例将通过DOM对象的removeChild()方法,动态删除页面中所选中的文本. 三 代码 <!DOCTYPE html> <html> <head> <t

  • js基础之DOM中元素对象的属性方法详解

    js基础之DOM中元素对象的属性方法详解

    在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个    文档节点 . 所有的HTML元素都是    元素节点 所有 HTML 属性都是    属性节点 文本插入到 HTML 元素是    文本节点 注释是    注释节点. 最基本的节点类型是Node类型,其他所有类型都继承自Node,DOM操作往往是js中开销最大的部分,因而NodeList导致的问题最多.要注意:NodeList是'动态的',

  • JS实现的DOM插入节点操作示例

    JS实现的DOM插入节点操作示例

    本文实例讲述了JS实现的DOM插入节点操作.分享给大家供大家参考,具体如下: 一 介绍 插入节点通过使用insertBefore()方法来实现. insertBefore()方法将在另一个子节点前插入新的子节点. obj.insertBefore(new,ref) new:表示新的子节点. ref:指定一个节点,在这个节点前插入新的节点. 二 应用 插入节点,本示例在页面的文本框中输入需要插入的文本,然后通过单击"前插入"按钮将文本插入到页面中. 三 完整示例代码: <!DOCT

  • JavaScript基础语法、dom操作树及document对象

    JavaScript基础语法、dom操作树及document对象

    第一部分 基本语法: 1.数据类型(字符串.小数.整数.布尔.时间日期) 复制代码 代码如下: var s="3.14" var n=parsefloat(s) s+=5; var s="abc3.14" var n=parsefloat(s) //NaN s+=5;//解析转换成小数型 var d=parseInt(s)//解析转换成整数型 isNaN(字符串),判断是不是数字模样的字符串,是-false:否-true 2.变量 3.运算符:四大类 4.表达式(为

  • javascript 删除dom对象的事件函数代码

    JS添加/删除事件在IE和支持dom浏览器分别为:attachEvent(ie中的添加事件),detachEvent(ie中的删除事件),addEventListener(支持dom浏览器中的添加事件),removeEventListener(支持dom浏览器中的删除事件). 例如第一次点击黑色区域的时候弹出警告,并移除click事件,也就是第二次再点击的时候就没反应了,整合代码如下: 添加删除事件 var EventUtil=new Object; //oTarget:目标:sEventTyp

  • javascript中html字符串转化为jquery dom对象的方法

    原html字符串如下: var text="<div id='overLay' style='width:50px;height:60px;background:url(imgs/back.png) left top no-repeat; position: absolute;'>" + "<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px

  • javascript转换字符串为dom对象（字符串动态创建dom）

    前言: 在javascript里面动态创建标准dom对象一般使用: var obj = document.createElement('div'); 然后再给obj设置一些属性. 但是,在实际使用过程中,有些人可能会想,要是能这样创建标准的dom对象就好了 伪代码:var obj=strToDom('<div id="div_1" class="div1">Hello World!</div>'); 那么今天的目的就是教大家怎么去实现一个这样

  • JavaScript简单遍历DOM对象所有属性的实现方法

    本文实例讲述了JavaScript遍历DOM对象所有属性的实现方法.分享给大家供大家参考,具体如下: DOM对象的HTML: 复制代码 代码如下: <button id="btnToggleState" onclick="toggleStateManagement()">Disable State Cookie</button> 1.遍历DOM对象所有具备的属性(全属性.不管在HTML tag中是否设置都会遍历) var obj=docume

随机推荐