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 相关文章推荐
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
七个不允许错过的jQuery小技巧
Dec 21 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
Aug 16 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
详解node-ccap模块生成captcha验证码
Jul 01 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 Javascript
Angular2实现组件交互的方法分析
Dec 19 Javascript
js实现简单点赞操作
Mar 17 Javascript
vue实现信息管理系统
May 30 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 Javascript
JavaScript中的Proxy对象
Nov 27 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
Cannot modify header information错误解决方法
2008/10/08 PHP
Yii配置文件用法详解
2014/12/04 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
php中的依赖注入实例详解
2019/08/14 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
Python解析树及树的遍历
2016/02/03 Python
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
介绍一下常见的木马种类
2014/11/15 面试题
煤矿班组长岗位职责
2013/12/29 职场文书
优质服务演讲稿
2014/05/14 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
Python图像处理库PIL详细使用说明
2022/04/06 Python
Go语言入门exec的基本使用
2022/05/20 Golang