javascript中对Attr(dom中属性)的操作示例讲解


Posted in Javascript onDecember 02, 2013
<!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>
    <title>20120430dom操作属性节点.htm</title>
    <meta  http-equiv="Content-Type" content="text/html; chareset=utf-8"/>
    <script type="text/javascript">
    //Attr(属性)虽然是节点 但是不能用firstChild和childNodes等访问
        function testBtn() {
                //  var myNode = document.getElementById("btn");//得到element标签  
                //  var myNodeName = myNode.nodeName;//得到上述标签的名字为按钮
                //  var x = myNode.attributes["onclick"].nodeType;//atrributes为一个属性数组  本句话的意思是找到标签为'btn'的nodeType=2为属性
                // if (x == 2) {
                //   alert("您访问到的是一个属性节点!");
                // }
            //下面是对某节点属性的修改代码================================================================
            //============================================================================================
            var myNode = document.getElementById("btn");//得到element标签  
            var x = myNode.getAttribute("id");//获取该标签的id属性
            myNode.setAttribute("value", "test");//修改标签的id属性
            var y = myNode.getAttribute("value");
            alert("id的属性由“" + x + "”变成了“" + y + "”");
            //下面是为某元素添加属性=====================================================================
            //============================================================================================
            var myAtrr = document.createAttribute("class");
            myAtrr.nodeValue = "classStyle";
            myNode.setAttribute(myAtrr);            //getAttributeNode 和getAttribute的区别是获取属性值 - getAttribute() 
            //getAttribute("") 方法返回属性的值。 
            //获取属性值 - getAttributeNode() 
            //getAttributeNode("") 方法返回属性节点,getAttributeNode('').value取得节点值。 

            //对不同的浏览器结果不一样  在这里不做深入研究================================================
            if (myNode.getAttributeNode("class") != null)
                alert("添加成功!!");
            else
                alert("没有添加成功");
            //下面为移除属性的值==========================================================================
            //===========================================================================================
            //            myNode.removeAttribute("class");
            //            if (myNode.getAttribute("class") == null)
            //                alert("删除成功!!");
            //            else
            //                alert("没有成功");
            var delNode=myNode.getAttributeNode("class");
            if (myNode.getAttribute("class") == null)
                alert("删除成功!!");
            else
                alert("没有成功");
        }
    </script>
</head>
<body>
<h1>第二章关于dom</h1>
<p id="p1">dom简介</p>
<p>如何使用<a href="#" name="link">dom</a></p>
<input id="btn"  type="button" onclick="testBtn()" value="测试"/>
</body>
</html>

注意区分后面有Node和没有Node的参数方法的区别
Javascript 相关文章推荐
防止动态加载JavaScript引起的内存泄漏问题
Oct 08 Javascript
php图像生成函数之间的区别分析
Dec 06 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
浅谈webpack对样式的处理
Jan 05 Javascript
微信小程序实现工作时间段选择
Feb 15 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 21 Javascript
浅析jquery的作用与优势
Dec 02 #Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 #Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 #Javascript
jquery中的过滤操作详细解析
Dec 02 #Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 #Javascript
用JS实现3D球状标签云示例代码
Dec 01 #Javascript
js arguments,jcallee caller用法总结
Nov 30 #Javascript
You might like
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
ES6 十大特性简介
2020/12/09 Javascript
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Django中几种重定向方法
2015/04/28 Python
python链接Oracle数据库的方法
2015/06/28 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
"引用"与多态的关系
2013/02/01 面试题
心得体会怎么写
2013/12/30 职场文书
高中生活自我鉴定
2014/01/18 职场文书
土木工程求职信
2014/05/29 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书