JavaScript实现body内任意节点的自定义属性功能示例

本文实例讲述了JavaScript实现body内任意节点的自定义属性功能。分享给大家供大家参考，具体如下：

在HTML中body内的任意节点是可以自定义属性的，当然不包括body，
比如以下的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html自定义标签</title>
</head>
<body>
<span id="s" iii="222"></span>
</body>
</html>

我可以为id为s的行内位置定义一个自定义属性iii，其值为222，很明显的iii根本就不是span元素甚至其他任意一个元素的基本属性，也就是那些id,style,之类的，因此对这个节点内的东西的表现是没有任何影响的，但是这样做又有什么意义呢？

这主要是用来提供给javascript做进一步操作。有时候，一个HTML并不是像上面所示得这么简单，配合一个动态网页语言php,jsp,asp.net一切就变得复杂起来，你就可以设置一个标签给你要操作的节点，通过getAttribute与setAttribute操作。比如为上面的HTML页面写入如下的脚本：

<script>
var span=document.getElementById("s");
alert(s.getAttribute("iii")+"");
s.setAttribute("iii","2222121");
alert(s.getAttribute("iii")+"");
</script>

先拿到span这个节点，然后再拿到其属性值，并且必须把这个属性值通过+""强制转化成字符串才能够正常弹出，

之后把span节点的iii属性的值设置成2222121再弹出。

运行效果如下图：

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

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

赞 (0)

相关推荐

  • JS获取节点的兄弟,父级,子级元素的方法

    先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 复制代码 代码如下: <div id="test"><div></div><div></div></div> 原生的JS获取ID为test的元素下的子元素.可以用: var a = docuemnt.getElementByI

  • JavaScript 用cloneNode方法克隆节点的代码

    JavaScript 用cloneNode方法克隆节点的代码

    很多时候我们会用for 来生成多个结构相同的节点结构,这样我们需要写很多createElement.setAttribute.appendChild 等代码. 但其实我们只需要有一个html 的模板,就可以用cloneNode 方法对已有的节点进行克隆,包括其子节点. 以下是cloneNode 方法原型: newElement oldElement.cloneNode(bool deep); 这个方法只有一个参数deep,布尔值,如果为true,则克隆oldElement 这个及其子节点,否则只

  • JS获取父节点方法

    如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过):        1. 通过顶层document节点获取:            (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同id的节点,那么只返回第一个节点.             如今,已

  • JavaScript 节点操作 以及DOMDocument属性和方法

    属性: 1Attributes 存储节点的属性列表(只读) 2childNodes 存储节点的子节点列表(只读) 3dataType 返回此节点的数据类型 4Definition 以DTD或XML模式给出的节点的定义(只读) 5Doctype 指定文档类型节点(只读) 6documentElement 返回文档的根元素(可读写) 7firstChild 返回当前节点的第一个子节点(只读) 8Implementation 返回XMLDOMImplementation对象 9lastChild 返回

  • js遍历子节点子元素附属性及方法

    复制代码 代码如下: // 添加子节点前 删除所有子节点 var usernameEle = document.getElementById("username"); var childs = usernameEle.childNodes; for(var i = childs.length - 1; i >= 0; i--) { usernameEle.removeChild(childs[i]); } var username = document.createTextNod

  • Javascript removeChild()删除节点及删除子节点的方法

    Javascript removeChild()删除节点及删除子节点的方法

    下面给大家介绍Javascript removeChild()删除节点的方法,具体详情如下所示: 在Javascript中,只提供了一种删除节点的方法:removeChild(). removeChild() 方法用来删除父节点的一个子节点. 语法: parent.removeChild(thisNode) 参数说明: 参数 说明 thisNode 当前节点,即要删除的节点 parent 当前节点的父节点,即 thisNode.parentNode 例如,删除 id="demo" 的节

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

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

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

  • Javascript入门学习第八篇 js dom节点属性说明第1/2页

    今天我们讲DOM属性. 前面其实我们已经碰过DOM属性了. 比如: nodeName,nodeType-..今天我们详细的讲解下. 1,nodeName属性  : 节点的名字. 如果节点是元素节点,那么返回这个元素的名字.此时,相当于tagName属性. 比如: <p>aaaa</p>  : 则返回 p ; 如果是属性节点,nodeName将返回这个属性的名字. 如果是文本节点,nodeName将返回一个#text的字符串. 另外我要说的是: nodeName属性是一个只读属性,不

  • javascript获取网页中指定节点的父节点、子节点的方法小结

    我们在实际的开发当中经常要获取页面中某个html元素,动态的更新该元素的样式.内容属性等. 那么如何获取要更新的这些元素呢?用JavaScript获取这些节点的方法有很多种,下面是总结的一些方法. 1. 通过document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同id的节点,那么只返回第一个节点. 如 今,已经出现了如prototype.Mootools等多

  • js查找父节点的简单方法

    <div>         <a href="#">标题</a>         <ul id="demo">             <li><a href="#" onclick="selectThisItem(this)">项目一</a></li>                 <ul>             

随机推荐