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 相关文章推荐
JS实现文档加载完成后执行代码
Jul 09 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
Jun 12 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
vue.js路由跳转详解
Aug 28 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
JS用最简单的方法实现四舍五入
Aug 27 Javascript
详解uniapp的全局变量实现方式
Jan 11 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 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中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
Javascript 解疑
2009/11/11 Javascript
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
用Python中的字典来处理索引统计的方法
2015/05/05 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
Python中GIL的使用详解
2018/10/03 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
PyTorch中的C++扩展实现
2020/04/02 Python
一组SQL面试题
2016/02/15 面试题
机械专业应届生求职信
2013/09/21 职场文书
工程招投标邀请书
2014/01/26 职场文书
初中三好学生自我鉴定
2014/04/07 职场文书
本科生就业推荐信
2014/05/19 职场文书
党建目标管理责任书
2014/07/25 职场文书
法定代表人身份证明书
2014/09/10 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
大客户经理岗位职责
2015/04/09 职场文书
邓小平文选读书笔记
2015/06/29 职场文书