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将Table导出到Excel实现思路及代码
Mar 13 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
JavaScript中的迭代器和生成器详解
Oct 29 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
ReactJs设置css样式的方法
Jun 08 Javascript
vue实现密码显示隐藏切换功能
Feb 23 Javascript
vue实现固定位置显示功能
May 30 Javascript
Vue scoped及deep使用方法解析
Aug 01 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查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
php实现Mysql简易操作类
2015/10/11 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
JavaScript 拾漏补遗
2009/12/27 Javascript
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
Python中设置变量访问权限的方法
2015/04/27 Python
儿童编程python入门
2018/05/08 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
软件项目开发计划书
2014/05/01 职场文书
说明书范文
2014/05/07 职场文书
幼儿园感谢信
2015/01/21 职场文书
酒会邀请函
2015/01/31 职场文书
信访工作个人总结
2015/03/03 职场文书
公司聚餐通知
2015/04/22 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书