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 弹出层组件(升级版)
May 12 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
vue实现全选和反选功能
Aug 31 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
react redux入门示例
Apr 19 Javascript
Less 安装及基本用法
May 05 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
从vue源码看props的用法
Jan 09 Javascript
vue-socket.io接收不到数据问题的解决方法
May 13 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
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
两种php去除二维数组的重复项方法
2015/11/04 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
window.open()实现post传递参数
2015/03/12 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
Coccinelle官网:意大利的著名皮具品牌
2019/05/15 全球购物
一套Java笔试题
2016/08/20 面试题
工作失职检讨书范文
2014/01/16 职场文书
本科毕业生专业自荐书范文
2014/02/05 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
运动会加油口号
2014/06/07 职场文书
商务英语专业求职信
2014/06/26 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
民事二审代理词
2015/05/25 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
借钱欠条怎么写
2015/07/03 职场文书
分家协议书范本
2016/03/22 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python